Vue.js 学习笔记 十一 自定义指令

之前看到过v-bind,v-on等指令，Vue还可以自定义指<div id="divApp"        <div v-focus></div>

        <input type="text" v-focus v-color="'blue'" />
    </div>

    <script>

        Vue.directive('focus', {
            //当指令绑定到元素上时，会执行bind，并且只执行一次
            //el参数，是指绑定这个指令的元素，并且是一个原生JS的对象,可以直接调用原生的JS方法
            bind: function (el) {
                //在bind函数里想令元素获取焦点是不可行的，因为此时元素还没有插入DOM，不会报错，但是也无效
                //el.focus();
                //但是像这样的操作就没问题啦
                el.innerHTML = "DIV上来就有内容!";
            },
            //元素插入到DOM时，执行inserted函数
            //所以这里调用focus时，才会令元素获取焦点
            inserted: function (el) {
                el.focus();
                el.value = "文本框初始化";
            }
        })
        //使用参数
        Vue.directive('color', {
            bind: function (el, binding) {
                el.style.color = binding.value;
            }
        })
        
        var v = new Vue({
            el: '#divApp',
            data: {
            },
            methods: {
            },
　　　　　　　directives: {//私有自定义指令
　　　　　　　　color: {
　　　　　　　　　　bind: function (el, binding) {
　　　　　　　　　　　　　　　　el.style.color = 'red';
　　　　　　　　　　　　　　}
　　　　　　　　}

}

            
        })

    </script>

1. 使用参数时，需要注意写法是 v-color="'blue'" ，而不是v-color="blue"，因为如果里面没有单引号，Vue会当作自己的属性或者方法等，在实例中查找，而不是当做传递的参数。 

2. Vue.directive定义的是公共的自定义指令，任何元素都可以调用，而在Vue实例中定义的自定义指令，是私有的，只有在指定的元素才能调用，写法和公共的基本一样，另外当私有和公共的指令同名时，按就近原则，先找私有，没有再找公共，定义私有时

3. 钩子函数的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 }。

4. 当只需要bind钩子函数时，可以简写成

 color: function (el, binding) {
                        el.style.color = 'red';
                }

　　全局指令也可以简写。

 

上一篇：

Vue.js 学习笔记 十 自定义按键事件

下一篇

Vue.js 学习笔记 十二 Vue发起Ajax请求

转载于:https://www.cnblogs.com/luyShare/p/11550382.html