Vue3学习第二篇
01. 事件处理
在vue当中的事件处理和html、css中的不一样，它单独做了处理。
注意：用法中只是用点击事件来举例，工作中还有很多事件类型。
（1）内联事件处理器
（2）方法事件处理器
注意：
this.count读取到data里面的数据
只有单独表达式的应用场景很少，所以工作中更多的是使用方法事件处理器。
注意：
v-on: -> @
02. 事件传参
在JS事件当中，是会有一个event对象的。vue也是
（1）获取event对象
实操：
同样，它也有target，与原生的JS对象一样
(e)表示获取event对象
将按钮内的内容修改：
（2）传递参数
(msg)表示传递参数进入函数
（3）在传递参数过程中获取event
03. 事件修饰符
事件修饰符 --> 简化代码
意思是，我们没必要通过event去调用阻止默认事件发生/阻止事件冒泡等方法来实现功能，而是用更好的处理方式。这样可以让方法更能专注于数据逻辑而不用去处理DOM事件的细节。
04. 数组变化侦测
（1）变更方法
数组发生变化，UI会得到相应的响应（自动更新）
实操：
当点击添加数据这个按钮之后，界面自动更新添加结果
（2）替换一个数组
05. 计算属性
如果下图中这种式子过多，不易于观察代码。
所以官方推荐我们使用计算属性
方法也能实现同样功能，那么区别在哪里呢？
即在代码块没有发生改变的情况下，用计算属性只需要计算一次，而调用方法则每一次都要计算。
06. class绑定
在css中，class用来绑定写样式，自然，vue也是写HTML页面，样式同样必不可少，所以，如图中所言，数据绑定的一个常见需求场景是操作元素的CSS class列表，即通过逻辑来操作class。
拼接字符串：后续class可能后面要加字符串，myClass里可能多个单词，这个跟普通的属性绑定是不太一样，操作性可能麻烦一点。
07. style绑定
除了class绑定，还有style绑定，因为还有很多开发者直接在元素中添加style属性（也就是内联样式）。
推荐使用class绑定，因为style绑定权重太高。
08. 侦听器
侦听器：监听页面的数据变化。 也就是说，页面的数据一旦发生变化，侦听器就可以监听到，从而做出你想做的业务逻辑操作。（当然，只能监听具有响应式的数据）
什么是具有响应式的数据？
就是我们在data中所声明的数据，通过双花括号的模板语法绑定的数据是可以监听的。
实操：
点击修改数据后：
注意：函数名必须与监听的数据对象保持一致
09. 表单输入绑定
简而言之：
意思就是，假如是你在输入框中输入数据同时你要得到这个数据，即在你输入的同时你就要得到这个数据，如果用js来实现的话很麻烦，而在vue当中只需要一个指令就可以完成。
单选框：
输入或删除的同时，能看到数据的变化
复选框：
(注意label，如果checked被设为true，则勾选框框并显示true）
lazy：只有点回车的时候，才会浮现数据
（因为实时输入实时获取，比较浪费资源）
number：只接受数字
trim：去掉前后空格
10. 模板引用
拿到底层DOM元素所用。
实操：ref拿到底层DOM元素
假如是要改变里面的内容，使用innerHTML重新赋值
