vue.js的学习（自定义指令）

前言

在vue中很多时候现有的指令都是不够我们用的，那么vue中是允许我们自定义指令的，那么我们就可以通过自定义指令来实现我们想要的功能。通过 directive 来定义。

一个简单的例子

<body>
    <div id="app">
        <input type="text"  v-focus='1+1'>

    </div>

    <script src="./../../js/vue.js"></script>
    <script>
        Vue.directive('focus',{
            inserted:function(el,binding){
                el.focus();
                console.log(binding.name);
                console.log(binding.value);
                console.log(binding.expression);                
            }
        });
    var vm = new Vue({
        el:'#app',
        data() {
            return {
                
            }
        },
        methods: {
            
        },
    })

    </script>
</body>

可以看出这样就通过定义了一个全局指令来使一个文本框自动获得了焦点。

定义全局指令

上面的例子就是定义的一个全局指令

###定义局部指令

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

像这样就可以定义一个局部指令，局部指令是通过一个对象来定义。，并且名称后面带有s。

钩子函数

在上面的例子中以下代码就是用的inserted这个钩子函数

1	inserted:function(el,binding){

钩子函数的类别：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
这是在dom树还没有渲染到页面中之前，还在内存中的时候会调用，那么对于大部分js中的行为来说肯定是不会生效的，但对于比如像设置样式这种一直存在的东西来说，渲染到页面之后也还会有效

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
当dom元素被插入到页面时触发，对于js中的行为也能触发

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

钩子函数的参数

el：指令所绑定的元素，可以用来直接操作 DOM 。

binding：一个对象，包含以下属性：
-name：指令名，不包括 v- 前缀。
-value：指令的绑定值，例如：v-my-directive=”1 + 1” 中，绑定值为 2。
-oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
-expression：字符串形式的指令表达式。例如 v-my-directive=”1 + 1” 中，表达式为 “1 + 1”。
-arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
-modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

在上面的例子中就演示了这些参数：

Vue.directive('focus',{
    inserted:function(el,binding){
        el.focus();
        console.log(binding.name); //focus
        console.log(binding.value);//2
        console.log(binding.expression);//1+1                
    }
});