vue局部指令的定义与使用
在某个组件中,部分核心代码片段
<p v-color="'red'">123</p>
export default{
directives:{
color:function(el,binding){
el.style.color=binding.value
}
}
}
vue全局指令的定义与使用
在main.js中的代码片段:
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
directives:{
color:function(el,binding){
el.style.color=binding.value
},
custom:function(el,binding){
......
}
}
})
在指令的不同生命周期进行不同的操作
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
directives:{
color:{
bind(el,binding){
el.style.color=binding.value
},
inserted(el,binding){
}
},
}
})
demo
vue组件代码片段:
<input type="text" v-focus />
export default{
directives:{
focus:{
inserted(el,binding){
el.focus();
}
}
}
}