复习Vue18、自定义指令

最新推荐文章于 2025-09-12 16:35:18 发布

原创最新推荐文章于 2025-09-12 16:35:18 发布 · 204 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

笔记同时被 2 个专栏收录

59 篇文章

订阅专栏

Vue

21 篇文章

订阅专栏

本文详细介绍了Vue中自定义指令的使用方法，包括基本用法、带参数的指令及局部指令，并提供了具体代码示例。

复习Vue18、自定义指令

18.1 自定义指令基本用法

为什么需要自定义指令呢？

因为内置指令不满足需求。

下面看一下基本的创建自定义指令语法:

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

自定义指令用法

<input type="text" v-focus>

下面看一下具体的代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自定义指令基本使用</title>
  </head>
  <body>
    <div id="app">
      <input type="text" v-focus />
    </div>
    <script src="vue.js"></script>
    <script>
        
      Vue.directive("focus", {
        inserted: function (el) {
          //el:表示指令所绑定的元素
          el.focus();
        },
      });
      const vm = new Vue({
        el: "#app",
        data: {},
      });
    </script>
  </body>
</html>

在上面的代码中，我们通过directive方法创建了一个focus指令。

在使用该指令的时候，一定要加上v-的形式。

inserted表示的是指令的钩子函数，含义是：被绑定元素插入父节点时调用。

18.2 自定义指令-带参数

带参数的自定义指令创建的语法（改变元素背景色）

Vue.directive('color',{
    inserted:function(el,binding){
        //binding表示传递过来的参数
        el.style.backgroundColor=binding.value.color;
    }
})

指令的用法

<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>自定义指令带参数</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) {
          el.style.backgroundColor = binding.value.color;
        },
      });
      const vm = new Vue({
        el: "#app",
        data: {
          msg: {
            color: "blue",
          },
        },
      });
    </script>
  </body>
</html>

通过上面的代码，可以看到定义了一个color的指令，在使用的时候传递了msg对象。

所以这个对象会给binding这个参数，我们通过这个参数的value 属性获取msg对象中的color属性的值，然后用来设置文本框的背景色。

这里使用了bind这个钩子函数：只调用一次，第一次绑定指令到元素时调用，我们可以在此绑定只执行一次的初始化动作。

18.3 自定义局部指令

局部指令的基本语法：

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

在Vue实例中添加directives

具体实现的代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>局部指令</title>
  </head>
  <body>
    <div id="app">
      <input type="text" v-color="msg" />
    </div>
    <script src="vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          msg: {
            color: "red",
          },
        },
        directives: {
          color: {
            bind: function (el, binding) {
              el.style.backgroundColor = binding.value.color;
            },
          },
        },
      });
    </script>
  </body>
</html>

局部指令只在所定义的组件中使用。