自定义指令
Vue.directive("指令名称",{
//inserted:function(el)
inserted(el){
//el就是使用自定义指令的标签元素
//js操作。。。
}
})
指令名称不需要添加v-前缀,但是在使用指令的时候需要添加v-前缀
inserted 被绑定元素插入父节点时就会调用该函数
bind 指定绑定到对应的元素后就会调用该函数
示例代码:
<div id="app">
<input type="text" v-focus>
</div>
<script>
Vue.directive("focus",{
inserted(el){
//el 就是使用该指令的标签元素
el.focus();
}
})
new Vue({
el:"#app"
})
</script>
示例代码2:
<div id="app">
<h1 v-color="'red'">{{ msg }}</h1>
<h1 v-color="'green'">{{ msg }}</h1>
</div>
<script>
Vue.directive("color",{
bind:function(el,binding){.
//el 是使用自定义指令的元素
//binding 是自定义指令绑定的相关数据信息
el.style.color = binding.value;
}
})
new Vue({
el:"#app",
data:{
msg:'hello 自定义指令'
}
})
</script>