我是一名后端工程师，平时开发一些小工具需要前端展示，所以学习一些前端技术。Vue.js是一种渐进式框架，无论是搭建简单项目还是复杂项目都是很方便的。
不过任何技术都要反复使用才能熟练掌握，有的时候太长时间没做前端开发可能就会有些生疏，于是写下这篇笔记整理Vue的知识点防止自己遗忘，同时，对于想学习Vue的朋友提供一点帮助。
我本人对Vue研究得不是特别深入，如有错误之处，希望大家帮忙指正。感谢。
1.Vue开发环境的搭建
首先进入Vue的官网:Vue.js
选择起步-安装，可以看到有几种方式
手动下载vue.js文件，用script标签引入
用script标签引入cdn地址
使用npm工具
我们在实际开发的时候常常会使用一些脚手架如Vue-Cli、Vite搭配npm去构建项目，但现在尚在学习阶段，我们使用最朴素的方式去引入Vue.js
在官网的起步-安装页面提供了Vue.js的下载链接，有两个版本，开发版本和生产版本。生产版本就是项目正式上线所需要的版本，相对于开发版本而言，删去了一些提示和警告，减小了文件的体积。
那么在开发阶段，我们是需要这些提示和警告的，所以我们下载开发版本。
下载完成之后，打开VScode新建一个源码文件夹，在文件夹下面新建vue.js文件夹，把刚才下载的js文件放在里面
我们新建一个html文件来测试一下，输入如下测试代码
点击查看代码
然后通过Open with Live Server打开浏览器，可以看到页面正常显示，证明vue.js引入成功
注意
script引入js文件时，src地址要输入正确
如果不知道Open with Live Server的，要安装扩展live server
2.第一个hello world
我们更改一下上面的代码
点击查看代码
然后用浏览器打开，发现就可以输出hello world了
那么这是怎么做到的呢
首先，我们用的既然是Vue，我们可以先实例化一个Vue对象
new Vue()
从例子中可以看到，我们实例化这个对象可以配置一些属性进去，当然这些属性都是内置好的
用花括号{}把属性括起来，属性是以键值对的形式存在，属性名和属性值之间用冒号隔开，每个键值对之间用逗号隔开
new Vue({
el: '#app',
data: {
message: 'hello world',
},
});
例子当中就有两个属性，一个是el，一个是data，后面我会介绍更多常用的属性以及方法
el这个属性是css选择器，表示我们操作的是哪里的元素
可以看到例子中我定义了一个div
其id是app，而el: '#app'就表示指定id为app的div作为一个容器给这个Vue实例使用
另外一个属性data是用来保存Vue实例的数据的，它的值是一个对象，用花括号{}括起来，里面可以定义一些属性和值
例子中我们定义了一个属性message: 'hello world'
而在我们定义的id为app的div中，我们通过插值语法{{}}把message值传到里面
这样在浏览器上就能显示我们想要的值：hello world
注意
一个Vue实例只能接管一个容器
插值语法：{{}}可以读取到data里的所有属性
data中的数据发生变化，容器中的值也会自动更新
3.Vue中的模板语法
插值语法
作用：可以在视图中显示data中的数据
用法：{{xxx}},xxx里是data中的定义的属性
例子：
指令语法
特点：用在标签的解析（标签属性，标签体内容，绑定事件等）
用法：v-xxx
例子：v-bind:href='url' 动态数据绑定(单向)
v-bind:href='url'可以简写为:href='url'
4.双向数据绑定
单向数据绑定
简介：上面我们用了v-bind:来动态绑定数据，它就是一种单向的数据绑定
例子:
单向数据绑定
当我在控制台里修改name的值，页面输入框中的值也随之发生改变
但当我修改页面输入框中的值，可以看到，控制台中data里的name的值没有变化
这就是单向数据绑定
双向数据绑定
用法：v-model
例子：
双向数据绑定
这次当我改变输入框中的数据时，data中的数据也会发生改变，这就是双向数据绑定
注意：v-model只能用在表单元素上
v-model:value='xxx'可以简写为v-model='xxx'
5.事件的绑定
事件的绑定
用法:v-on:事件名
例如：
点击事件 v-on:click='xxx'
简写：@click='xxx'
xxx里面是自己定义的方法名，定义在Vue实例里面的methods属性里
代码:
点击此处弹窗
效果如下
事件传参
定义函数的时候在括号里输入参数
点击此处弹窗
效果如下:
注意：
如果是无参函数，则@click='xxx'里xxx可以只写函数名，不加括号
定义在methods里的函数不能用箭头函数
使用event.target.innerText可以获取标签里的内容，调用的函数不加括号，或者括号里加$event
代码如下
点击此处显示此处内容
或者
点击此处显示此处内容
效果如下
6.常用事件修饰符
阻止默认事件
方法：在事件后面加.prevent就可以做的，这里就不演示原生js的做法了
在@click后面加了一个.prevent，这样当我们点击这个超链接时，触发弹框，但是没有跳转
阻止冒泡事件
方法：在事件后面加.stop就可以做到
例子：在
标签和它的父节点标签里都加了同一个点击事件，点击标签里的内容，会触发两次弹框事件，我只想弹一次，那么就在子节点里面的@click后面加.stop，代码如下:
点击此处弹窗
注意：.prevent和.stop可以连用
一次事件
顾名思义，让事件只触发一次
用法：在事件后面加.once就可以做到
用法和上面一样，在@click后面加.once，那么第一次点击会触发弹框事件，第二次点击则不触发，代码如下：
点击此处弹框
回车键事件
简介：当我们使用@keyup绑定键盘事件的时候，每一次敲击键盘就会触发一次事件，我们希望敲完完整的内容时才触发键盘事件，则需要使用.enter修饰符
例子：
请输入:
效果：
可以看到，输入‘你好’两个字，还没有确认，就已经触发了10次键盘事件
修改代码如下:
请输入:
效果如下：
可以看到，当我把整个‘你好’敲完，并按回车后，才触发一次键盘事件
7.Vue中的计算属性
定义：通过已有的属性计算新的属性，使用Vue实例中的computed属性
例子：如果我知道一个人的姓，和这个人的名，那么我能不能计算出他的姓名，答案很简单，就是姓+名，那么怎么在Vue中实现呢？
姓：
名：
姓名:
从代码中我们看到，我在Vue实例的data属性里，定义了一个firstName和一个lastName，并且在
中写了两个输入框，一个叫“姓”，一个叫“名”，这两个输入框中的值是和Vue实例双向数据绑定的。再看到第三个名叫“姓名”的输入框，它的值我写的是fullName，但是可以发现，这个fullName我不是定义在data里的，而是定义在computed属性里的。
这个computed属性，就是我们的计算属性了，可以看到，我定义的fullName属性里，有两个函数，一个叫get()，一个叫set()，在get()函数中，我实现了姓名的计算方法，把firstName+'-'+lastNamereturn出去，显示在第三个输入框上，如下图所示。
而set()函数里定义的方法，是更改第三个输入框中的值去改变firstName和lastName的属性值，现在这个场景我们用不着，所以可以将set()方法省略，省略了set()方法之后，fullName就可以简写了，简写为
computed: {
fullName(){
return this.firstName+'-'+this.lastName
}
}
注意：当我们使用computed里面属性的时候，不用加‘()’，因为这个属性里存储的只是一个返回值
同样的效果我们可以在methods里定义方法去实现，但为什么还要用计算属性呢？因为计算属性的优势
有缓存机制，可以复用
效率高，调试方便
8.监视属性
原理：被监视的属性发生改变时，调用回调函数，执行相关操作，使用watch属性
例子：制定计划的时候，我希望晴天出去打篮球，不是晴天就敲代码，这个时候我们就需要有一个属性来监视天气，代码如下
今日计划:{{plan}}
可以看到在Vue实例中定义了一个watch属性，用来监视isSunny属性，当isSunny发生改变的时候，执行handler()里面定义的方法
注意：watch里监视的属性一定要在data中定义
immediate: true是开启初始化调用
deep: true是开启深度监视
如果不需要开启初始化调用和深度监视，则可以简写：
watch: {
isSunny() {
this.plan = this.isSunny?'打篮球':'敲代码'
}
}
计算属性和监视属性的异同
监视属性是命令式的且重复的
通过计算属性实现更加简洁明了
两者都能实现的，优先选择计算属性
监视属性能实现异步调用，计算属性不行
9.class样式和style样式的动态绑定
Vue中class样式的绑定
字符串写法
使用场景：样式的类型不确定
写法：
点击此处更换颜色
原理：通过v-bind:class动态绑定class的值，可以切换不同class选择器从而切换样式
注意：动态绑定的class的值必须是data中定义的，不能直接写class选择器的名字
例子：
Document
点击此处更换背景颜色
可以看到，class的值与data中定义的属性值bg动态绑定，bg的值就是class选择器的名字，通过change()函数动态改变bg的值从而改变class的值，最终显示不同的样式
对象写法
使用场景：样式个数、类名确定，通过Boolean动态展示与否
用法：
Hello World!!!
原理：还是通过v-bind:class动态绑定data里的数据，这次直接在data里定义一个对象obj，将各种样式定义在里面
例子：
Document
Hello World!!!
obj里面定义了各种样式，通过true和false来确定这些样式是否显示
数组写法
使用场景：需要绑定的样式个数不确定，类名也不确定
用法：用法：
Hello World!!!
原理：还是通过v-bind:class动态绑定data里的数据，这次直接在data里定义一个数组arr，将各种样式定义在里面
例子：
Document
Hello World!!!
样式都定义在数组arr里面，可以自定义方法增删arr里面的值从而动态改变样式
Vue中style样式的动态绑定
用法和class样式的动态绑定一样，都是通过v-bind:来绑定
用法：
Hello World!!!
例子:
Hello World!!!
可以看到在
标签里动态绑定的style后面是一个对象，用{}括起来了，里面是key-value键值对，用逗号隔开，而且key值要写成驼峰的形式，background-color改为backgroundColor,font-size改为fontSize。而value值是定义在data里面的
效果：可以打开Vue的开发者工具，看到style样式全部显示在data里面，可以动态地去调整
10.Vue中的条件渲染
v-if用法
用法：
直接看例子：
打篮球
敲代码
约会
睡觉
随机数:{{num}}
其实学过js或者后端语言的都能看出来，这就是if-else，我定义一个方法生成随机数，随机到哪个数，那么那个
标签显示，其他的不显示
效果展示：
用法很简单，有一点要注意的是 需要连用，否则会报错
v-show用法
符合条件的Dom显示了，那不符合条件的Dom怎么处理呢?
我们先来看另外一个指令
例子：
打篮球
敲代码
约会
随机数:{{num}}
我们发现使用也可以让Dom节点隐藏，那么这和有什么区别呢？
站内有一篇文章解释的很清楚：点击此处查看
总的来说v-if和的特点是这样的：
不展示时直接移除Dom元素(实际上是因为Vue没有去渲染)，适合切换频率低的场景
不展示时使用隐藏样式，适合切换频率高的场景
一般来说，有更高的切换开销，有更高的初始渲染开销
如果需要非常频繁地切换，就使用，如果运行时条件很少改变，就用
11.Vue中的列表渲染
v-for的用法
定义：使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名
遍历字符串
{{item}}
遍历数组
{{item}}
第二个参数：索引
遍历数组时可以添加第二个参数，表示数组的索引
{{item}}-{{index}}
遍历对象
{{item}}
只有一个参数的话默认是对象的value值
第二个参数：key值，第三个参数：索引
{{index}}-{{key}}-{{value}}
12.Vue中数据的更新问题
对象更新问题
描述：在data中定义一个对象obj，现在需要通过外部方法动态地为obj添加一个属性，应该怎么操作？
方法：Vue.set(vm.object, propertyName, value);或this.$set(vm.object, propertyName, value);
例子：
{{i}}
效果：
注意：
不能使用普通方法this.obj.age = 18来新增对象属性
设置属性的对象不能是Vue实例，或者Vue实例的根数据对象，也就是不能通过此方法增加Vue实例对象得属性和data里的属性
数组数据更新问题
描述：对于data中定义的数组，要去操作改变里面的数据，应该用什么方法？
例子：我要将数组中的第一项arr[0]改为“王五-22”，应该怎么去定义change()里的方法？
用法：Vue封装了数组操作的七种方法push()
pop()
shift()
unshift()
splice()
sort()
reverse()
这七种方法是Vue调用原生的数组操作方法再重新解析模板而封装成的
上述问题的代码：
{{i.name}}-{{i.age}}
效果：
13.v-text和v-html
已经陆陆续续写了很多常用的指令语法，基本都是常用的，还有几个没提及的大家可以上官网学习一下Vue指令
现在最后再来补充一下v-text和v-html的用法
v-text
v-text就是将data里的数据渲染到页面上，和插值语法{{xxx}}的作用类似
例子：
效果：
注意：如果用v-text渲染数据，那么写在标签中间的文字将会被覆盖掉，所以如果只想要部分渲染，还是得用插值语法
v-html
v-html也是渲染数据，不过会将html标签解析
例子：
效果：
可以看到，
标签被解析了
注意：在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。
14.Vue的生命周期函数（TODO）
关于Vue的生命周期函数后面我重新写一篇文章
那么到此为止，Vue的基础语法都写完了
标签里的内容，会触发两次弹框事件，我只想弹一次，那么就在子节点里面的@click后面加.stop，代码如下:
点击此处弹窗
点击此处弹窗
注意：.prevent和.stop可以连用
一次事件
顾名思义，让事件只触发一次
用法：在事件后面加.once就可以做到
用法和上面一样，在@click后面加.once，那么第一次点击会触发弹框事件，第二次点击则不触发，代码如下：
点击此处弹框
回车键事件
简介：当我们使用@keyup绑定键盘事件的时候，每一次敲击键盘就会触发一次事件，我们希望敲完完整的内容时才触发键盘事件，则需要使用.enter修饰符
例子：
请输入:
效果：
可以看到，输入‘你好’两个字，还没有确认，就已经触发了10次键盘事件
修改代码如下:
请输入:
效果如下：
可以看到，当我把整个‘你好’敲完，并按回车后，才触发一次键盘事件
7.Vue中的计算属性
定义：通过已有的属性计算新的属性，使用Vue实例中的computed属性
例子：如果我知道一个人的姓，和这个人的名，那么我能不能计算出他的姓名，答案很简单，就是姓+名，那么怎么在Vue中实现呢？
姓：
名：
姓名:
从代码中我们看到，我在Vue实例的data属性里，定义了一个firstName和一个lastName，并且在
这个computed属性，就是我们的计算属性了，可以看到，我定义的fullName属性里，有两个函数，一个叫get()，一个叫set()，在get()函数中，我实现了姓名的计算方法，把firstName+'-'+lastNamereturn出去，显示在第三个输入框上，如下图所示。
而set()函数里定义的方法，是更改第三个输入框中的值去改变firstName和lastName的属性值，现在这个场景我们用不着，所以可以将set()方法省略，省略了set()方法之后，fullName就可以简写了，简写为
computed: {
fullName(){
return this.firstName+'-'+this.lastName
}
}
注意：当我们使用computed里面属性的时候，不用加‘()’，因为这个属性里存储的只是一个返回值
同样的效果我们可以在methods里定义方法去实现，但为什么还要用计算属性呢？因为计算属性的优势
有缓存机制，可以复用
效率高，调试方便
8.监视属性
原理：被监视的属性发生改变时，调用回调函数，执行相关操作，使用watch属性
例子：制定计划的时候，我希望晴天出去打篮球，不是晴天就敲代码，这个时候我们就需要有一个属性来监视天气，代码如下
今日计划:{{plan}}
可以看到在Vue实例中定义了一个watch属性，用来监视isSunny属性，当isSunny发生改变的时候，执行handler()里面定义的方法
注意：watch里监视的属性一定要在data中定义
immediate: true是开启初始化调用
deep: true是开启深度监视
如果不需要开启初始化调用和深度监视，则可以简写：
watch: {
isSunny() {
this.plan = this.isSunny?'打篮球':'敲代码'
}
}
计算属性和监视属性的异同
监视属性是命令式的且重复的
通过计算属性实现更加简洁明了
两者都能实现的，优先选择计算属性
监视属性能实现异步调用，计算属性不行
9.class样式和style样式的动态绑定
Vue中class样式的绑定
字符串写法
使用场景：样式的类型不确定
写法：
原理：通过v-bind:class动态绑定class的值，可以切换不同class选择器从而切换样式
注意：动态绑定的class的值必须是data中定义的，不能直接写class选择器的名字
例子：
点击此处更换背景颜色
可以看到，class的值与data中定义的属性值bg动态绑定，bg的值就是class选择器的名字，通过change()函数动态改变bg的值从而改变class的值，最终显示不同的样式
对象写法
使用场景：样式个数、类名确定，通过Boolean动态展示与否
用法：
原理：还是通过v-bind:class动态绑定data里的数据，这次直接在data里定义一个对象obj，将各种样式定义在里面
例子：
Hello World!!!
obj里面定义了各种样式，通过true和false来确定这些样式是否显示
数组写法
使用场景：需要绑定的样式个数不确定，类名也不确定
用法：用法：
原理：还是通过v-bind:class动态绑定data里的数据，这次直接在data里定义一个数组arr，将各种样式定义在里面
例子：
Hello World!!!
样式都定义在数组arr里面，可以自定义方法增删arr里面的值从而动态改变样式
Vue中style样式的动态绑定
用法和class样式的动态绑定一样，都是通过v-bind:来绑定
用法：
例子:
Hello World!!!
可以看到在
效果：可以打开Vue的开发者工具，看到style样式全部显示在data里面，可以动态地去调整
10.Vue中的条件渲染
v-if用法
用法：
直接看例子：
打篮球
敲代码
约会
睡觉
随机数:{{num}}
其实学过js或者后端语言的都能看出来，这就是if-else，我定义一个方法生成随机数，随机到哪个数，那么那个
标签显示，其他的不显示
效果展示：
用法很简单，有一点要注意的是
v-show用法
我们先来看另外一个指令
例子：
打篮球
敲代码
约会
随机数:{{num}}
我们发现使用
站内有一篇文章解释的很清楚：点击此处查看
总的来说v-if和
一般来说，
如果需要非常频繁地切换，就使用
11.Vue中的列表渲染
v-for的用法
定义：使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名
遍历字符串
遍历数组
第二个参数：索引
遍历数组时可以添加第二个参数，表示数组的索引
遍历对象
只有一个参数的话默认是对象的value值
第二个参数：key值，第三个参数：索引
12.Vue中数据的更新问题
对象更新问题
描述：在data中定义一个对象obj，现在需要通过外部方法动态地为obj添加一个属性，应该怎么操作？
方法：Vue.set(vm.object, propertyName, value);或this.$set(vm.object, propertyName, value);
例子：
{{i}}
效果：
注意：
不能使用普通方法this.obj.age = 18来新增对象属性
设置属性的对象不能是Vue实例，或者Vue实例的根数据对象，也就是不能通过此方法增加Vue实例对象得属性和data里的属性
数组数据更新问题
描述：对于data中定义的数组，要去操作改变里面的数据，应该用什么方法？
例子：我要将数组中的第一项arr[0]改为“王五-22”，应该怎么去定义change()里的方法？
用法：Vue封装了数组操作的七种方法push()
pop()
shift()
unshift()
splice()
sort()
reverse()
这七种方法是Vue调用原生的数组操作方法再重新解析模板而封装成的
上述问题的代码：
{{i.name}}-{{i.age}}
效果：
13.v-text和v-html
已经陆陆续续写了很多常用的指令语法，基本都是常用的，还有几个没提及的大家可以上官网学习一下Vue指令
现在最后再来补充一下v-text和v-html的用法
v-text
v-text就是将data里的数据渲染到页面上，和插值语法{{xxx}}的作用类似
例子：
效果：
注意：如果用v-text渲染数据，那么写在标签中间的文字将会被覆盖掉，所以如果只想要部分渲染，还是得用插值语法
v-html
v-html也是渲染数据，不过会将html标签解析
例子：
效果：
可以看到，
标签被解析了注意：在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。
14.Vue的生命周期函数（TODO）
关于Vue的生命周期函数后面我重新写一篇文章
那么到此为止，Vue的基础语法都写完了