vue中的自定义指令通过Vue.directive来实现,主要完成内置指令不能完成的一些事情

1、示例代码
<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Vue入门之自定义指令</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body><div id="app">
    <div v-test="color">
        {{num}}    </div></div><button onclick="unbindApp()">解绑</button><script type="text/javascript">// 解绑function unbindApp() {
    app.$destroy();}// 自定义指令Vue.directive("test",{
    //1-被绑定
    bind:function (el, binding, vnode) {
        console.log("1-bind 被绑定");
        console.log("el:",el);
        console.log("binding:",binding);
        console.log("vnode:",vnode);
        el.style.color = binding.value;
    },
    //2-被插入
    inserted:function (el, binding, vnode) {
        console.log("2-inserted 被插入");
    },
    //3-更新
    update:function (el, binding, vnode) {
        console.log("3-update 更新");
    },
    //4-更新完成
    componentUpdated:function (el, binding, vnode) {
        console.log("4-componentUpdated 更新完成");
    },
    //5-解绑
    unbind:function (el, binding, vnode) {
        console.log("5-unbind 解绑");
    }});var app = new Vue({
    el:'#app',
    data:{
        num: 123,
        color:'red'
    }})</script></body></html>
2、调试步骤

(1)chrome打开控制器查看
(2)控制台输入“app.num=’通过控制台设置的新name’”
(3)点击解绑按钮

3、参数说明
  • el:指令所绑定的元素,可以用来直接操作DOM

  • binding: 一个对象,包含指令的很多信息

  • vnode::Vue编译生成的虚拟节点

4、生命周期

自定义指令有五个生命周期(也叫钩子函数),分别是bind、inserted、update、componentUpdated、unbind,说明如下:

  1. bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化动作

  2. inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document中)

  3. update:被绑定于元素所在的模板更新时调用,而无论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新

  4. componentUpdated:被绑定元素所在模板完成一次更新周期时调用

  5. unbind:只调用一次,指令与元素解绑时调用