Vue2.0学习笔记-11、自定义全局指令、自定义私有指令

最新推荐文章于 2024-04-10 11:15:09 发布

不收藏找不到我

最新推荐文章于 2024-04-10 11:15:09 发布

阅读量212

点赞数

分类专栏： vue学习笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_41364246/article/details/109630717

版权

vue学习笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

自定义指令

1、自定义全局指令
- (1)语法
- (2)示例
2、自定义私有指令
- (1)语法
- (2)示例
3、自定义全局指令和私有指令名称相同时
4、指令函数的简写

1、自定义全局指令

(1)语法

定义：

//Vue.directive函数的第一个参数是自定义指令名称，第二个参数是一个对象
//指令名称不用加v-，调用自定义命令是，统一都是：v-指令名称
Vue.directive('指令名称', {
   bind: function(参数1，参数2，参数3，参数4){  
  },
   inserted: function(参数1，参数2，参数3，参数4){  
  },
   update: function(参数1，参数2，参数3，参数4){  
  },
   componentUpdated: function(参数1，参数2，参数3，参数4){  
  },
   unbind: function(参数1，参数2，参数3，参数4){  
  }
})

函数详解：
Vue的官网中，将上述bind、inserted、update、componentUpdated和unbind这类函数称为钩子函数，我的理解，所谓的钩子函数，其实就是事件，和原生js中的click、mousemove等的性质都是一样的

函数	作用
bind	只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置，和样式相关的操作，一般都可以在bind执行
inserted	被绑定元素插入父节点时调用(仅保证父节点存在，但不一定已被插入文档中)，触发一次，和js行为有关的操作，最好在inserted中去执行，防止js行为不生效
update	所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前，指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新，可能会触发多次
componentUpdated	指令所在组件的 VNode 及其子 VNode 全部更新后调用
unbind	只调用一次，指令与元素解绑时调用

函数参数详解：

参数名称	作用
el(参数1)	指令所绑定的元素，可以用来直接操作DOM
binding(参数2)(只读)	一个对象，其属性包括:name(指令名，不包含v-前缀)，value(指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2),oldValue(指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用),expression(字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”)，arg(传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”) ,modifiers(一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true })
vnode(参数3)(只读)	Vue编译生成的虚拟节点
oldVnode(参数4)(只读)	上一个虚拟节点，仅在update和componentUpdated钩子中可用

(2)示例

这里的示例只有Inserted函数和函数的第一个参数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style type="text/css">
			.color{
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div id="app">
			id:<input type="text" name="" id="" v-model="id" />
			name:<input type="text" name="" id="" v-model="name" />
			age:<input type="text" name="" id="" v-model="age" v-focus/>
			<button type="button" @click="add">添加</button>
			<p :class="'color'" v-for="item in list" :key="item.id"><input type="checkbox">{{item.id}},{{item.name}},{{item.age}}</p>
		</div>
		<script type="text/javascript">
			
			// 注册一个全局自定义指令 `v-focus`
			Vue.directive('focus', {
			  // 当被绑定的元素插入到 DOM 中时……
			  inserted: function (el) {
			    // 聚焦元素
			    el.focus();
			  }
			})
			
			var vm=new Vue({
				el:'#app',
				data:{
					id:'',
					name:'',
					age:'',
					list:[{id:1,name:'小明',age:14},{id:2,name:'李华',age:15},{id:3,name:'张三',age:18}]
			},
			methods:{
				add:function(){
					this.list.unshift({id:this.id,name:this.name,age:this.age});
				},
			},
			})
		</script>
	</body>
</html>

执行效果：
在这里插入图片描述
页面加载出来时，焦点落在第三个输入框。

2、自定义私有指令

(1)语法

参考私有过滤器

(2)示例

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			id:<input type="text" name="" id="" v-model="id" />
			name:<input type="text" name="" id="" v-model="name" />
			age:<input type="text" name="" id="" v-model="age" v-focus />
			<button type="button" @click="add" v-color>添加</button>
			<p :class="'color'" v-for="item in list" :key="item.id"><input type="checkbox">{{item.id}},{{item.name}},{{item.age}}</p>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					id: '',
					name: '',
					age: '',
					list: [{
						id: 1,
						name: '小明',
						age: 14
					}, {
						id: 2,
						name: '李华',
						age: 15
					}, {
						id: 3,
						name: '张三',
						age: 18
					}]
				},
				methods: {
					add: function() {
						this.list.unshift({
							id: this.id,
							name: this.name,
							age: this.age
						});
					},
				},
				directives: {
					//自定义私有指令:
					'focus': {
						inserted: function(el) {
							el.focus();
						},
					},
					'color':{
						bind:function(el){
							el.style.color='red';
						}
					}
				}
			})
		</script>
	</body>
</html>

执行效果：
在这里插入图片描述

3、自定义全局指令和私有指令名称相同时

和过滤器一样，默认使用私有指令
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			id:<input type="text" name="" id="" v-model="id" />
			name:<input type="text" name="" id="" v-model="name" />
			age:<input type="text" name="" id="" v-model="age" v-focus />
			<button type="button" @click="add" v-color>添加</button>
			<p :class="'color'" v-for="item in list" :key="item.id"><input type="checkbox">{{item.id}},{{item.name}},{{item.age}}</p>
		</div>
		<script type="text/javascript">
			// 注册一个全局自定义指令 `v-focus`
			Vue.directive('color', {
			  // 当被绑定的元素插入到 DOM 中时……
			  bind: function (el) {
			    el.style.color="blue";
			  }
			})
			
			var vm = new Vue({
				el: '#app',
				data: {
					id: '',
					name: '',
					age: '',
					list: [{
						id: 1,
						name: '小明',
						age: 14
					}, {
						id: 2,
						name: '李华',
						age: 15
					}, {
						id: 3,
						name: '张三',
						age: 18
					}]
				},
				methods: {
					add: function() {
						this.list.unshift({
							id: this.id,
							name: this.name,
							age: this.age
						});
					},
				},
				directives: {
					//自定义私有指令:
					'focus': {
						inserted: function(el) {
							el.focus();
						},
					},
					'color':{
						bind:function(el){
							el.style.color='red';
						}
					}
				}
			})
		</script>
	</body>
</html>

执行效果：
在这里插入图片描述
按钮文字的颜色为红色，即执行了是私有指令的内容！

4、指令函数的简写

大多数情况下，自定义指令的大多数内容都是发生在bind和update钩子函数中的，因此可以这样简写：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button type="button" v-color-yellow="'yellow'">我是黄色按钮</button>
			<button type="button" v-color-green="'green'">我是绿色按钮</button>
		</div>
		<script type="text/javascript">
			Vue.directive('color-yellow',function(el,binding){//这个函数等于把函数写到了bind和update钩子中
				el.style.color=binding.value;
			})
			var vm=new Vue({
				el:'#app',
				data:{
					
				},
				methods:{
					
				},
				directives:{
					'color-green':function(el,binding){//这个函数等于把函数写到了bind和update钩子中
						el.style.color=binding.value;
					}
				}
			})
		</script>
	</body>
</html>

执行效果：
在这里插入图片描述

不收藏找不到我

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue2.0学习笔记-11、自定义全局指令、自定义私有指令

自定义指令1、自定义全局指令(1)语法三级目录2、自定义私有指令二级目录三级目录1、自定义全局指令(1)语法定义：//Vue.directive函数的第一个参数是自定义指令名称，第二个参数是一个对象//指令名称不用加v-，调用自定义命令是，统一都是：v-指令名称Vue.directive('指令名称', { bind: function(参数1，参数2，参数3，参数4){ }, inserted: function(参数1，参数2，参数3，参数4){ }, upd
复制链接

扫一扫