vue的自定义指令

最新推荐文章于 2024-09-10 09:52:47 发布

ljljlj1993

最新推荐文章于 2024-09-10 09:52:47 发布

阅读量103

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/ljljlj1993/article/details/90452744

版权

vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

自定义指令

自定义指令分为全局注册，和局部注册
参考官网api：https://cn.vuejs.org/v2/guide/custom-directive.html

	//全局注册
Vue.directive('focus',{
	//指令选项
})

//局部注册
			var  app= new Vue({
				el:'#app',
				directives:{
					focus:{
						//指令选项
					}
				}
			})

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用

钩子函数参数

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
		<title>Title</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<span v-hello="color3">{{message}}</span>
			<button @click="add"> 点击开始加1</button>
			<button onclick="jiebang()">解绑</button>
		</div>
	</body>
	<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
	<script>
		function jiebang() {
			app.$destroy();
		}
		Vue.directive("hello", {
			bind: function(el, bingind, vnode) {
				console.log(bingind.value+"============")
				el.style["color"] = bingind.value;
				console.log("1-bind");
			},
			inserted: function() {
				console.log("2-insert");zi
			},
			update: function() {
				console.log("3-update");
			},
			componentUpdated: function() {
				console.log('4 - componentUpdated');
			},
			unbind: function() {
				console.log('5 - unbind');
			}
		})
		var app = new Vue({
			el: "#app",
			data: {
				message: 10,
				color3: "balck"
			},
			methods: {
				add: function() {
					this.message++;
				}
			}
		})
	</script>
</html>

在这里插入图片描述
运行截图