一、指令的注册

自定义指令的注册分为全局注册和局部注册。

语法：Vue.directive(id,definition)。id是指令的唯一表示，definition定义对象则是指令相关属性及钩子函数

全局指令注册

//    注册一个全局自定义指令v-focus
Vue.directive('focus',{
    //    定义对象
})

局部指令注册

var vm=new Vue({
    el:#app,
    directives:{
        focus；{
            //    定义对象
        }
    }
})

二、指令实例属性

el:指令所绑定的元素，可以直接操作DOM
binding：一个对象，包含以下属性
1、name：指令名，不包括v-前缀： demo
2、value：指令的绑定值：如本例的值为：hello
3、expression：字符串指令形式表达值 message
4、modifiers：一个指令的修饰符对象：{a:true,b:yrue}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app" v-demo:msg.a.b="message">

</div>

<script>
    //  定义全局指令
    Vue.directive('demo',{
        //  el:指令所绑定的元素，可以直接操作DOM
        //  binding：一个对象，包含以下属性
            /*      1、name：指令名，不包括v-前缀 ：    demo
                    2、value：指令的绑定值：如本例的值为：hello
                    3、expression：字符串指令形式表达值  message
                    4、modifiers：一个指令的修饰符对象：{a:true,b:yrue}
            */
        bind:function (el,binding, vnode){
        var s=JSON.stringify
        el.innerHTML=
            'name：'+s(binding.name)+'<br>'+
            'value:'+s(binding.value)+'<br>'+
            'expression:'+s(binding.expression)+'<br>'+
            'argument:'+s(binding.arg)+'<br>'+
            'modifiers:'+s(binding.modifiers)+'<br>'+
            'vnode keys:'+Object.keys(vnode).join(',')
    }
    })



    var vm=new Vue({
        el:'#app',
        data:{
            message:'hello'
        }
    })
</script>
</body>
</html>

运行结果

0 条评论