Vue 常用的指令以及作用
- 1.v-model 多用于表单元素实现双向数据绑定（同 angular 中的 ng-model）
- 2.v-for 格式： v-for="字段名 in(of) 数组 json" 循环数组或 json(同 angular 中的 ng-repeat),需要注意从 Vue2 开始取消了$index
- 3.v-show 显示内容 （同 angular 中的 ng-show）
- 4.v-hide 隐藏内容（同 angular 中的 ng-hide）
- 5.v-if 显示与隐藏 （dom 元素的删除添加 同 angular 中的 ng-if 默认值为 false）
- 6.v-else-if 必须和 v-if 连用
- 7.v-else 必须和 v-if 连用 不能单独使用 否则报错 模板编译错误
- 8.v-bind 动态绑定 作用： 及时对页面的数据进行更改
- 9.v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在 methods里面
- 10.v-text 解析文本
- 11.v-html 解析 html 标签
- 12.v-bind:class 三种绑定方法 1、对象型 '{red:isred}' 2、三元型 'isred?"red":"blue"'3、数组型 '[{red:"isred"},{blue:"isblue"}]'
- 13.v-once 进入页面时 只渲染一次 不在进行渲染
- 14.v-cloak 防止闪烁
- 15.v-pre 把标签内部的元素原位输出
自定义指令(v-check、v-focus)的方法,以及它的钩子函数
全局定义指令：在 Vue 对象的 directive 方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives
钩子函数：bind(绑定事件触发)、inserted(节点插入的时候触发)、update(组件内相关更新)
v-show 和 v-if 指令的共同点和不同点
相同点
v-show 和 v-if 都能控制元素的显示和隐藏
不同点
实现本质方法不同
v-show 本质就是通过设置 css 中的 display 设置为 none，控制隐藏
v-if 是动态的向 DOM 树内添加或者删除 DOM 元素
编译的区别
v-show 其实就是在控制 css
v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
编译的条件
v-show 都会编译，初始值为 false，只是将 display 设为 none，但它也编译了
v-if 初始值为 false，就不会编译了
性能比较
v-show 只编译一次，后面其实就是控制 css，而 v-if 不停的销毁和创建，故 v-show 性能更好一点
注意点：因为 v-show 实际是操作 display:" "或者 none，当 css 本身有 display：none 时，v-show 无法让显示
总结（适用场景）
如果要频繁切换某节点时，使用 v-show（无论 true 或者 false初始都会进行渲染，此后通过 css 来控制显示隐藏，因此切换开销比较小，初始开销较大），如果不需要频繁切换某节点时，使用 v-if（因为懒加载，初始为 false时，不会渲染，但是因为它是通过添加和删除 dom 元素来控制显示和隐藏的，因此初始渲染开销较小，切换开销比较大）
