Vue指令总结

1. 熟悉的指令

   名称	作用
   v-bind :	单向绑定解析表达式,可简写为:xxx
   v-model :	双向数据绑定
   v-for :	遍历数组/对象/字符串
   v-on:	绑定事件监听,可简写为@
   v-if:	条件渲染（动态控制节点是否存存在)
   v-else:	条件渲染(动态控制节点是否存存在)
   v-show :	条件渲染(动态控制节点是否展示)

2. 新学指令

   名称	作用
   v-text	把所有的字符串都当成正常的文本去解析，替换所在的结点的内容，而插值语法不会
   v-html	支持HTML结构的解析；与插值语法的区别：v-html会替换掉结点中所有的内容，插值语法不会。 严重注意：！！！v-html有安全性问题 （1）在网站上动态渲染任意的HTML是非常危险的行为，容易导致XSS攻击。 （2)一定要在可信的内容上使用v-html，永远不要在用户提交的内容上使用！！！
   v-cloak	v-clock指令（没有值）： 1.本质就是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-clock属性。 2.使用css的属性选择器：[v-cloak]{display:none}配合v-clock可以解决网速慢时，Vue还没接管容器时的{{XXX}}问题。
   v-once	v-once在结点初次动态渲染自后，就视为静态内容了，有数据的改变不会引起v-once所在结点的更新，用于优化性能；
   v-pre	作用是跳过所在结点的编译。因此，可以利用他跳过没有使用指令语法、没有使用插值语法的结点，会加快编译；

3. 自定义指令

   1. 定义语法

      （1）局部指令

       new Vue({
              directives:{指令名：配置对象}
      })
      //或者
      new Vue({
              directives:{指令名：回调函数}
      })
      1
      2
      3
      4
      5
      6
      7

      （2）全局指令

       Vue.directive('指令名'，配置对象);
       //或者
        Vue.directive('指令名'，回调函数);
      1
      2
      3

   2. 配置对象中常见的3个回调函数

      (1) bind:指令与元素成功绑定时调用。

      (2) inserted:指令所在元素被插入页面时调用。

      (3) update:指令所在模板结构被重新解析时调用。

fbind: {
                // 指令与元素成功绑定时调用
                bind(element, binding) {
                    element.value = binding.value;
                },
                // 指令所在的结点被插入页面时
                inserted(element, binding) {
                    element.focus();
                },
                // 指令所在的模板被重新解析时
                update(element, binding) {
                    element.value = binding.value;
                }
            }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3. 注意点

1.指令定义时不加v-，但使用时要加v-;

2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。