<div id="app">
//v-color 是自定义的
<input type="text" class="form-control" v-color="'blue'"/>
</div>
<script>
//自定义一个设置字体颜色的指令
Vue.directive('color', {
//样式,只要通过指令绑定给了元素,不管这个元素有没有被插入到页面中去,这个元素就有了一个内联样式
//将来,元素肯定会显示到页面中去,这时候浏览器的渲染引擎必然会解析样式,应用给这个元素
bind: function(el, binding){
//和样式相关的操作,一般都可以在bind中执行
//el.style.color='red'
//console.log(binding.name)
//console.log(binding.value) //值 blue
//console.log(bingding.expression) //表达式 'blue'
el.style.color = binding.value
},
inserted:function(el){
//和JS行为有关的操作,最好在inserted中去执行,防止js行为不生效
}
})
</script>
//全局定义
export default{
name: '',
data: { },
methods: { },
directives: {
'color': {
bind: function(el, binding){
el.style.color = binding.value
},
inserted: function(el){ }
},
'fontSize': {
bind: function(el, binding){
el.style.fontSize = binding.value
}
}
}
}
官网自定义指令钩子函数参数使用:https://cn.vuejs.org/v2/guide/custom-directive.html