Vue 自定义指令

自定义指令方式一

<body>
<div id="app">
    <p>count: {{count}}, big-count: <span v-my-directive="count">{{count}}</span></p>
    <button @click="count++">点击 +1</button>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            count: 0
        },
        directives: {
            /**
             * 自定义指令简写
             */
            'my-directive-easy'(element,binding) {
                element.innerText = binding.value * 10
            },
            'my-directive':{
                //指令与元素成功绑定时（一上来）
                bind(element,binding){
                    element.innerText = binding.value * 10
                },
                //指令所在元素被插入页面时
                inserted(element,binding){

                },
                //指令所在的模板被重新解析时
                update(element,binding){
                    element.innerText = binding.value * 10
                }
            }
        }
    })
</script>
</body>

自定义指令方式二

Vue.directive("my-directive", {
    /**
     * 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
     *
     * @param el 指令所绑定的元素，可以用来直接操作 DOM
     * @param 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 }。
     * }
     */
    bind(el, binding) {
        console.log("bind");
        console.log(el);
        console.log(binding);
    },

    /**
     * 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前
     */
    update(el, binding) {
        console.log("update");
    },

    /**
     * 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
     */
    inserted(el, binding) {
        console.log("inserted");
    },

    /**
     * 指令所在组件的 VNode 及其子 VNode 全部更新后调用
     */
    componentUpdated(el, binding) {
        console.log("componentUpdated");
    },

    /**
     * 只调用一次，指令与元素解绑时调用
     */
    unbind(el, binding) {
        console.log("unbind");
    },
})
posted @ 2022-03-07 18:03  叕叕666  阅读(39)  评论(0)    收藏  举报