第七章：vue2中创建自定义指令

一、指令的认识

之前介绍过

vue

中内置指令,当内置指令不能满足我们的需求的时候就要自己创建指令

二、指令的方式与使用

1、创建局部指令

var app = new Vue({
el: '#app',
data: {

},
// 创建指令(可以多个)
directives: {
// 指令名称
mydir1: {
inserted(el) {
// 指令中第一个参数是当前使用指令的DOM
console.log(el);
console.log(arguments);
// 对DOM进行操作
el.style.width = '100px';
el.style.height = '100px';
el.style.background = '#f00';
}
}
}
})

2、全局指令

Vue.directive('mydir2', {
inserted(el) {
console.log(el);
}
})

3、指令的使用

<div id="app">
<div v-mydir1></div>
<div v-mydir2></div>
</div>

三、指令中常见的钩子函数

钩子函数	描素
bind	只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作
inserted	被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）
update	被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新
componentUpdated	被绑定元素所在模板完成一次更新周期时调用
unbind	只调用一次，指令与元素解绑时使用

四、关于自定义指令参数的说明

1、第一个参数表示当前的

DOM

节点

2、第二个参数是一个对象

五、带属性值的指令

1、创建指令

var mydir2 = Vue.directive('mydir2', {
inserted(el, binding) {
// 带属性值的指令,值是在第二个参数中
el.innerHTML = binding.value;
}
});

2、使用指令

<div v-mydir2="'hello word'"></div>

3、指令中传递一个对象

Vue.directive('mydir3', {
inserted(el, binding) {
const {
width,
height,
background
} = binding.value;
el.style.width = width;
el.style.height = height;
el.style.background = background;
}
})

<div v-mydir3="{width:'100px',height:'100px',background:'#f00'}"></div>

4、指令中传递数据

<div v-mydir4="[1,2,3]"></div>