一、简介
当开发需求做一个自动获取焦点事件的时候,我们最原生的做法就是通过获取元素来注册事件,
document.getElementById("search").focus();
然而在vue中并不提倡我们直接操作DOM元素。那我们该怎么办呢?这时候就需要我们自定义指令来实现这个功能了。
二、如何自定义指令
指令分为二种,一种是全局自定义指令,另一种为局部(私有)自定义指令。全局自定义指令页面任何地方都可以使用,而局部自定义指令就只能在Vue实例当前控制的区域使用。
1.自定义全局指令
使用 Vue.directive() 定义全局的v-focus
指令
- 参数1:指令的名称。注意,在定义的时候,指令的名称前面,不需要加 v- 前缀。但是, 在调用的时候,必须 在指令名称前 加上 v- 前缀来进行调用
- 参数2:是一个对象,这个对象身上,有一些指令相关的函数(钩子函数),这些函数可以在特定的阶段,执行相关的操作。
一般常用的钩子函数有三个
bind:每当指令绑定到元素上的时候,会立即执行这个 bind 函数,只执行一次。
inserted:被绑定元素插入父节点(DOM)时调用 (仅保证父节点存在,但不一定已被插入文档中)。
update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
Vue.directive("focus", {
bind: function(el) {
// el.focus() //没有效果的。
},
inserted: function(el) {
el.focus();
},
updated: function(el) {
}
});
注意!!!:
- 在每个钩子函数中,第一个参数永远是 el ,表示 被绑定了指令的那个元素,这个 el 参数,是一个原生的JS对象。
- 我们在最开始在bind钩子函数中调用了.focus()是并没有效果的。是因为在元素刚绑定了指令的时候,还没有 插入到 DOM中去,这时候,调用 focus 方法并没有作用。因为,一个元素,只有插入DOM之后才能获取焦点。
- .focus()为一个行为。和JS行为有关的操作,最好在 inserted 中去执行,反之JS行为不生效。
2.自定义局部指令
如果想注册局部指令,组件中也接受一个 directives 的选项:
var vm = new Vue({
el: "#app",
data: {
},
methods:{
},
// 指令的定义
directives: {
focus: {
inserted: function (el) {
el.focus()
}
}
}
});
自定义指令的使用方式:
<input type="text" class="form-control" v-focus />
三、以传参的方式进行指令设置
当我们需要设置一个字体颜色的指令,这时候我们就可以传参的方式进行设置了。这时候就需要用到钩子函数中的第二个参数binding
。这个参数为一个对象,其中包含了以下三个常用属性(其它就不列举了)
- name:指令名,不包括 v- 前缀。
- value:指令的绑定值,例如:v-my-directive=“1 + 1” 中,绑定值为 2。
- expression:字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中,表达式为 “1 + 1”
html:
<input type="text" v-color="'red'">
js:
Vue.directive("color", {
bind: function(el, binding) {
el.style.color = binding.value;
}
});
注意!!!:
- 样式只要通过指令绑定给了元素,不管这个元素有没有被插入到页面中去,这个元素肯定有了一个内联的样式。 将来元素肯定会显示到页面中,这时候,浏览器的渲染引擎必然会解析样式,应用给这个元素。所以可以在
bind
钩子函数中直接生效,而不像前面.focus()
行为只有在inserted
钩子函数才生效。 - 和样式相关的操作,一般都可以在
bind
钩子函数中执行。
四、函数简写
很多时候,你可能想在 bind 和 update 时触发相同行为,而不关心其它的钩子。可以进行函数的简写:
directives: {
fontweight: {
//设置字体粗细
bind: function(el, binding) {
el.style.fontWeight = binding.value;
}
},
//↑上面为没有简写的写法
//↓下面为函数简写的写法
fontsize: function(el, binding) {
//函数简写 这个 function 等同于 把 代码同时写到了 bind 和 update钩子函数 中去
el.style.fontSize = parseInt(binding.value) + "px";
}
}
参考链接:https://cn.vuejs.org/v2/guide/custom-directive.html
如果您也正在学习前端的路上,记得关注该博主,学习更多关于前端的知识~