vue中的自定义指令

一、directives属性

在vue实例中使用该属性申明自定义指令，在directives中申明自定义指令有两种方法，一种就是使用函数的形式（更加简单便捷），另一种就是使用对象的形式（能够定义更加精细）；

1、函数形式：

参数：

（1）第一个参数为element：实质上为使用该属性的真实DOM；

（2）第二个参数为binding：是一个对象，包含value属性值等；

何时调用：

（1）指令与元素成功绑定时调用：实质上就是对象形式的bind函数；

（2）令所在模板（例：id为root中）发生重新解析时：实质上就是对象形式的update函数；

示例代码如下：

        
当前的n值为：
        
放大10倍的n值为：
        点我实现n+1

new Vue({
        el:'#root',
        data:{
            n:1
        },
        // 用于放置自定义指令:自定义指令可以写为函数形式，也可以写为对象形式
        directives:{
            // element是使用该属性的真实DOM（span），binding是一个对象（包含value属性值(n=1)等）
            big(element,binding){
                element.innerText = binding.value*10;
            }
        }
})

2、对象形式

（1）bind函数

指令与元素成功绑定时调用

（2）inserted函数

指令所在元素被插入页面时调用，相比较于函数形式新增的功能；

（3）update

指令所在模板被重新解析时调用，均存在两个参数：element、binding；

        
当前的n值为：
        点我实现n+1
        

new Vue({
        el:'#root',
        data:{
            n:1
        },
        // 用于放置自定义指令:自定义指令可以写为函数形式，也可以写为对象形式
        directives:{
            fbind:{
                //指令与元素成功绑定时调用
                bind(element,binding){
                    element.value = binding.value
                },
                // 指令所在元素被插入页面时调用
                inserted(element,binding){
                    element.focus()
                },
                // 指令所在模板被重新解析时调用
                update(element,binding){
                    element.value = binding.value
                }
            }
        }
})

注意：

a、自定义指令在使用时需要加上v-，在定义时不需要加上v-；

b、当存在多个单词组成时：在使用时需要加上-分隔（v-big-number）；在定义时需要加上引号还原他的原来形式（'big-number':function(element,binding){ ... }）//function可以省略

c、使用大写形式时会自动转换为小写，所以应该都使用小写形式防止混淆；

d、定义在directives中的自定义属性的this值都是window；

二、全局自定义指令

定义在directives:{}中的都是局部自定义指令，全局自定义指令的定义方式与过滤器类似，定义在new Vue的前面；

1、对象式：

Vue.directives('big',{ ... }) //第一个参数为对象名，第二个参数为对象内容

2、函数式：

Vue.directives('big',function(element,binding){ ... }) //第一个参数为函数名，第二个参数为函数体