Vue中自定义指令总结及封装一个类似于v-bind的自定义指令

最新推荐文章于 2023-12-12 09:00:58 发布

离奇6厘米

最新推荐文章于 2023-12-12 09:00:58 发布

阅读量305

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Vest_er/article/details/127657158

版权

vue 专栏收录该内容

37 篇文章 58 订阅

订阅专栏

一、自定义指令总结

1、定义语法

① 局部指令

new Vue({
  directives:{
      指令名: 配置对象
  }
});

或

new Vue({
  directives:{
      指令名: 回调函数
  }
});

回调函数有弊端：回调函数相当于只写了配置对象中的.bind和.update回调

② 全局指令

Vue.directive(指令名，配置对象)

或

Vue.directive(指令名，回调函数)

2、配置对象中的常用的3个回调

① .bind：指令与元素成功绑定时调用

② .inserted：指令所在元素被插入页面时调用

③ .update：指令所在模板结构被重新解析时调用（不是指令所用到的数据发生更新时）

3、注意点

① 指令定义时不加v-，但是使用时要加v-

② 指令名如果是多个单次，要使用kebab-case命名方式，不要使用camelCase命名

二、封装一个类似于v-bind的自定义指令

需求：做一个类似于v-bind的指令v-fbind

1、自定义指令v-fbind

directives: {
  fbind: {
    bind(element, binding) {
      element.value = binding.value;
    },
  },
  inserted(element) {
    element.focus();
  },
  updated(element, binding) {
    element.value = binding.value;
  },
},

2、页面中绑定指令v-fbind

<div id="app">
    <input type="text" v-fbind:value="sex" />
  </div>

3、完整代码

<!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="app">
      <input type="text" v-fbind:value="sex" />
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          sex: "男",
        },
        directives: {
          fbind: {
            bind(element, binding) {
              element.value = binding.value;
            },
          },
          inserted(element) {
            element.focus();
          },
          updated(element, binding) {
            element.value = binding.value;
          },
        },
      });
    </script>
  </body>
</html>