Vue笔记 02

目录

一、MVVM模型

二、数据代理

三、事件处理 

四、事件修饰符

 五、键盘事件

---

一、MVVM模型

一种架构模型，将数据与DOM结构通过Vue实例进行连接.

数据通过Vue实例对象放到页面上.

页面需要更改，映射回数据，通过Vue实例对象去更改.

双花括号中不仅可以传data中有的键名(因为data中的键值对最终出现在vm身上)、表达式，还可以传vm和原型上有的东西.

---

二、数据代理

Vue底层数据劫持、数据代理、计算属性等都用到该方法.

Object.defineproperty()方法，给对象添加属性.

该方法添加三个参数，分别为给哪个对象添加属性、添加的属性叫什么、配置项.

这种形式添加的键值对，不参与遍历(不可枚举)

除了直接添加的方式，在配置性中将enumerable设置为true，也可以使添加的属性变为可以枚举.

 这种写法无法修改value中的值，也可以在配置项中设置.

还可以控制键值对是否可以被删除

配置项中还可以传更高级的函数 

 

 

 简单的数据代理，可以通过操作obj2来操作obj中x的value值.

 ​​​​​​

通过vm来读取name的时候，getter就将data.name中的name给过去.

通过vm来修改name的时候，setter就将data.name中的name改掉. 

vm._data与传入的data是一个. 

这种写法可以巧妙解决options.data定义在属性，而不定义在全局，在控制台undefined的问题.

 

一旦数据发生改变，页面中用到该数据的地方也会自动更新. 

如果Vue没有做数据代理:

 Vue中的数据代理，就是把data中的数据放到vm中一份.

---

三、事件处理 

在Vue中给元素绑定事件，需要用到指令(v-开头)

只有写到Vue实例中，模板才能获取到.需要配置项methods来装定义的方法.

所有被Vue管理的函数，最好都写成普通形式.使用箭头函数时，this指向就不是vm，是Window.

v-on:click可以简写为@click

绑定事件，不传参数时，默认输出event. 

 可以在绑定事件中传参数.

绑定事件方法后，可以不加小括号(不传参数时)，也可以加小括号.

传参后，若仍想获得event，参数中添加$event.

方法在vm中，但没有做数据代理，原因是方法写完就等着调用，不再更改.

也可以把方法写到data中，不影响输出，但是会让Vue工作变得繁重，因为写在data中，方法会被错误的作数据代理，但是方法本身不需要数据代理，方法不需要更改，只需要调用.

---

四、事件修饰符

 都是阻止a标签默认跳转行为.

 都是阻止事件冒泡.

点击div2的时候，先经过捕获阶段，随后才是事件冒泡，默认事件冒泡的情况下，才是处理事件.

捕获阶段是从外往内的，冒泡阶段是从内往外的.

这样可以在事件捕获阶段就处理事件.

虽然div上的click事件也被执行，但是是因为冒泡所执行的冒泡行为的两次e.target都是按钮.

所以当给div中的click事件添加.self的时候，某种意义上，可以阻止冒泡行为.

滚动事件scroll和wheel区别:

scroll:滚动条滚动事件(滚动条移动就会触发),但是滚动条到头之后，不会继续触发.

wheel:鼠标滚轮事件(只有滚动鼠标的时候，事件才会触发)，并且滚动条到头的时候，仍可以继续触发.

若不添加.passive时，滚动鼠标滚轮，触发demo函数调用，调用完成后，再将滚动条移动.

修饰符是可以连写的. 

---

 五、键盘事件

 表示点击回车按键后，触发showInfo事件.

keydown与keyup的区别:

keydown，指按下按键还没抬起来就触发事件.

keyup，需要按下按键抬起来才触发事件.

tab键本身就有移走焦点的功能，所以它不适合keyup事件，使用它时，应使用keydown事件.

可以自定义按键名称(不推荐)

键盘事件绑定时，也可以进行连写，表示按下ctrl+y的时候触发.