Vue_自定义指令

目录

• 如何注册指令
  • 如何注册一个全局自定义指令
  • 如何注册一个局部指令
• 钩子函数
  • bind
  • inserted
  • update
  • componentUpdated
  • unbind
• 钩子函数的参数
  • el
  • binding
  • vnode
  • oldVnode
• 动态指令参数
• 自定义钩子样例

如何注册指令

如何注册一个全局自定义指令

//注册一个全局自定义指令 `v-foucs`
Vue.directive("focus",{
    //当被绑定的元素插入到DOM中时：
    inserted:function(el){
    //聚焦元素
    el.focus()
    }
})

如何注册一个局部指令

directives:{
    focus:{
        //指令的定义
        inserted:function(el){
            el.focus()
        }
    }
}

以上的指令均可使用v-focus进行调用：

<input v-focus>

钩子函数

bind

只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted

被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update

所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated

指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind

只调用一次，指令与元素解绑时调用。

钩子函数的参数

el

指令所绑定的元素，可以用来直接操作 DOM。

binding

一个对象，包含以下属性：

• name

指令名，不包括 v- 前缀。

• value

指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。

• oldValue

指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

• expression

字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。

• arg

传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。

• modifiers

一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

vnode

Vue 编译生成的虚拟节点。

oldVnode

上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

动态指令参数

指令的参数可以是动态的。例如，在 v-mydirective:[argument]="value" 中，argument 参数可以根据组件实例数据进行更新！这使得自定义指令可以在应用中被灵活使用。

自定义钩子样例

<input type="text" v-color="'red'" v-fontWeight="'90'" v-fontsize="'60'">
<script>
    var vm=new Vue({
        el:"#app",
        data:{},
        methods:{},
        filters:{},
        directives:{
            'color':{
                bind:function(el,binding){
                    el.style.color=binding.value;
                    console.log(binding.value);//red
                    console.log(binding.expression);//'red'
                }
            },
            'fontweight':{
                bind:function(el,binding){
                    el.style.fontWeight=binding.value;
                }
            },
            'fintsize':{
                bind:function(el,binding){
                    el.style.fontSize=parseInt(binding.value)+'px';
                }
            }
        }
    });
</script>