Vue自定义指令

发布时间：2023-04-21 文章分类：WEB开发, 电脑百科 投稿人：王小丽 字号： 默认 | 大 | 超大 打印

目录

1、注册全局自定义指令

2、注册局部自定义指令

3、指令定义对象的钩子函数

4、自定义指令的绑定值 

1、绑定数值常量

2、绑定字符串常量

3、绑定对象字面量

1、注册全局自定义指令

通过Vue.directive(id,definition)方法可以注册一个全局自定义指令，该方法可以接收两个参数：指令ID和定义对象。指令ID是指令的唯一标识，定义对象是定义的指令的钩子函数 

<div id="element">
    <input v-ikun>
 </div>
 <script src="http://60.205.187.0/vue/vue.js"></script>
 <script type="text/javascript">
    //当被绑定元素插入父节点时，使元素自动获得焦点
    Vue.directive('ikun',{
        //当被绑定的元素插入DOM中时执行
        inserted:function(el){
            //使元素自动获得焦点
            el.focus();
        }
    })
     var demo = new Vue({
         el: '#element'
     })
 </script>

2、注册局部自定义指令

 通过Vue实例中的directive选项可以注册一个局部自定义指令。例如，注册一个局部自定义指令，通过该指令实现为元素添加边框的功能：

<div id="element">
    <span v-add-border="border">
        我是ikun
    </span>
 </div>
 <script src="http://60.205.187.0/vue/vue.js"></script>
 <script type="text/javascript">
     var demo = new Vue({
         el: '#element',
         data:{
            border:'1px solid green'
         },
         directives:{
            addBorder:{
                inserted:function(el,binding){
                    el.style.border=binding.value;
                }
            }
         }
     })
 </script>

上述代码中，在注册自定义指令时采用了小驼峰的命名方式，将自定义指令ID定义为addBorder，而在元素中应用指令时的写法为v-add-border。在为自定义指令命名时建议采用这种方式。

3、指令定义对象的钩子函数

 在注册指令的时候，可以传入definition定义对象，对指令赋予一些特殊的功能，一个指令定义对象可以提供的钩子函数如下表：

        钩子函数：

钩子函数 说明
bind 只能调用一次，在指令第一次绑定到元素上时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化设置
inserted 被绑定元素插入父元素时调用
update 指令在bind之后立即以初始值为参数进行第一次调用，之后每次当绑定值发生变化之后时调用，接收的参数为新值和旧值
componentUpdated 指令所在组件及其子组件更新时调用
unbind 只调用一次，指令从元素上解绑时调用

        binding参数对象包含的属性：

属性 说明
name 指令名，不包括v-前缀
value 指令的绑定值，例如：v-my-directive="1+1",value的值是2
oldValue 指令绑定的前一个值，仅在update和componentUpdated钩子函数中可用，无论值是否改变都可用
expression 绑定值的表达式或变量名，例如：v-my-directive="1+1",expression的值是"1+1"
arg 传给指令的参数，例如：v-my-directive:foo，arg的值是“foo”
modifiers 一个包含修饰符的的对象，例如：v-my-directive:foo.bar,修饰符对象modifiers的值是{foo:true,bar:true}

        binding参数使用实例：

<div id="element">
    <div v-demo:hello.a.b="message"></div>
 </div>
 <script src="http://60.205.187.0/vue/vue.js"></script>
 <script type="text/javascript">
    //vnode，Vue编译生成的虚拟节点，oldVnode，Vue编译生成的上一个虚拟节点，仅在update和componentUpdated钩子函数中可用
    Vue.directive('demo',{
        bind:function(el,binding,vnode){
            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: '+Object.keys(vnode).join(',')
        }
    })
     var demo = new Vue({
         el: '#element',
         data:{
            message:'我真的是ikun'
         }
     })
 </script>

Vue自定义指令

 有时候，可能只需要使用bind和update钩子函数，这时可以直接传入一个函数代替定义对象：

 Vue.directive('XXX',function(el,binding){
    el.style.XXX=binding.value
 })

4、自定义指令的绑定值 

 自定义指令的绑定值除了可以是data中的属性之外，还可以是任意合法的JavaScript表达式，例如数值常量、字符串常量、对象字面量等。

1、绑定数值常量

<div id="element">
    <p v-ikun="38">真正的ikun永远都不会违背初心</p>
 </div>
 <script src="http://60.205.187.0/vue/vue.js"></script>
 <script type="text/javascript">
    Vue.directive('ikun',{
        bind:function(el,binding){
            el.style.position='fixed';
            el.style.left=binding.value+'px';
        }
    })
     var demo = new Vue({
         el: '#element'
     })
 </script>

 Vue自定义指令

2、绑定字符串常量

<div id="element">
    <p v-ikun=" 'red' ">真正的ikun永远都不会违背初心</p>
 </div>
 <script src="http://60.205.187.0/vue/vue.js"></script>
 <script type="text/javascript">
    Vue.directive('ikun',{
        bind:function(el,binding){
            el.style.color=binding.value;
        }
    })
     var demo = new Vue({
         el: '#element'
     })
 </script>

 Vue自定义指令

3、绑定对象字面量

<div id="element">
    <p v-ikun=" {size:38 , color:'green'} ">小黑子露出鸡脚了吧！</p>
 </div>
 <script src="http://60.205.187.0/vue/vue.js"></script>
 <script type="text/javascript">
    Vue.directive('ikun',{
        bind:function(el,binding){
            el.style.fontSize=binding.value.size+'px';
            el.style.color=binding.value.color;
        }
    })
     var demo = new Vue({
         el: '#element'
     })
 </script>

Vue自定义指令

标签 , ,