vue自定义指令

vue自定义指令

在vue中我们常会使用到一些指令，例如 v-model 实现数据的双向绑定，使用 v-if 进行判断，还有 v-for、v-bind等等，这些都是vue框架自带的指令，简单便捷，具体使用请访问 Vue指令的使用方法。

通常情况下我们使用vue自带指令已经足够，但是在某些情况下自定义指令不能够满足我们的需求，我们就可以自定义指令，以 “使input输入框自动获取焦点” 为例，方法如下：
1、局部自定义指令

<template>
	<div class="content>
		<el-input v-model="value" v-focus></el-input>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				value: '', 
			}
		},
		// 在该组件内自定义指令
		directives: {
			'focus': {
				inserted: function(el) {   // inserted 被绑定元素插入父节点时使用
					el.querySelector('input').focus();  // 定义仅“input”输入框可用
				}
			}
		}
	}
</script>

2、全局自定义指令
局部自定义是在目标组件内进行定义的，而全局定义需在main.js文件中进行定义

import Vue form "vue"
import App form "./App.vue"
import router form "./router"
import store form "./store"

// 自定义全局指令
Vue.directive('focus', {
	inserted: function(el) {
		el.querySelector("input").focus();
	}
})

new Vue({
	router,
	store,
	render: h => h(App)
}).$mount('#app')

inserted 是其中的一个钩子函数，另还有：

• bind：每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次；
• update：每当Vnode更新时调用，可调用多次
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用

到此已定义完成，在标签内通过 v-focus 使用即可！

今日鸡汤：

	奋斗没有终点，任何时候都是个起点；
	努力从今天开始，成功从“零”开始；
	信心来自于实力，实力来自于勤奋。

与诸君共勉！