一，Vue常用的指令
1、 v-model多用于表单元素实现数据绑定
2、 v-for v-for=’'item in 数组" 循环数组 或 json
3、 v-show显示隐藏
4、 v-hide隐藏内容
5、 v-if显示隐藏 （dom元素的删除添加）
6、 v-else-if必须与v-if连用
7、 v-else必须与和v-if连用 不能单独使用 否则报错
8、 v-bind 动态绑定属性 作用：及时对页面的数据进行修改 可以缩写为 ： src class value 等属性
9、 v-on:click给标签绑定方法，可以缩写为@click 例如绑定一个点击函数 函数必须写在methods里
10、 v-text解析文本
11、 v-html解析html标签
12、 v-once进入页面时只渲染一次不重复渲染
13、 v-cloak防止闪烁
14、 v-pre把标签内部的元素原位输出
二，Vue常用修饰符
1 .stop阻止点击事件冒泡
使用了.stop后，点击子节点不会捕获到父节点的事件
2 .prevent 取消默认事件
防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播），等同于JavaScript中的event.preventDefault()，prevent等同于JavaScript的event.preventDefault()，用于取消默认事件
3 .capture 事件捕获由外到内
与事件冒泡的方向相反，事件捕获由外到内,捕获事件：嵌套两三层父子关系，然后所有都有点击事件，点击子节点，就会触发从外至内 父节点-》子节点的点击事件
4 .self 只会触发自己范围内的事件，不包含子元素
在父级div中写一个子集button 给父级加一个点击事件 @click.self=“add()” ,在button上加一个点击事件 @click=“show()” 但我点击button的时候 根据事件冒泡原理，我的add()事件也会被触发 加上 .self的时候 就是当我点击add()方法时==》show()方法是不会被触发的
5 .once 只执行一次
6 .passive
passive尤其会提高移动端网页的性能
不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。
PS:事件修饰符是可以串联使用的 但是要注意顺序 ! ! ！
键盘修饰符
.enter：回车键
.tab：制表键
.delete：含delete和backspace键
.esc：返回键
.space: 空格键
.up：向上键
.down：向下键
.left：向左键
.right：向右键
系统修饰符
.ctrl
.alt
.shift
.meta
鼠标按钮修饰符
鼠标修饰符用来限制处理程序监听特定的滑鼠按键。常见的有：
.left
.right
.middle
.exact修饰符
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
修饰符
1 .lazy 在改变后才触发
2 .number 将输出的字符串转化为数字类型
3 .trim将自动过滤用户输入的首尾空格
v-on可以监听多个方法吗？
可以，监听的是多个不同的事件
三、vue中key值的作用
用于管理可复用的元素 因为vue会尽可能高效的渲染，通常会复用已有元素而不是从头渲染、需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。
四、Vue组件中的data为什么必须是函数
组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。