vue的内置指令和自定义指令

一、 v-cloak

v-cloak没有值

1、本质是一个特殊属性，vue实例创建完毕并接管容器后，会删掉v-cloak属性

2、使用过CSS配合v-cloak可以解决网速慢时页面展示出{{name}}的问题

二、v-html

1、向指定节点中渲染包含HTML结构的内容

2、与插值语法的区别：

（1）v-html会替换掉节点中所有的内容，{{xx}}不会

（2）v-html 可以识别HTML结构

3、严重注意 v-html 有安全性问题

（1）在网站上动态渲染任意HTML是非常危险的，容易导致xss攻击

（2）一定要在可信的内容上使用v-html 永远不要相信用户提交的内容

三、v-once

1、所在节点在初次动态渲染后，就视为静态内容了

2、以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

四、v-pre

1、跳过其所在节点的编译过程

1. 可利用它跳过：没有使用指令语法、没有插值语法的节点，会加快编译

五、v-text

向其所在节点渲染文本内容（替换掉之前的所有内容

与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会

六、其他的

v-bind:单向绑定解析表达式

v-model:双向数据绑定

v-for:遍历数组、对象、字符串

v-on:绑定事件监听，可简写为@

v-if:条件渲染（动态绑定节点是否存在）

v-else:条件渲染（动态绑定节点是否存在）

v-show:条件渲染（动态绑定节点是否展示）

七、自定义指令

1、定义语法：

（1）局部指令：

new Vue({

directives:{指令名：配置对象}

})或者

new Vue({

directives{指令名:回调函数}

})

（2）全局指令

vue.directives(指令名，配置对象) 或 Vue.directives(指令名，回调函数)

2、配置对象中常用的三个回调

（1）.bind 指令与元素成功绑定时（一上来）

（2）inserted指令所在元素被插入页面时

（3）update指令所在的模板被重新解析时

3、注：

指令定义时不加v-，使用的时候要加v-

指令名如果是多个单词，要使用XX-XX命名方式，不用驼峰命名法