Vue学习系列 -- 自定义指令

本文链接： https://blog.csdn.net/ydm19891101/article/details/90679378

前面的章节我们先后学习了v-on、v-bind、v-model、v-link等内置指令，今天我们就来学习一下如何创建自定义指令。

自定义指令也是先注册后使用，其注册和组件的注册很类似，也分为全局注册和局部注册。只是注册组件时是使用的component关键字，而注册指令时要使用directive关键字。

全局注册

Vue.directive('focus', {
        //指令内容
    }
);

局部注册

 new Vue({
   el : "#app1", //指定绑定的DOM元素
   directives :{
       //指令内容
   }
 })

OK，说过了指令的大致内容，具体指令的内容是什么样呢？

其实，自定义指令的选项是由几个钩子函数组成的，每个都是可选的。

bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时只执行一次的初始化操作；
insterted：被绑定的元素在插入父节点时调用
update：被绑定元素所在的模板更新时调用，而不论绑定值是否变化。
unbind：只调用一次，指令与元素解绑时调用；

上面的内容可能太理论，下面我们还是采用一个小的demo来学习一下。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Learning Vue.js</title>
</head>

<body>
<div id="app1">
 <input type="text" name="username" v-focus:args.a.b="message" v-bindd></input>
</div>
</body>

<!--这里是以CDN引入的方式加载的vue.js-->
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    new Vue({
    el : "#app1", //指定绑定的DOM元素
    directives :{
        bindd : {
            bind : function () {
                alert('this is bind function');
            },
        },
        focus: {
            inserted:  function (el,binding,node) {
                console.log(binding);
                el.focus();
            }
        }
    },
    data : {
        message : "foucs value"
    }
 })

</script>
</html>

上面的代码演示了在输入框bind和inserted的时候触发绑定的事件：页面会先弹出一个框，之后input框获得焦点；

上面的demo比较简单，其实每个钩子函数都有几个参数可用，比如我们上面用到的el。其他参数以及含义如下

el：指令所绑定的元素，可以用来直接操作DOM
binding：具体的对象
vnode：编译生成的虚拟节点

binding对象又有一下属性：

name：去除v-的指令名称
value：指令绑定的值，如v-focus="name"，则value的值为name
args：传递给指令的参数，如v-focus:timeout，则args的值为timeout

通过上面的console.log日志打印出的binding对象信息如下：

Vue学习系列 -- 自定义指令

全局注册

局部注册

猜你喜欢