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 @   龙猫•ᴥ•  阅读(12)  评论(0)    收藏  举报  
相关博文：
·  vue学习--模板语法(二、指令&数据绑定)
·  vue学习--常用特性(一、表单操作)
·  Vue 自定义指令
·  自定义对象
·  Vue 自定义指令-directive
阅读排行：
· 博客园出海记-开篇：扬帆启航
· 微软开源的 MCP 教程「GitHub 热点速览」
· 记一次 .NET 某汽车控制焊接软件 卡死分析
· C#中的多级缓存架构设计与实现深度解析
· 关于布尔类型的变量不要加 is 前缀，被网友们吐槽了，特来完善下
点击右上角即可分享
微信分享提示
字节旗下的 AI IDE

目录导航

5.3 自定义指令
1. 为何需要自定义指令？
2. 自定义指令的语法规则（获取元素焦点）
3.自定义指令用法
例：
4. 带参数的自定义指令（改变元素背景色）
5. 指令的用法
例：
5. 局部指令
例：