有的情况下，需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>el与data的两种写法</title>
<style></style>
</head>
<body>
<div id="app">
<h1>
当前的n值是：
<span v-text="n"></span>
</h1>
<h1>
当前的n值是：
<span v-big="n"></span>
</h1>
<button @click="n++">点我n+1</button>
<hr />
<input type="text" v-fbind:value="n" />
//通过element.innerText = binding.value * 10改变变n的绑定值，n可以是一个函数，默认参数为binding.value，这样就可以在该函数直接处理数据如下：divResize当成n
<div v-resize="divResize" class="header-wrapper"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
data: {
n: 1,
},
methods: {
divResize(data){
//data就是binding.value({height: style.height}) 的返回值
console.log("resizeData:",data)
},
}
//这种写法写起来简单，但是不可以处理细节
directives: {
resize: {
// 绑定时调用
bind(el, binding){
let height = ""
function isResize(){
// 可根据需求，调整内部代码，利用binding.value返回即可
const style = document.defaultView.getComputedStyle(el)
if(height !== style.height){
// 此处关键代码，通过此处代码将数据进行返回，从而做到自适应
binding.value({height: style.height})
}
height = style.height
}
// 设置调用函数的延时，间隔过短会消耗过多资源
el.__vueSetInterval__ = setInterval(isResize, 100)
},
unbind(el){
clearInterval(el.__vueSetInterval__)
}
}
// big函数合适被调用 1、指令与元素成功绑定时(绑定时只是建立关系，页面还没出现)会调用(一上来)，2、指令所在的模板被重新解析时
// 1、函数写法
big(element, binding) {
//第一个参数返回绑定指令的Dom元素，第二个参数为指令的对象
console.log(element)
console.log(binding)
element.innerText = binding.value * 10
console.log(element instanceof HTMLElement)
console.dir(element) //打印对象的详细信息
},
//对象写法，函数的写法跟对象的写法在于函数的写法只执行了bind，update，inserted是不执行的
fbind: {
//指令与元素成功绑定时(绑定时只是建立关系，页面还没出现)会调用(一上来)
bind(element, binding) {
console.log('bind')
element.value = binding.value
},
//指令所在元素被插入页面时调用
inserted(element, binding) {
console.log('inserted')
element.focus()
},
//指令所在元素被重新解析页面时调用
update(element, binding) {
console.log('updated')
element.value = binding.value
element.focus()
},
},
// bind update一般处理的逻辑都是一致的，函数的写法跟对象的写法在于函数的写法只执行了bind，update，inserted是不执行的
/*注意点：
1、指令名的规范:<元素 v-big-num> 指令函数名需要加引号 'big-num'
*/
//下面写法focus无效
// fbind(element, binding) {
// //第一个参数返回绑定指令的Dom元素，第二个参数为指令的对象
// element.value = binding.value
// element.focus();//Dom挂载到页面才能调用，这里的v-fbind只是指令与元素成功绑定时(绑定时只是建立关系，页面还没出现)，所以这里的focus无效
// },
// <button id="btn">点我创建一个input输入框</button>
// var btn = document.getElementById("btn")
// btn.onclick = ()=>{
// const input = document.createdElement("input")
// input.focus()
// 需要等input出来才能focus，因为是操作Dom了，DOM都还没出来，添加样式，添加value等就不受影响
// 但是项像focus，给input的父元素添加css，如 input.parentElement.style.bg = ""这些就需要放到appendChild后面
// console.log(input.parentElement)//null:还没appendChild呢，所以不知道input的父元素是谁，
// document.body.appendChild("input")
// input.focus()
// }
},
})
// 全局指令的函数写法
Vue.directives('big2', function (element, binding) {
console.log(element)
console.log(binding)
element.innerText = binding.value * 10
console.log(element instanceof HTMLElement)
console.dir(element) //打印对象的详细信息
})
//全局指令的对象写法
Vue.directives('fbind2', {
//指令与元素成功绑定时(绑定时只是建立关系，页面还没出现)会调用(一上来)
bind(element, binding) {
console.log('bind')
element.value = binding.value
},
//指令所在元素被插入页面时调用
inserted(element, binding) {
console.log('inserted')
element.focus()
},
//指令所在元素被重新解析页面时调用
update(element, binding) {
console.log('updated')
element.value = binding.value
element.focus()
},
})
app.$mount('#app')
</script>
</body>
</html>
钩子函数
指令定义函数提供了几个钩子函数（可选）：
bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次， 指令与元素解绑时调用。
钩子函数的参数有：
el: 指令所绑定的元素，可以用来直接操作 DOM 。
binding: 一个对象，包含以下属性：
name: 指令名，不包括 v- 前缀。
value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。
oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression: 绑定值的表达式或变量名。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
vnode: Vue 编译生成的虚拟节点。
oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
//九、vue-cli如何新增自定义指令？
//1.创建局部指令
var app = new Vue({
el: '#app',
data: {
},
// 创建指令(可以多个)
directives: {
// 指令名称
dir1: {
inserted(el) {
// 指令中第一个参数是当前使用指令的DOM
console.log(el);
console.log(arguments);
// 对DOM进行操作
el.style.width = '200px';
el.style.height = '200px';
el.style.background = '#000';
}
}
}
})
2.全局指令
Vue.directive('dir2', {
inserted(el) {
console.log(el);
}
})
3.指令的使用
<div id="app">
<div v-dir1></div>
<div v-dir2></div>
</div>