【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重新赋值