Vue中如何自定义函数指令

Vue中如何自定义函数指令：有两种方式，局部注册和全局注册一. 局部注册：new Vue({el: '#root',data: {n: 1},// 局部的指令// 自定义指令// 注意：指令里面的 this 都是 windowdirectives: {//注意定义的是 big，使用的是 v-big// big函数何时会被调用： 1 指令与元素成功绑定时（一上来）//

ALKEN ABBY

4656人浏览 · 2021-09-10 19:38:43

ALKEN ABBY · 2021-09-10 19:38:43 发布

Vue中如何自定义函数指令：有两种方式，局部注册和全局注册

一. 局部注册：

 new Vue({
    el: '#root',
    data: {
      n: 1
    },

    // 局部的指令
    // 自定义指令
    // 注意：指令里面的 this 都是 window
    directives: {
      //注意定义的是 big，使用的是 v-big
      // big函数何时会被调用： 1 指令与元素成功绑定时（一上来） 
      //                    2 指令所在的模版被重新解析的时候（意思是：该模版上面任何的元素发生变化，都要重新调用v-big指令）
      // 有两个参数,element 是v-big指令所在的真实DOM元素，binding 是element和n绑定的所有全部信息
      'big-number'(element, binding) {
        element.innerText = binding.value * 10;
        // console.log(element,binding)
      },

      //  所以其实指令语法的功能：就是操作 DOM元素的标签属性，标签体内容，绑定事件等

      fbind: {
        // 当指令与元素成功绑定时调用
        bind(element, binding) {
          element.value = binding.value;
        },
        //指令所在元素时被插入页面时调用
        inserted(element, binding) {
          element.focus();
        },
        //指令所在的模版被重新解析时被调用
        update(element, binding) {
          element.value = binding.value;
        }
      }

    }
  })

二. 全局注册：

  // 全局的指令式命令
  Vue.directive('fbind2', {
    // 当指令与元素成功绑定时调用
    bind(element, binding) {
      element.value = binding.value;
    },
    //指令所在元素时被插入页面时调用
    inserted(element, binding) {
      element.focus();
    },
    //指令所在的模版被重新解析时被调用
    update(element, binding) {
      element.value = binding.value;
    }
  })

三. 注意点：很重要
在这里插入图片描述

四. 下面是具体的实例，根据需求自定义一个函数指令：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--
  需求1：定义一个 v-big 指令，和 v-text 功能类似，但会把绑定的数值放大10倍
  需求2：定义一个 v-fbind 指令，和 v-bind 功能相似，但可以让其所绑定的input元素默认获取焦点
-->
<div id="root">
  <h2>当前的值是：<span v-text="n"></span></h2>
  <h2>放大10倍后的n值是：<span v-big-number="n"></span></h2>
  <button @click="n++">n++</button>

  <hr>
  <input type="text" v-fbind:value="n">

</div>

<script src="./vue.js"></script>
<script>

  // 全局的指令式命令
  Vue.directive('fbind2', {
    // 当指令与元素成功绑定时调用
    bind(element, binding) {
      element.value = binding.value;
    },
    //指令所在元素时被插入页面时调用
    inserted(element, binding) {
      element.focus();
    },
    //指令所在的模版被重新解析时被调用
    update(element, binding) {
      element.value = binding.value;
    }
  })

  new Vue({
    el: '#root',
    data: {
      n: 1
    },

    // 局部的指令
    // 自定义指令
    // 注意：指令里面的 this 都是 window
    directives: {
      //注意定义的是 big，使用的是 v-big
      // big函数何时会被调用： 1 指令与元素成功绑定时（一上来）
      //                    2 指令所在的模版被重新解析的时候（意思是：该模版上面任何的元素发生变化，都要重新调用v-big指令）
      // 有两个参数,element 是v-big指令所在的真实DOM元素，binding 是element和n绑定的所有全部信息
      'big-number'(element, binding) {
        element.innerText = binding.value * 10;
        // console.log(element,binding)
      },

      //  所以其实指令语法的功能：就是操作 DOM元素的标签属性，标签体内容，绑定事件等


      fbind: {
        // 当指令与元素成功绑定时调用
        bind(element, binding) {
          element.value = binding.value;
        },
        //指令所在元素时被插入页面时调用
        inserted(element, binding) {
          element.focus();
        },
        //指令所在的模版被重新解析时被调用
        update(element, binding) {
          element.value = binding.value;
        }
      }

    }
  })

</script>
</body>
</html>