Vue.js - 自定义指令 - 《Vue》

简介
基本用法
钩子函数
钩子函数的参数
完整代码
- 钩子函数
- binding选项

简介

因为 Vue 里面提供的内置指令有时无法满足我们常规开发，所以需要一些自定义的指令来帮助我们完成一些开发

基本用法

和组件类似分全局注册和局部注册，区别就是把 component 换成了 directive

钩子函数

Vue 中，自定义指令给我们提供了几个钩子函数（可选）：

bind

只调用一次，作用：指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作

inserted

被绑定元素插入父节点时调用（父节点存在即可调用，就是出现在内存中就可以调用了，不必存在于 DOM 结构中）

update

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

componentUpdated

被绑定元素所在模板完成一次更新周期时调

unbind

只调用一次，指令与元素解绑时调用。

钩子函数的参数

el

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

binding

一个对象，包含以下属性：

name

指令名，不包括 v 前缀。

value

指令的绑定值，例如： vmydirective=”1 + 1”, value 的值是 2。

oldValue

指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

expression

绑定值的字符串形式。例如 vmydirective=”1 + 1” ， expression 的值是 “1 + 1”。

arg

传给指令的参数。例如 vmydirective:foo， arg 的值是 “foo”。

modifiers

一个包含修饰符的对象。例如： vmydirective.foo.bar, 修饰符对象,,,modifiers 的值是 { foo: true, bar: true }。

vnode

Vue 编译生成的虚拟节点。

oldVnode

上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

完整代码

钩子函数

<!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>

binding选项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
</head>
<body>
<div id="app">
    自动获取焦点：<br>
    这个是含有自定义指令的：<input type="text" v-focus> <br>
    这个是没有自定义指令的：<input type="text"> <br>
    <hr>
    <div v-cuihua:goudan.a.b.c="obq">
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.directive('focus', {
        inserted(el) {
            el.focus()
        }
    })
    Vue.directive('cuihua', {
        bind(el, binding, vnode) {
            let keys = [];
            for (let key in vnode) {
                keys.push(key);
            }
            el.innerHTML =
                'name' + '-------------' + binding.name + '<br>' +
                'value' + '-------------' + binding.value + '<br>' +
                'expression' + '-------------' + binding.expression + '<br>' +
                'argument' + '-------------' + binding.arg + '<br>' +
                'modifiers' + '-------------' + JSON.stringify(binding.modifiers) + '<br>' +
                'vnode中的keys' + '-------------' + keys.join("--") + '<br>'
        }
    })
    let app = new Vue({
        el: '#app',
        data: {
            abcd: "我是 value 值",
            pbq: "我是绑定的值"
        }
    })
</script>
</body>
</html>