Vue2——Vue自定义指令

_洋

已于 2024-03-18 14:22:18 修改

阅读量2.8k

点赞数 1

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

于 2022-07-18 22:20:58 首次发布

本文链接：https://blog.csdn.net/mantou_riji/article/details/125860696

版权

vue2+vue3 专栏收录该内容

50 篇文章 7 订阅

订阅专栏

文章目录

自定义的指令函数什么时候调用
v-big
v-fbind
对象写法中，配置对象中常用的3个回调
自定义指令注意问题
全局指令
- 全局指令的定义

vue运行我们进行自定义指令。我们自定义的指令，就是实现对js语句的封装。

需要在directives：

new Vue({
        directives:{
            //指令的配置,两种写法:
            //函数写法
            指令名(element,binding){
             // element:是绑定的真实DOM元素，binding
             // binding：包含绑定的信息，包括绑定的n值
            }
            //或者键值对写法
            指令名: {
            // 指令与元素成功绑定时（一上来)调用
            bind(element,binding) {},
            // 指令所在元素被插入页面时调用
            inserted(element,binding) {},
            // 指令所在模板被重新解析是调用
            update(element,binding){

            }
          },
        }
      });

中进行指令的配置

自定义的指令函数什么时候调用

指令与元素成功绑定时(一上来）。
指令所在的模板被重新解析时.

v-big

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <div>当前的n值是:<span v-text="n"></span></div>
      <div>放大10倍的n值是:<span v-big="n"></span></div>
      <button @click="n++">点我n+1</button>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;

      new Vue({
        el: "#root",
        data: {
          n: 1,
        },
        directives:{
            big(element,binding){
                // element:是绑定的真实DOM元素，binding
                // binding：包含绑定的信息，包括绑定的n值
                element.innerText = binding.value*10
            }
        }
      });
    </script>
  </body>
</html>

在这里插入图片描述

v-fbind

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

尝试使用函数形式实现

          fbind(element,binding){
              element.value = binding.value
              element.focus()
          //focus函数需要等element的值修改成功之后执行才奏效，所以这样写第一次是无法获取焦的
          }

但是focus函数需要等element的值修改成功并插入页面后执行才奏效，而使用函数的写法我们无法指定在elemen插入页面后执行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>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <div>当前的n值是:<span v-text="n"></span></div>
      <div>放大10倍的n值是:<span v-big="n"></span></div>
      <button @click="n++">点我n+1</button>
      <hr />
      <input type="text" v-fbind:value="n" />
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;

      new Vue({
        el: "#root",
        data: {
          n: 1,
        },
        directives: {
          big(element, binding) {
            // element:是绑定的真实DOM元素，binding
            // binding：包含绑定的信息，包括绑定的n值
            element.innerText = binding.value * 10;
          },
        //   fbind(element,binding){
        //       element.value = binding.value
        //       element.focus()
        //   focus函数需要等element的值修改成功之后执行才奏效，所以这样写第一次是无法获取焦的
        //   }
          fbind: {
            // 指令与元素成功绑定时（一上来)调用
            bind(element,binding) {
                element.value = binding.value
            },
            // 指令所在元素被插入页面时调用
            inserted(element,binding) {
                element.focus()
            },
            // 指令所在模板被重新解析是调用
            update(element,binding){
                element.value = binding.value
            }
          },
        },
      });
    </script>
  </body>
</html>

在这里插入图片描述

对象写法中，配置对象中常用的3个回调

(1).bind:指令与元素成功绑定时调用。
(2).inserted:指令所在元素被插入页面时调用。
(3).update:指令所在模板结构被重新解析时调用。

自定义指令注意问题

如果定义的指令名由多个单词组成，不要使用驼峰式命名方法。多个单词之间使用-进行分隔。

 <div>放大10倍的n值是:<span v-big-number="n"></span></div>
 <script>
 new Vue({
        el: "#root",
        data: {
          n: 1,
        },
        directives: {
          'big-number'(element, binding) {
            element.innerText = binding.value * 10;
          },
      },
});
 </script>

自定义指令中的this
都是windows，指令就是DOM操作元素的，所以this都设置成的时windows

全局指令

在

new Vue({
	 directives: {
	  },
});

中定义的指令时局部指令只能供该vue实例使用。

全局指令的定义

格式：
对象格式的全局定义

      Vue.directive('指令名',{
        配置内容
      })

函数格式的全局定义

      Vue.directive('指令名',function (element, binding) {
       
      })

eg：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <div>当前的n值是:<span v-text="n"></span></div>
      <div>放大10倍的n值是:<span v-big-number="n"></span></div>
      <button @click="n++">点我n+1</button>
      <hr />
      <input type="text" v-fbind:value="n" />
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;
      Vue.directive("fbind", {
        // 指令与元素成功绑定时（一上来)调用
        bind(element, binding) {
          element.value = binding.value;
        },
        // 指令所在元素被插入页面时调用
        inserted(element, binding) {
          element.focus();
        },
        // 指令所在模板被重新解析是调用
        update(element, binding) {
          element.value = binding.value;
        },
      });
      Vue.directive("big-number", function (element, binding) {
        element.innerText = binding.value * 10;
      });

      new Vue({
        el: "#root",
        data: {
          n: 1,
        },
        directives: {
          //   'big-number'(element, binding) {
          //     // element:是绑定的真实DOM元素，binding
          //     // binding：包含绑定的信息，包括绑定的n值
          //     element.innerText = binding.value * 10;
          //   },
          //   fbind(element,binding){
          //       element.value = binding.value
          //       element.focus()
          //   focus函数需要等element的值修改成功之后执行才奏效，所以这样写第一次是无法获取焦的
          //   }
          //   fbind: {
          //     // 指令与元素成功绑定时（一上来)调用
          //     bind(element,binding) {
          //         element.value = binding.value
          //     },
          //     // 指令所在元素被插入页面时调用
          //     inserted(element,binding) {
          //         element.focus()
          //     },
          //     // 指令所在模板被重新解析是调用
          //     update(element,binding){
          //         element.value = binding.value
          //     }
          //   },
        },
      });
    </script>
  </body>
</html>

_洋

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue2——Vue自定义指令

需要在directives：中进行指令的配置定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。尝试使用函数形式实现但是focus函数需要等element的值修改成功并插入页面后执行才奏效，而使用函数的写法我们无法指定在elemen插入页面后执行focus函数才执行，所以这样写第一次是无法获取焦点的。所以需要采取对象的（键值对）写法：(1).bind:指令与元素成功绑定时调用。
复制链接

扫一扫

专栏目录