vue 自定义指令

vue 官网的自定义指令https://cn.vuejs.org/v2/guide/custom-directive.html
全局的自定义指令

Vue.directive('focus', {
    inserted: function () {
        el.focus()
    }
})

在dom 中使用v-focus 使用这个自定义指令

<div v-focus></div>

局部的自定义指令

directives: {
    focus: {
        inserted: function (el) {
            el.focus()
        }
    }
}

inserted函数： 被绑定元素呗插入父节点是调用(仅保证父节点存在，但不一定已被插入文档中)
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

实例： 使用自定义指令跳转页面

directives: {
    gopage: {
        bind: (el, binding, vnode) => {
            // el 获取对应的作用元素的dom
            // vnode vue编译生成的虚拟节点 vnode.context 就是Vue对象也就是我们使用的this
            el.onclick = () => {
                vode.context.$router.path({
                    name: 'page'
                })
                // 跳转到对应的页面
            }
        }
    }
}

在项目中最好是将该指令单独写在一个文件中，在使用的地方直接引用。