1、参考Vue官网
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
-
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 -
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 -
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
-
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。 -
unbind：只调用一次，指令与元素解绑时调用。
接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)
2、个人见解（关于el.fous()只在inserted()函数中生效，在bind函数中不生效的问题）
-
bind：指令第一次绑定到元素上时调用 -
inserted：表示元素在插入到DOM中的时候，会执行inserted函数，只执行一次 -
update：VNode更新的时候调用，可能会调用多次 -
造成的原因：页面上的任何一个元素想要显示，首先需要浏览器的渲染引擎将元素加载到内存中形成DOM树，也就是说执行bind函数的时候，元素还没有插入到内存中去，因为，一个元素只有插入DOM之后，才会获得焦点。所以说，在bind函数中执行el.focus()焦点事件的时机是不对的；同理可得，凡是与js样式有关的需在bind函数中执行（如：el.style.color = 'blue'），而与js行为有关的，需在inserted函数中执行
3、测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
姓名：<input placeholder="请输入姓名" v-color="'blue'"/><!-- 区别于变量，如果不使用单引号的话，就认为是一个变量，回去data中找这个变量的值 -->
性别：<input type="text" placeholder="请输入性别" v-focus>
</div>
<script>
//全局中的自定义指令
Vue.directive('color',{
bind:function(el,binding) {
console.log(binding.name);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
姓名：<input placeholder="请输入姓名" v-color="'blue'" v-fontweight="900"/><!-- 区别于变量，如果不使用单引号的话，就认为是一个变量，回去data中找这个变量的值 -->
性别：<input type="text" placeholder="请输入性别" v-focus>
</div>
<script>
//全局中的自定义指令
Vue.directive('color',{
bind:function(el,binding) {
console.log(binding.name);
console.log(binding.value);//输出的是blue的值
console.log(binding.expression)//输出的是'blue'的表达式
el.style.color = binding.value;
/* el.focus()方法不会触发 */
el.focus();
}
});
Vue.directive('focus',{
inserted:function(el){
el.focus();
}
})
const vm = new Vue({
el:'#app',
data:{
blue:'red'
},
methods:{
},
directives:{
'fontweight':{
bind:function(el,binding) {
el.style.fontWeight = binding.value
}
}
}
})
</script>
</body>
</html>
4、图片
image.png
网友评论