vue的directive注册自定义指令笔记

• 局部注册（指的是单个vue组件内注册）

<template>
	<input type="number v-focus></input>
</template>

<script>
export default {
	data() {},
	directives: {
		focus: {
			inserted(el) {
				el.focus();
			}
		}
	}
}
</script>

• 全局注册
  方式一：

1.新建一个js文件，里面写自定义指令的方法类
2.引入到main.js中，里面注册全局指令

// 第一步
const focusDirective = {
	inserted(el) {
		el.focus();
	},
}

export default focusDirective

// 第二步 main.js中注册指令
import Vue from 'vue';
import focusDirective from './focusDirective';

Vue.directive('focus', focusDirective);

方式二：

1.新建一个js文件，里面写自定义指令的方法类，并注册
2.引入到main.js中

// 第一步
import Vue from 'vue';
const focusDirective = {
	inserted(el) {
		el.focus();
	},
}
Vue.directive('focus', focusDirective)

// 第二步 main.js中注册指令
import './focusDirective';

• directive参数

1、钩子
// 只调用一次 指令第一次绑定到元素时触发
bind(el, binding, vnode, oldvnode) {}
// 被绑定元素插入到父节点时调用
inserted(el, binding, vnode, oldvnode) {}
// 组件所在的VNode更新时触发，
update(el, binding, vnode, oldvnode) {}
// 指令所在组件的VNode及其子VNode 更新之后触发
componentUpdated(el, binding, vnode, oldvnode) {}
// 只调用一次 指定与元素解绑时触发
unbind(el, bingding, vnode, oldvnode) {}

2、参数
el 指的是所绑定的Dom元素
el.dataset 指的是元素自定义的参数值，可以修改，可以用来和上面的钩子函数之前传递信息

bingding 是一个对象
name: 去掉"v-"及后缀后的名称
rawName: 自定义的全部名称
express: 是个字符串，展示指令绑定的值value
value: 指令绑定的值
arg: 传给指令的参数，如果没有传给指令参数则不会出现此参数