自定义指令

最新推荐文章于 2024-08-23 22:44:47 发布

_XinXinM_

最新推荐文章于 2024-08-23 22:44:47 发布

阅读量248

点赞数

本文链接：https://blog.csdn.net/binbinhxx/article/details/112393876

版权

1.为何需要自定义指令
内置指令不满足需求
2.自定义指令的语法规则（获取元素焦点）

vue.directive('focus' {
	inserted: function(el){
	//获取元素焦点
	el.focus()；
	}
})

3.自定义指令用法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id = "app">
    <input type="text" v-focus>
    <input type="text" >

  </div>
  <script src="vue.js"></script>
  <script>
    /*自定义指令*/
    Vue.directive("focus",{
      inserted:function(el){
        // el表示指令所绑定的元素
        el.focus();
      }
    });
    var vm = new Vue({
      el:"#app",
      data:{

      },
      methods: {
        handle:function(){

        }
      }
    })


  </script>
</body>
</html>

在这里插入图片描述

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

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

4.指令的用法

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <div id = "app">
      <input type="text" v-color = "msg">
    </div>
    <script src="vue.js"></script>
    <script>
      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:'orange'
          }
        },
        methods:{
          handle:function(){

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

在这里插入图片描述
5.局部指令

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <div id = "app">
      <input type="text" v-color = "msg">
      <input type="text" v-focus>

    </div>
    <script src="vue.js"></script>
    <script>
      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:'aqua'
          }
        },
        methods:{
          handle:function(){

          }
        },
        // 对于局部指令来说，它只能够在本组件中使用
        // 如果要有更多组件，局部组件就不能使用了
        // 局部指令使用范围是有限制的，全局指令的使用范围是没有限制的
        directives:{
          color:{
            bind: function(el,binding){
              el.style.backgroundColor = binding.value.color;
            }
          },
          focus:{
            inserted:function(el){
              el.focus();
            }
          }
        }

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