vue学习--常用特性(二、自定义指令)

5.3 自定义指令

1. 为何需要自定义指令？

内置指令不满足需求

2. 自定义指令的语法规则（获取元素焦点）

 Vue.directive('focus' {
    inserted: function(el) {  // 获取元素的焦点 el.focus();
    }
})

3.自定义指令用法

 <input type="text" v-focus>

例：

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input type="text" v-focus>
    <input type="text">
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      自定义指令
    */
    Vue.directive('focus', {
      inserted: function(el){
        // el表示指令所绑定的元素
        el.focus();
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {
        
      },
      methods: {
        handle: function(){
          
        }
      }
    });
  </script>
</body>
</html>

4. 带参数的自定义指令（改变元素背景色）

 Vue.directive(‘color', {
    inserted: function(el, binding) {
         el.style.backgroundColor = binding.value.color;
    }
})

5. 指令的用法

 <input type="text" v-color='{color:"orange"}'>

例：

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input type="text" v-color='msg'>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      自定义指令-带参数
    */
    Vue.directive('color', {
      bind: function(el, binding){
        // 根据指令的参数设置背景色
        // console.log(binding.value.color)
        el.style.backgroundColor = binding.value.color;
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {
        msg: {
          color: 'blue'
        }
      },
      methods: {
        handle: function(){
          
        }
      }
    });
  </script>
</body>
</html>

5. 局部指令

 directives: {
   focus: { // 指令的定义
        inserted: function (el) {
            el.focus()
        }
    }
}

例：

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

posted @ 2020-04-08 22:11 龙猫•ᴥ• 阅读(9) 评论(0) 收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· vue学习--模板语法(二、指令&数据绑定)

· vue学习--常用特性(一、表单操作)

· Vue 自定义指令

· 自定义对象

· Vue 自定义指令-directive

2025年7月

日

一

二

三

四

五

六

一纸年华

潜藏于波涛下寂静无声，跃升于惊涛上乘风化龙

vue学习--常用特性(二、自定义指令)

5.3 自定义指令

1. 为何需要自定义指令？

2. 自定义指令的语法规则（获取元素焦点）

3.自定义指令用法

例：

4. 带参数的自定义指令（改变元素背景色）

5. 指令的用法

例：

5. 局部指令

例：

搜索

常用链接

我的标签

合集 (8)

随笔分类 (245)

随笔档案 (244)

相册 (0)

阅读排行榜

评论排行榜

最新评论

目录导航

	Vue.directive('focus' {
	inserted: function(el) { // 获取元素的焦点 el.focus();
	}
	})

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	</head>
	<body>
	<div id="app">
	<input type="text" v-focus>
	<input type="text">
	</div>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript">
	/*
	自定义指令
	*/
	Vue.directive('focus', {
	inserted: function(el){
	// el表示指令所绑定的元素
	el.focus();
	}
	});
	var vm = new Vue({
	el: '#app',
	data: {

	},
	methods: {
	handle: function(){

	}
	}
	});
	</script>
	</body>
	</html>

	Vue.directive(‘color', {
	inserted: function(el, binding) {
	el.style.backgroundColor = binding.value.color;
	}
	})

	directives: {
	focus: { // 指令的定义
	inserted: function (el) {
	el.focus()
	}
	}
	}