5.3自定义指令

最新推荐文章于 2024-03-29 10:19:39 发布

泡老师大迷弟

最新推荐文章于 2024-03-29 10:19:39 发布

阅读量743

点赞数

分类专栏： Vue学习文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/PengK_aha/article/details/128079556

版权

Vue学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、自定义指令

       1.为何需要自定义指令
           内置指令不满足要求
       2.自定义指令的语法规则（获取元素焦点）
       Vue.directive('focus',{
           inserted: function(el){
               //el 表示指令所绑定的元素
               el.focus();
           }
       })

       3.自定义指令用法
       <input type="text" v-focus />

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" />
			<input type="text" v-focus  />
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	自定义指令
		1.为何需要自定义指令
			内置指令不满足要求
		2.自定义指令的语法规则（获取元素焦点）
		Vue.directive('focus',{
			inserted: function(el){
				//el 表示指令所绑定的元素
				el.focus();
			}
		})
		
		3.自定义指令用法
		<input type="text" v-focus  />
	 */
	//注册一个自定义指令
	Vue.directive('focus',{
		inserted: function(el){
			//el 表示指令所绑定的元素
			el.focus();
		}
	})
		var vm = new Vue({
			el:'#app',
			data:{
				 msg: "hello",
			},
			methods: {
				handle: function (event) {
					
				}
			}
		});
	</script>
</html>

3.带参数的自定义指令（改变元素背景颜色）
   Vue.directive('color',{
       bind: function(el, binding){
           // 根据指令的参数设置背景色
           //console.log(binding.value)
           el.style.backgroundColor = binding.value.color
       }
   })

   4.指令的用法
   <input type="text" v-color='{color: "orange"}' />

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-color='{color: "orange"}' />
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	3.带参数的自定义指令（改变元素背景颜色）
	Vue.directive('color',{
		bind: function(el, binding){
			// 根据指令的参数设置背景色
			//console.log(binding.value)
			el.style.backgroundColor = binding.value.color
		}
	})
	
	4.指令的用法
	<input type="text" v-color='{color: "orange"}' />
	 */
	Vue.directive('color',{
		bind: function(el, binding){
			// 根据指令的参数设置背景色
			//console.log(binding.value)
			el.style.backgroundColor = binding.value.color
		}
	})
		var vm = new Vue({
			el:'#app',
			data:{
				 msg: {
					 color: 'green'
				 },
			},
			methods: {
				handle: function (event) {
					
				}
			}
		});
	</script>
</html>

//局部指令
       directives: {
           color: {
               bind: function(el, binding){
                   el.style.backgroundColor = binding.value.color
               }
           },
           focus: {
               inserted: function(el){
                   el.focus();
               }
           }
       }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-color = 'msg' />
			<input type="text" v-focus/>
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	自定义指令-局部指令
	//局部指令
	directives: {
		color: {
			bind: function(el, binding){
				el.style.backgroundColor = binding.value.color
			}
		},
		focus: {
			inserted: function(el){
				el.focus();
			}
		}
	}
	使用方式
	<input type="text" v-color = 'msg' />
	<input type="text" v-focus/>
	 */
		var vm = new Vue({
			el:'#app',
			data:{
				 msg: {
					 color: 'red'
				 },
			},
			methods: {
				
			},
			//局部指令
			directives: {
				color: {
					bind: function(el, binding){
						el.style.backgroundColor = binding.value.color
					}
				},
				focus: {
					inserted: function(el){
						el.focus();
					}
				}
			}
		});
	</script>
</html>