Vue3 学习笔记(Day1)

「写在前面」

本文为尚硅谷禹神 Vue3 教程的学习笔记。本着自己学习、分享他人的态度,分享学习笔记,希望能对大家有所帮助。


目录

  • 0 课程介绍
  • 1 Vue3 简介
  • 2 创建 Vue3 工程
    • 2.1 基于 vue-cli 创建
    • 2.2 基于 vite 创建(推荐)
    • 2.3 一个简单的效果

0 课程介绍

P1:https://www.bilibili.com/video/BV1Za4y1r7KE?p=1

1 Vue3 简介

P2:https://www.bilibili.com/video/BV1Za4y1r7KE?p=2

Vue 是一个用于 构建用户界面渐进式 框架

官方文档:

https://cn.vuejs.org/

2 创建 Vue3 工程

2.1 基于 vue-cli 创建

P3:https://www.bilibili.com/video/BV1Za4y1r7KE?p=3

2.2 基于 vite 创建(推荐)

vite 是新一代前端构建工具,官网地址:https://vitejs.cn

具体操作如下:

## 1.创建命令
npm create vue@latest

#
# 2.具体配置
## 配置项目名称
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript? Yes
## 是否添加JSX支持
√ Add JSX Support? No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development? No
## 是否添加pinia环境
√ Add Pinia for state management? No
## 是否添加单元测试
√ Add Vitest for Unit Testing? No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No
## 是否添加ESLint语法检查
√ Add ESLint for code quality? Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting? No

自己动手编写一个App组件:

P4:https://www.bilibili.com/video/BV1Za4y1r7KE?p=4

<template>
<div class="app">
<h1>你好啊!</h1>
</div>
</template>

<script lang="ts">
export default {
name:'App' //组件名
}
</script>

<style>
.app {
background-color: #ddd;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
</style>

安装官方推荐的vscode插件:

alt
alt

2.3 一个简单的效果

P5:https://www.bilibili.com/video/BV1Za4y1r7KE?p=5

Vue3向下兼容Vue2语法,且Vue3中的模板中可以没有根标签

<template>
<div class="person">
<h2>姓名:{{name}}</h2>
<h2>年龄:{{age}}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">年龄+1</button>
<button @click="showTel">点我查看联系方式</button>
</div>
</template>

<script lang="ts">
export default {
name:'App',
data() {
return {
name:'张三',
age:18,
tel:'13888888888'
}
},
methods:{
changeName(){
this.name = 'zhang-san'
},
changeAge(){
this.age += 1
},
showTel(){
alert(this.tel)
}
},
}
</script>

「结束」
alt

本文由 mdnice 多平台发布

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/396933.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

智慧社区管理系统:构建未来的生活模式

在这个信息化、智能化的时代&#xff0c;我们期待的不再是简单的居住空间&#xff0c;而是一个集安全、便捷、舒适、环保于一体的智能化社区。为此&#xff0c;我们推出了全新的智慧社区管理系统&#xff0c;旨在将先进的科技力量引入社区管理&#xff0c;为居民提供更优质的生…

MySQL基础学习

MySQL基础 注意&#xff1a;本文的图片截图自尚硅谷MySQL笔记。 一&#xff1a;基本概述&#xff1a; 什么是数据库&#xff1a; 数据库是一种用来存储和管理数据的系统。它是一个组织化的数据集合&#xff0c;可以通过计算机系统进行访问、管理和更新。数据库可以存储各种…

人力资源智能化管理项目(day09:权限应用)

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/humanResourceIntelligentManagementProject 搭建页面结构 <template><div class"container"><div class"app-container"><el-button class"btn-add" type"p…

数字化转型导师坚鹏:政府数字化转型之数字化新技术解析与应用

政府数字化转型之数字化新技术解析与应用 课程背景&#xff1a; 数字化背景下&#xff0c;很多政府存在以下问题&#xff1a; 不清楚新技术的发展现状&#xff1f; 不清楚新技术的重要应用&#xff1f; 不清楚新技术的成功案例&#xff1f; 课程特色&#xff1a; 有…

OpenAI 全新发布文生视频模型 Sora,支持 60s 超长长度,有哪些突破?将带来哪些影响?

Sora大模型简介 OpenAI 的官方解释了在视频数据基础上进行大规模训练生成模型的方法。 我们下面会摘取其中的关键部分罗列让大家快速get重点。 喜欢钻研的伙伴可以到官网查看技术报告&#xff1a; https://openai.com/research/video-generation-models-as-world-simulator…

数据挖掘实战 —— 抖音用户浏览行为数据分析与挖掘(二)

上接&#xff1a;数据挖掘实战 —— 抖音用户浏览行为数据分析与挖掘(一&#xff09; &#xff08;六&#xff09;模型选择与建立——聚类分析&#xff0c;关联规则 针对抖音用户浏览行为数据&#xff0c;我们可以选择使用各种适应的数据挖掘模型或算法&#xff0c;如关联规则…

TRS 2024 论文阅读 | 基于点云处理和点Transformer网络的人体活动连续识别

无线感知/雷达成像部分最新工作<持续更新>: 链接地址 注1:本文系“无线感知论文速递”系列之一,致力于简洁清晰完整地介绍、解读无线感知领域最新的顶会/顶刊论文(包括但不限于 Nature/Science及其子刊; MobiCom, Sigcom, MobiSys, NSDI, SenSys, Ubicomp; JSAC, 雷达学…

【机器学习笔记】 9 集成学习

集成学习方法概述 Bagging 从训练集中进行子抽样组成每个基模型所需要的子训练集&#xff0c;对所有基模型预测的结果进行综合产生最终的预测结果&#xff1a; 假设一个班级每个人的成绩都不太好&#xff0c;每个人单独做的考卷分数都不高&#xff0c;但每个人都把自己会做的…

一键彻底清理!解密如何清理电脑C盘垃圾的绝佳方法

随着我们在电脑上进行各种活动&#xff0c;C盘往往会逐渐积累大量的垃圾文件&#xff0c;这可能导致系统运行缓慢、启动时间延长以及存储空间被占用。对于许多用户而言&#xff0c;如何高效而一键地清理电脑C盘的垃圾成为一个备受关注的问题。如何清理电脑c盘垃圾&#xff1f;在…

树与二叉树

树与二叉树 文章目录 树与二叉树一、树的概念及结构1.、树的概念2、树的相关概念1.3 树的表示 二、二叉树1.概念2、特殊的二叉树3、二叉树的性质4、二叉树的存储结构 三、二叉树的顺序结构及实现1、二叉树的顺序结构2、堆的概念及结构3、堆的实现 四、二叉树链式结构的实现1、遍…

【Unity2019.4.35f1】配置JDK、NDK、SDK、Gradle

目录 JDK NDK SDK 环境变量 Gradle JDK JDK&#xff1a;jdk-1.8版本Java Downloads | Oracle 下载要登录&#xff0c;搜索JDK下载公用账号&#xff1a;Oracle官网 JDK下载 注册登录公共账号和密码_oracle下载账号-CSDN博客 路径&#xff1a;C:\Program Files\Java\jd…

RichAF 中文版(下)

原文&#xff1a;Rich AF : The Winning Money Mindset That Will Change Your Life 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 五、我出生时不是富人&#xff0c;但我的孩子会是 投资部分 当涉及投资时&#xff0c;我有三个关于致富的真相要分享&#xff1a; …

外贸人大部分都复工了吧

这几天是属于国家规定的节后上班时间&#xff0c;估计大部分人都已经开始复工了。作为粤西地区小伙伴中的一员&#xff0c;表示虽然身在广州&#xff0c;心却还在高州&#xff0c;毕竟年例在这些天才刚刚开始&#xff0c;我们那边每年最热闹的时候就是年例了&#xff01; 由于…

AI破局俱乐部,你要了解的都在这里

您好&#xff0c;我是码农飞哥&#xff08;wei158556&#xff09;&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。&#x1f4aa;&#x1f3fb; 1. Python基础专栏&#xff0c;基础知识一网打尽&#xff0c;9.9元买不了吃亏&#xff0c;买不了上当。 Python从入门到精通…

【Linux | C++ 】基于环形队列的多生产者多消费者模型(Linux系统下C++ 代码模拟实现)

阅读导航 引言一、生产者消费者模型二、环形队列简介三、基于环形队列的生产者消费者模型&#xff08;C 代码模拟实现&#xff09;⭕Makefile文件⭕ . h 头文件✅sem.hpp✅ringQueue.hpp ⭕ . cpp 文件✅testMain.cpp 温馨提示 引言 在上一篇文章中&#xff0c;我们深入探讨了…

S32 Design Studio PE工具配置Watch Dog

配置操作 在一个component下面可以创建多个看门狗&#xff0c;一般会有个限制&#xff0c;就是不能创建多个 看门狗比较简单&#xff0c;在configurations list里面新建软件看门狗&#xff0c;配置里面的名字、超时时间等配置即可。 代码对应 生成的代码在watchdog1.c和 wat…

CV论文--2024.2.19

1、Self-Play Fine-Tuning of Diffusion Models for Text-to-Image Generation 中文标题&#xff1a;自我对弈微调扩散模型&#xff0c;用于文本到图像生成 简介&#xff1a;在生成人工智能&#xff08;GenAI&#xff09;领域&#xff0c;微调扩散模型仍然是一个未被充分探索的…

搭建本地git仓库 gogs本地大家 CentOS搭建本地git仓库 CentOS部署gogs

运行环境 操作系统:CentOS7.8 64位 使用mysql5.7.44数据库 选用依赖 yum install vim wget unzip -y本文选择使用WLNMP集成环境 第一步 配置epel源(必须) yum install epel-release第二步 添加wlnmp源 这里选择自动脚本 curl -fsSL "https://sh.wlnmp.com/wlnmp…

算法模板 7.拓扑排序

拓扑排序 用来解决循环依赖相关问题&#xff01;&#xff01;&#xff01; 一个有向无环图一定存在一个拓扑序列&#xff01;一定存在至少一个入度为0的点 有向无环图也被称作拓扑图 先把入度为0的点压入队列&#xff0c;然后进行广度优先搜索&#xff08;找到队头&#xf…

遥感影像数据处理分析软件与ChatGPT集成、多光谱数据分析与实践、高光谱数据分析与实践

目录 第一章 遥感科学与AI基础 第二章 遥感影像数据处理分析软件与ChatGPT集成 第三章 多光谱数据分析与实践专题 第四章 高光谱分析与实践专题 更多应用 将最新的人工智能技术与实际的遥感应用相结合&#xff0c;提供不仅是理论上的&#xff0c;而且是适用和可靠的工具和…