常用的指令。修饰符

常用指令

在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令，指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值，框架会进行相关DOM操作的绑定
vue中的指令有很多，我们平时做项目常用的有：

v-if：通过创建或删除DOM节点来实现元素的显示隐藏

v-else是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用

v-show：通过css中的display属性来控制显示隐藏

区别：
1、当条件为真的时候 没有区别 当条件为假的时候 v-if通过创建或删除DOM节点来实现元素的显示隐藏，v-show通过css中的display属性来控制
2、v-if更适合数据的筛选和初始渲染 v-show更适合元素的切换

v-for： v-for是根据遍历数组来进行渲染 要注意的是当v-for和v-if同处于一个节点时，v-for的优先级比v-if更高。这意味着v-if将运行在每个v-for循环中

v-on：用来绑定一个事件或者方法

v-bind： 用来绑定属性，可以动态的绑定class，style样式

v-model 只能作用于在表单元素上可以实现数据双向绑定 ，

数据双向绑定实现的原理：

vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。
主要分为三部分

第一步： 需要observer对数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

第二步： compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步： Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步： MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新双向绑定效果。

修饰符：

在Vue中，事件修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理。

语法：@事件名.修饰符=“方法名”

在Vue中事件修饰符主要有：

• .stop 阻止事件冒泡
• 当事件发生在DOM元素上时，该事件并不完全发生在那个元素上，这个事件有可能发生在它的父代，祖父母，直到到达window为止。
• .capture -事件捕获
• 在捕获阶段，事件从window开始，之后是document对象，一直到触发事件的元素。
• .self 只是监听触发改元素的事件
• .once - 只触发一次
• .prevent - 阻止默认事件
• · passive告诉浏览器你不想阻止事件的默认行为
• · trim自动过滤用户输入的首尾空格
• · number自动将用户的输入值转化为数值类型
• .lazy 只有在输入框发生一个失去焦点时才触发