除了使用默认的vue核心指令，如v-model, v-bind等，我们还可以自定义指令，封装常用的功能。
如：实现input框自动获得焦点，且与之双向绑定的数据显示颜色为红色
自定义指令.gif
代码解析：
全局自定义指令
// 自定义全局指令
Vue.directive('focus', {
inserted: function (el) {
el.focus();
}
});
html中调用自定义指令focus
<input type="text" class="form-control" v-model="msg" v-focus>
自定义私有指令
let vm = new Vue({
el: "#app",
data: {
msg: '',
},
directives: { // 自定义私有指令
color: function (el, binding) {
el.style.color = binding.value
}
}
})
调用私有指令color
<h3 v-color="'red'">{{ msg }}</h3>
自定义指令
网友评论