vue中的指令——自定义指令

自定义指令

之前我们已经了解过了内置指令，这些内置指令可以满足我们学大部分的需求，但是在某些特殊情况下我们要对DOM进行操作，这个时候我们就需要用到自定义智力了。

自定义指令的注册

自定义指令只有在注册之后才能使用，两种注册方式：

 //1.全局注册，这种定义方式可以在全局进行使用
 //第一次参数是指令ID，第二个参数是一个定义对象或函数对象
 Vue.directive(id, [definition])

 //2.局部注册，只能在该实例绑定的视图中使用
 //id表示指令ID
 new Vue({
     el: "#app",
     directive: {
         id: {

         }
    }
})

钩子函数

自定义指令的功能是在定义对象中实现的，而定义对象是由钩子函数组成的，Vue提供了几个钩子函数

1. bind：只调用一次，指令第一次绑定到元素时调用。指令如果需要一些一次性的初始化设置，可以放到这个钩子函数中。
2. inserted：inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
3. update：被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新
4. componentUpdated：被绑定元素所在模板完成一次更新周期时调用
5. unbind：只调用一次， 指令与元素解绑时调用。

通过下列实例了解一下bind钩子函数：

<div id="app">
  <p>页面载入时，input 元素自动获取焦点：</p>
  <input v-focus>
</div>
 
<script>
// 创建根实例
new Vue({
  el: '#app',
  directives: {
    // 注册一个局部的自定义指令 v-focus
    focus: {
      // 指令的定义
      inserted: function (el) {
          el.value = "这是一个自定义指令"
      }
    }
  }
})
</script>

效果图如下：

在使用钩子函数的时候，我们设置了一个形参el，指令中的钩子函数可以带有一些参数，其中el就是其中之一，其他参数如下：

1. el：表的指令所用绑定的元素
2. binding：表示一个对象，包含：name——指令名，value——指令绑定的值，oldValue——指令绑定的前一个值（仅在update和componentUpdated钩子函数中使用），expression——字符串形式的指令表达式，arg——传给指令的参数，modifiers——一个包含修饰符的对象
3. vonde：表示Vue编译生成的虚拟节点
4. oldValue：表示上一个虚拟节点（仅在update和componentUpdated钩子函数中使用）

    <div id="app1">
        <div v-demo.too="1+1"></div>
    </div>
    <script>
            new Vue({
            el: '#app1',
            directives: {
                demo: {
                    // 指令的定义
                    inserted: function(el, binding, vnode) {

                        el.innerHTML = 'binding-name：' + binding.name + '</br>' +
                            //只有在绑定值是表达式时，才会显示表达式的结果,其他情况显示undefined
                            'binding-value：' + binding.value + '</br>' +
                            //当指令有绑定值的时候显示，只显示参数本身，不进行任何计算，在没有绑定值的时候显示undefined
                            'binding-expression：' + binding.expression + '</br>' +
                            //当指令有参数的时候，显示参数，反之为undefined
                            'binding-arg：' + binding.arg + '</br>' +
                            //当指令有修饰符的时候，为修饰符对象，如果没有修饰符使用则报错
                            'binding-modifiers：' + JSON.stringify(binding.modifiers) + '</br>';
                    }
                }
            }
        })
    </script>

上述实例具体讲解了binding参数中的部分属性，其中提到的参数我们在下面内容会进行讲解，在钩子函数中除了 el参数可以修改，其他参数为只读参数

指令参数

在指令名称之后以冒号表示，则表示为指令参数。传入的参数根据具体的情况进行更新，可以使得自定义指令可以在更好的应用

    <div id="app1">
        <div v-demo:falg="1+1"></div>
    </div>
    <script>
        new Vue({
            el: "#app1",
            directives: {
                demo: {
                    // 指令的定义
                    inserted: function(el, binding, vnode) {

                        if (binding.arg == "falg") {
                            el.innerHTML = "这是一个正确的";
                        } else {
                            el.innerHTML = "这是一个未知的";
                        }

                    }
                }
            }
        })
    </script>