总结Vue中的常用指令和自定义指令

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情

指令

v-test指令：

1. 作用：向其所在的节点中渲染文本内容
2. 与插值语法的区别：v-test会替换掉节点中的内容，{{xx}}不会，而是会默认做拼接

v-html指令：

1. 作用：向指定节点中渲染包括html结构的内容
2. 与插值语法的区别：
   • v-html会替换掉节点中所有的内容，{{xx}}不会
   • v-html可以识别html内容
3. 注意
   • 在网站上主动渲染任意HTML是非常危险的，容易导致XSS攻击
   • 一定要在可信的内容上使用v-html，不要用在用户提交信息的内容上！

v-clock指令

1. 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-clock属性
2. 使用css配合v-clock可以解决因网速慢的页面展示渲染不及时的问题

v-once指令

1. v-once所在节点在初次动态渲染后，就视为静态内容
2. 亿欧数据的改变不会引起v-once所在结构的更新，可以用于优化性能

v-pre指令

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

自定义指令总结

一、定义语法：

1. 局部指令：

   new Vue ({
   	directives:{指令名：配置对象}
   })
   或
   new Vue ({
   	directives:{指令名：回调函数}
   })
   

2. 全局指令：

   Vue.directive:{指令名,配置对象} 或
   Vue.directive:{指令名,回调函数}
   

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

1. .bind :指令与元素成功绑定时调用
2. .inserted ：指令所在元素被插入页面时调用
3. .update : 指令所在模板结构被重新解析时调用

三、备注：

1. 指令定义时不加v-，但使用时要加v-
2. 指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名