Vue2.0学习-4-可复用性&组合--2--自定义指令

最新推荐文章于 2022-05-17 11:05:33 发布

原创最新推荐文章于 2022-05-17 11:05:33 发布 · 283 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

框架—Vue 专栏收录该内容

20 篇文章

订阅专栏

本文深入解析Vue.js中的自定义指令，包括全局和局部注册，详细阐述了各生命周期钩子函数的作用，如bind、inserted、update、componentUpdated和unbind，并介绍了钩子函数的参数el、binding、vnode和oldVnode。同时，展示了动态指令参数的使用方法及对象字面量传递多个值的示例。通过实例，帮助开发者更好地理解和应用Vue自定义指令。

1、简介

自定义指令的注册（“制作”）：

注册一个全局自定义指令

Vue.directive('focus',{...});

注册一个局部自定义指令

//使用directives选项定义局部的自定义指令
directives:{
    focus:{
        //...
    }
}

（有点类似于注册组件的全局注册方式以及局部注册方式）

2、钩子函数

bind：只调用一次，指令在第一次绑定到元素时调用，在这里可以进行一次性的初始化设置
inserted：被绑定元素插入到父节点时调用（仅保证父节点存在，但不一定已被插入文档中）
update：所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前。
componentUpdated：指令所在组件的VNode及其子VNode全部更新之后调用。
unbind：只调用一次，指令与元素解绑时调用。

3、钩子函数参数：el、binding、vnode、oldVnode

钩子函数会被传入以下参数：

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

<!--假如有这么一个自定义的指令 v-demo-->
<div id="hook-example" v-demo:foo.a.b = "message"></div>

Vue.directive('demo',{
    bind:function(el,binding,vnode){}
});

new Vue({
    el:'#hook-example',
    data:{
        message:'hello!'
    }
});

binding：一个对象，包含以下property：

name："demo"
value："hello!"
oldValue：只能在update和componentUpdate钩子函数中使用
expression："message"
arg："foo"
modifiers：{"a":true,"b":true}

vnode
oldVnode

除了 el 之外，其他参数都应该是只读的，切勿进行修改。

# 动态指令参数

指令的参数可以是动态的。如：v-mydirective:[argument]="value" 。

<div id='dynamicexample'>
    <h3>Scroll down inside this section</h3>
    <p v-pin:[direction]="200">I am pinned onto the page at 200px to the left</p>
</div>

Vue.directive('pin',{
    bind:function(el,binding,vnode){
        el.style.position = 'fixed';
        var s = (binding.arg == 'left'?'left':'top');
        el.style[s] = binding.value + 'px';
    }
});

new Vue({
    el:'#dynamicexample',
    data:function(){
        return{
            direction:'left'
        }
    }
});

4、函数简写

在很多时候，你可能只想在 bind 和 update 时触发相同行为，而不关心其他的钩子。比如这样写：

Vue.directive('color-swatch',function(el,binding){
    el.style.backgroundColor = binding.value;
});

5、对象字面量

如果指令需要多个值，可以传入一个JavaScript对象字面量。记住，指令函数能够接受所有合法的JavaScript表达式。

<div v-demo="{color:'white',text:'hello!'}"></div>

Vue.directive('demo',function(el,binding){
    console.log(binding.value.color);    //white
    console.log(binding.value.text);    //hello!
});