本文已参与「新人创作礼」活动，一起开启掘金创作之路。
自定义指令
- Vue 内置指令不能满足我们特殊的需求。
- Vue 允许我们自定义指令。此时，是对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。
自定义指令分为全局自定义指令和局部自定义指令。
Vue.directive 注册全局指令
使用自定义的指令，只需在对用的元素中，加上
v-的前缀形成类似于内部指令v-if，v-text的形式。
- 注意点：
- 1、 在自定义指令中，如果以驼峰命名的方式定义。如
Vue.directive('focusA',function(){}) - 2、 在HTML中使用的时候，只能通过 v-focus-a 来使用。
<input type="text" v-focus>
<script>
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。 其中 el为dom元素
inserted: function (el) {
// 聚焦元素
el.focus();
}
});
new Vue({
el:'#app'
});
</script>
Vue.directive 注册全局指令、带参数
自定义指令——带参数。 bind - 只调用一次，在指令第一次绑定到元素上时候调用。
bind 声明周期，只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 el 为当前自定义指令的 DOM 元素。
binding 为自定义的函数形参，通过自定义属性传递过来的值存在 binding.value 里面。
<input type="text" v-color='msg'>
<script type="text/javascript">
Vue.directive('color', {
bind: function(el, binding){
// 根据指令的参数设置背景色
// console.log(binding.value.color)
el.style.backgroundColor = binding.value.color;
}
});
var vm = new Vue({
el: '#app',
data: {
msg: {
color: 'blue'
}
}
});
</script>
自定义指令——局部指令
- 局部指令，需要定义在 directives 的选项用法和全局用法一样。
- 局部指令只能在当前组件里面使用。
- 当全局指令和局部指令同名时，以局部指令为准。
<input type="text" v-color='msg'>
<input type="text" v-focus>
<script type="text/javascript">
/*
自定义指令-局部指令
*/
var vm = new Vue({
el: '#app',
data: {
msg: {
color: 'red'
}
},
//局部指令，需要定义在 directives 的选项
directives: {
color: {
bind: function(el, binding){
el.style.backgroundColor = binding.value.color;
}
},
focus: {
inserted: function(el) {
el.focus();
}
}
}
});
</script>
