一、用法:注册或获取全局指令
Vue.directive(id,[definition])
二、钩子函数:
一个指令定义对象可以提供如下几个钩子函数(均为可选):
bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted:被绑定元素插入父节点时调用(仅保证父节点存在,但不一定已被插入文档中)。
update:所在组件的vNode更新时调用,但是可能发生在其子vNode更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind:只调用一次,指令与元素解绑时调用。
// 注册
Vue.directive('my-directive',{
bind: function () {},
inserted: function () {},
update: function () {},
componentUpdated: function () {},
unbind: function() {}
})
<template>
<div class="content">
<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
</div>
</template>
<script>
export default {
name: 'Content',
data(){
return{
message: 'hello!'
}
},
directives: {
demo:{
bind: function (el, binding, vnode) {
var s = JSON.stringify
el.innerHTML =
'name: ' + s(binding.name) + '
' +
'value: ' + s(binding.value) + '
' +
'expression: ' + s(binding.expression) + '
' +
'argument: ' + s(binding.arg) + '
' +
'modifiers: ' + s(binding.modifiers) + '
' +
'vnode keys: ' + Object.keys(vnode).join(', ')
}
}
}
}
</script>
全局指令
在main.js总注册:
Vue.directive('focus',{
// 当绑定元素插入到 DOM 中
inserted: function(el) {
el.focus();
}
})
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app')
页面引入:
<template>
<div class="content">
<input type="text" v-focus/>
</div>
</template>
2.局部指令
<template>
<div class="content">
<input type="text" v-focus/>
</div>
</template>
<script>
export default {
name: 'Content',
directives: {
focus: {
// 指令的定义
inserted: function(el) {
el.focus();
}
}
}
}
</script>
1、vue.directive的作用
vue.directive是我们除了内置的指令(如v-model和v-show)之外的自定义指令。自定义指令是对普通DOM元素进行的底层操作,它是一种有效的的补充和扩展,不仅可以用于定义任何的dom操作,并且是可以复用的,
2、vue.directive的使用场景
例如在图片加载完成前,用随机的背景色占位,图片加载完成后直接渲染出来,用自定义指令可以方便的实现该问题。还有高亮类的操作,可以将其封装为自定义指令。
3、使用vue.directive的3个demo
<template>
<div>
<div id="app"><input v-focus /></div>
<hr>
<p style="width:200px;height:200px" v-pin='colors'>trying</p>
<hr>
<div id="app" v-demo:foo.a.b="message"></div>
</div>
</template>
<script>
import Vue from "vue";
// 1、输入框聚焦
Vue.directive("focus", {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus();
},
});
// 2、绑定背景颜色
Vue.directive('pin', function(el, binding) { //背景颜色
el.style.background = binding.value
})
// 3、文字显示
Vue.directive('demo', {
bind: function (el, binding, vnode) {
var s = JSON.stringify
el.innerHTML =
'name: ' + s(binding.name) + '
' +
'value: ' + s(binding.value) + '
' +
'expression: ' + s(binding.expression) + '
' +
'argument: ' + s(binding.arg) + '
' +
'modifiers: ' + s(binding.modifiers) + '
' +
'vnode keys: ' + Object.keys(vnode).join(', ')
}
})
export default {
name: "directive",
data() {
return {
colors:"",//定义变量接收
message:'left',
}
},
created(){
this.colors="pink"
}
}
</script>
3.2、使用vue.directive的图片加载
<template>
<div>
<div v-img="url" style="width: 500px; height: 500px;"></div>
</div>
</template>
<script>
import Vue from "vue"; //需要引入
Vue.directive("img", {
bind:function(el){
var color = Math.floor(Math.random() * 1000000);
el.style.backgroundColor = "#" + color;
},
inserted: function (el, binding) {
var img = new Image();
img.src = binding.value;
img.onload = function () {
el.style.backgroundImage = "url(" + binding.value + ")";
};
},
});
export default {
name: "directive",
data() {
return {
url: "../../../1.jpg",//据具体图片存储文件夹而定
};
},
};
</script>
4、vue.directive的官方概念
1、vue.directive 有两个参数:id(string)和definition
2、vue.directive有5种钩子函数,分别是:bind, inserted ,update, componentUpdated, unbind
2.1、bind:只调用一次,指令第一次绑定到元素时调用,在这里可以进行一次性的初始化设置
2.2、inserted:被绑定元素插入父节点时调用(仅保证父节点存在,但不一定被插入文档中)
2.3、update:所在组件的vnode更新时调用,但是可能发生在其子vnode更新之前,指令的值可能发生了变化,也可能没有
2.4、componentUpdate:指令所在组件的vnode及其子vnode全部更新后调用
2.5、unbind:只调用一次,指令与元素解绑时调用
3、钩子函数参数
el,binding(name,value,oldValue,expression,arg,modifiers), vnode,oldvnode
4、动态指令参数
指令的参数可以是动态的,例如,v-myDirective:[argument]="value"中,argument参数可以根据组件实例数据进行更新
5、对象字面量
指令需要多个值,可以传入一个js对象字面量,指令函数接受所有合法的js表达式
5、vue.directive使用体验
5.1、增长了不同的知识点,
5.2、update组件更新前的状态。componentUpdated组件更新后的状态
5.3、bind时父节点为null,bind是在dom书绘制前调用
5.4、inserted时父节点存在,在dom树绘制后调用