[Vue]自定义指令（一）

2023-08-06 65

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： [Vue]自定义指令

前言

系列文章目录：

[Vue]目录

老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU

笔记在线版： https://note.youdao.com/s/5vP46EPC

视频：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

1. 自定义指令

在vue中支持自定义指令，自定义指令声明在vue的directives节点中。

自定义指令本质为一个函数。

1.1 语法

定义自定义指令有两种形式的写法：

函数形式

new Vue({
  directives: {
    指令名(参数列表) {}
  }
})
• 1
• 2
• 3
• 4
• 5

对象形式

new Vue({
  directives: {
    指令名: {
      k: v,
      k: v,
      ...
    }
  }
})

使用自定义指令，需要使用v-指令名的形式。

1.2 自定义指令的参数

自定义指令的处理函数接收两个参数，第一个参数为使用自定义指令的DOM元素(element)，第二个参数为指令的绑定信息(binding)。

2. 自定义指令实现数值放大10倍

需要实现的需求：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。

2.1 查看自定义指令的参数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root">
      <h2>n的值为: {{n}}</h2>
      <h2>n放大10倍对应的值为: <span v-big="n"></span></h2>
      <button @click="n++">n++</button>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        n: 0,
      },
      directives: {
        big(element, bingding) {
          console.log('element: ')
          console.log(element)
          console.log('binding: ')
          console.log(bingding)
        },
      },
    })
  </script>
</html>

2.2 需求的实现

实现把绑定的数值放大10倍，然后将放大后的数值放到DOM元素上，需要我们操作DOM元素。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root">
      <h2>n的值为: {{n}}</h2>
      <h2>n放大10倍对应的值为: <span v-big="n"></span></h2>
      <button @click="n++">n++</button>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        n: 0,
      },
      directives: {
        big(element, bingding) {
          // 操作DOM元素，将放大后的数值放入DOM元素中
          // bingding.value 获取当前指令绑定的表达式的值
          // element.innerText 将放大后的数值放入DOM元素中
          element.innerText = bingding.value * 10
        },
      },
    })
  </script>
</html>

2.3 自定义指令调用的时机

2.3.1 指令与元素成功绑定时（初始化页面）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root">
      <h2>n的值为: {{n}}</h2>
      <h2>n放大10倍对应的值为: <span v-big="n"></span></h2>
      <button @click="n++">n++</button>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        n: 0,
      },
      directives: {
        big(element, bingding) {
          console.log('自定义指令 big 被调用...')
          element.innerText = bingding.value * 10
        },
      },
    })
  </script>
</html>

2.3.2 所在的模板被重新解析时

自定义指令被调用的时机，不仅是在与自定义指令相关的数据改变时，只要自定义指令所在的模板被重新解析，自定义指令就会被调用。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root">
      <h2>n的值为: {{n}}</h2>
      <h2>n放大10倍对应的值为: <span v-big="n"></span></h2>
      <button @click="n++">n++</button>
      <h2>x的值为: {{x}}</h2>
      <button @click="x++">x++</button>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        n: 0,
        x: 100
      },
      directives: {
        big(element, bingding) {
          console.log('自定义指令 big 被调用...')
          element.innerText = bingding.value * 10
        },
      },
    })
  </script>
</html>

3. 自定义指令让其所绑定的input元素默认获取焦点

需要实现的需求：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

3.1 需求实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root">
      <h2>n的值为: {{n}}</h2>
      <h2>n放大10倍对应的值为: <span v-big="n"></span></h2>
      <button @click="n++">n++</button> <br><br>
      <input type="text" v-fbind:value="n">
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        n: 0
      },
      directives: {
        big(element, bingding) {
          element.innerText = bingding.value * 10
        },
        // 让指令fbind所绑定的input元素默认获取焦点
        fbind(element, binding) {
          // 将n的值放入input中
          element.value = binding.value
          // 然后input获取焦点
          element.focus()
        }
      },
    })
  </script>
</html>

观察运行结果发现，input输入框并没有在最开始默认获取焦点，而是在点击按钮n+1后才自动获取焦点。