Vue - 自定义指令

1、Vue.directive(id,definition)注册一个全局自定义指令，接收两个参数，指令ID以及定义对象

 

2、钩子函数：将作用域与DOM进行链接，链接函数用来创建可以操作DOM的指令

bind - 只调用一次，在指令第一次绑定到元素上时候调用
update - 在bind之后立即以初始值为参数第一次调用，之后绑定值变化的时候，参数为新值与旧值
unbind - 只调用一次，在指令从元素上解绑的时候调用

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Vue.directive('my-directive',{
    bind : function(){
        //准备工作
        //例如，添加事件处理器或只需要运行一次的高耗任务
    },

    update : function(){
        //值更新时的工作
        //也会以初始值为参数调用一次
    },

    unbind : function(){
        //清理工作
        //例如，删除bind()添加的事件监听器
    }
})

//调用
<div v-my-directive="someValue"></div>

//只需要update函数，可以传一个函数替代定义对象
Vue.directive('my-directive',function(value){})

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<!-- 如果指令需要多个值，可以传入一个js对象 -->
<!-- 指令可以使用合法的js表达式 -->
<body id="example">
    <div id="demo" v-demo="{color : 'white',text : 'hello!'}"></div>
</body>
<script>
    Vue.directive('demo',function(value){
        console.info(value.color); //white
        console.info(value.text) // hello!
    })
    var demo = new Vue({
        el : '#demo'
    })
</script>

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

当指令使用字面修饰符，值将按普通字符串处理并传递给update方法，update方法只调用一次，因为普通字符串不能影响数据变化

<body id="example">
    <div id="demo" v-demo.literal="foo bar baz"></div>
</body>
<script>
    Vue.directive('demo',function(value){
        console.info(value); //foo bar baz
    })
    var demo = new Vue({
        el : '#demo'
    })
</script>

 

3、以属性的形式使用自定义属性

<body id="demo">
    <my-directive class="hello" name="hi"></my-directive>
</body>
<script type="text/javascript">
    Vue.elementDirective('my-directive',{
        //api同普通指令一致
        bind : function(){
            console.info(this.el.className);
            console.info(this.el.getAttribute('name'))
        }
    })

    var demo = new Vue({
        el : '#demo'
    })
</script>

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<body id="demo">
    <my-directive class="hello" name="hi" a="params"></my-directive>
</body>
<script type="text/javascript">
    Vue.elementDirective('my-directive',{
        params : ['a'],

        //api同普通指令一致
        bind : function(){
            console.info(this.el.className);
            console.info(this.el.getAttribute('name'))
        }
    })

    var demo = new Vue({
        el : '#demo'
    })
</script>

<!-- 或者需要自动更新的时候，需要一个回调 -->
<body id="demo">
    <my-directive class="hello" name="hi" v-bind:a="someValue"></my-directive>
    <input type="text" v-model="someValue">
</body>
<script type="text/javascript">
    Vue.elementDirective('my-directive',{
        params : ['a'],

        paramWatchers : {
            a : function(val,oldValue){
                console.info('a changes');
            }
        }
    })

    var demo = new Vue({
        el : '#demo',
        data : {
            someValue : 'value'
        }
    })
</script>

 

4、自定义属性用在对象上，对象内部属性变化的时候触发update，在指令定义对象中指定deep:true

<body id="demo">
    <div v-my-directive="a"></div>
    <button @click="change">change</button>{{a,b,c}}
</body>
<script>
    Vue.directive('my-directive',function(){
        deep : true,

        update : function(obj){
            //当obj的嵌套属性变化时候调用
            console.info(obj.b.c);
        }
    })
    var demoVM = new Vue({
        el : '#demo',

        data : {
            a : {b : {c : 2}}
        },

        method : {
            change : function(){
                demoVM.a.b.c = 4;
            }
        }
    })
</script>

 

5、acceptStatement让自定义指令接受内联语句

<body id="demo">
    <div v-my-directive="a++"></div>
    {{a}}
</body>
<script>
    Vue.directive('my-directive',function(){
        acceptStatement : true,

        update : function(fn){
            //当obj的嵌套属性变化时候调用
            console.info(fn.toString())
            fu();
        }
    })
    var demoVM = new Vue({
        el : '#demo',

        data : {
            a : 5
        }
    })
</script>

 

6、v-on绑定多个事件时，要是是不同的事件类型，例如点击，focus，change，会按照业务需求进行选择，要是绑定了2个甚至多个click事件，那么v-on只会绑定第一个click事件