Vue中如何自定义函数指令

最新推荐文章于 2023-07-24 09:19:20 发布

ALKEN ABBY

最新推荐文章于 2023-07-24 09:19:20 发布

阅读量4.5k

点赞数

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

本文链接：https://blog.csdn.net/qq_45803050/article/details/120228454

版权

Vue 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

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>

五. 若还有不清楚的，可以查看官网对应说明，链接如下：

此处点击跳转到Vue官网有关自定义指令的描述

ALKEN ABBY

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue中如何自定义函数指令

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

扫一扫

专栏目录