自定义指令
自定义指令：可以封装一些dom操作，扩展额外功能。
全局注册-语法：
Vue.directive('指令名',{
"inserted"(el){ inserted指指令所绑定的元素被添加到页面时自动调用
//可以对el标签扩展额外功能
el.focus()
}
})
局部注册-语法：
directives:{
"指令名":{
inserted(){
el.focus()
}
}
}
使用时v-指令名 。
全局注册示例：
局部注册示例：
自定义指令的值
语法：在绑定指令时，可以通过"等号"的形式为指令绑定的具体数值。
<div v-color="color">我是内容</div>
通过binding.value可以拿到指令值 ，指令值修改会触发update函数
directives:{
color:{
inserted(el,binding){
el.style.color = binding.value
},
update(el,binding){
el.style.color = binding.value
}
}
}
<template>
<div>
<h1 v-color="color1">自定义指令</h1>
<h1 v-color="color2">自定义指令</h1>
</div>
</template>
<script>
export default{
directives:{
color:{
inserted(el,binding){
el.style.color = binding.value
},
update(el,binding){
el.style.color = binding.value
}
}
},
data(){
return{
color1:'red',
color2:'blue'
}
}
}
</script>