vue中常用的指令和修饰符

常用指令

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

v-if：是动态的向DOM树中添加或者删除元素；

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

v-show：是通过标签的CSS样式display的值是不是none，控制显示隐藏

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

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

v-on：用来绑定一个事件或者方法，简写方式是@click=""

v-bind： v-bind用来动态的绑定一个或者多个属性。没有参数时，可以绑定到一个包含键值的对象。常用于动态绑定class和style。以及href等。简写的方式是“:属性名=""”一个冒号

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

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

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

主要分为四步：

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

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

第三步： Watcher订阅者是Observer和Compile之间通信的桥梁。

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

修饰符：

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

• .stop :阻止事件冒泡：由内而外，通俗的将就是阻止事件将向上级DOM元素传递

• .capture :事件捕获：由外而内，在捕获阶段，事件从window开始，之后是document对象，一直到触发事件的元素。

• .self :当事件作用在元素本身时才会触发

• .once :只触发一次

• .prevent: 阻止默认事件

• ·passive:告诉浏览器你不想阻止事件的默认行为

• ·trim:自动过滤用户输入的首尾空格

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