Vue2中使用自定义指令

旧梦星轨

已于 2022-12-28 20:00:06 修改

阅读量906

点赞数 4

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

于 2022-09-13 09:15:00 首次发布

本文链接：https://blog.csdn.net/qq_60961397/article/details/126822757

版权

Vue2 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

在vue中，除了vue提供了一套内置的指令外，Vue 也允许注册自定义指令，用来配置重写某一项数据的方法，声明自定义指令，分为全局注册自定义指令，以及局部注册自定义指令。全局注册，为 Vue.directive（）接收两个参数，第一个参数为字符串是我们需要注册的指令名称，，第二个参数为一个对象，对象中接收多个回调钩子函数
在这里插入图片描述
并且每个函数钩子都会接收多个参数，可以拿到DOM节点，也能够拿到，绑定的value数据；

局部注册与全局注册的区别就是，在某一个vue实例身上定义一个 directives 的对象，然后在 directives 中，配置所需要的自定义指令。
在这里插入图片描述

  <div id="root">
    <h2>默认数据：{{switchs}}</h2>    
    <h2 v-Capital="switchs">自定义指令转换为大写：</h2>   
    <h2 v-Small="switchs">自定义指令转换为小写：</h2>   
  </div>

  <body>
    <script>
    //全局自定义指令
      Vue.directive("Capital", {  //初始化自定义指令 Capital，将绑定数据加工成大写。
        inserted(el) {
          //被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
          console.log(el);
        },
        bind(el, binding, vnode, oldVnode) {
          //只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
          console.log(el, binding, vnode, oldVnode);
          el.innerText += binding.value.toUpperCase();
        },
        update(el, binding, vnode, oldVnode) {
          console.log(el, binding, vnode, oldVnode);
        },
      });
        //全局自定义指令
      Vue.directive("Small", {    //初始化自定义指令 Small 将绑定数据加工成小写。
        inserted(el) {
          //被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
          console.log(el);
        },
        bind(el, binding, vnode, oldVnode) {
          //只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
          console.log(el, binding, vnode, oldVnode);
          el.innerText += binding.value.toLowerCase();
        },
        update(el, binding, vnode, oldVnode) {
          console.log(el, binding, vnode, oldVnode);
        },
      });

      const vm = new Vue({
        // el: "#root",
        data() {
          return {
            switchs: "asdawATYUTYRYfbhaj",   //初始值字符串包含大小写字母混合
          };
        },
         directives: {    //局部自定义组件
          Capital: {
            inserted(el) {
              //被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
              console.log(el);
            },
            bind(el, binding, vnode, oldVnode) {
              //只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
              console.log(el, binding, vnode, oldVnode);
              el.innerText += binding.value.toUpperCase();
            },
            update(el, binding, vnode, oldVnode) {
              console.log(el, binding, vnode, oldVnode);
            },
          },
          Small: {
            inserted(el) {
              //被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
              console.log(el);
            },
            bind(el, binding, vnode, oldVnode) {
              //只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
              console.log(el, binding, vnode, oldVnode);
              el.innerText += binding.value.toLowerCase();
            },
            update(el, binding, vnode, oldVnode) {
              console.log(el, binding, vnode, oldVnode);
            },
          },
        },
      });
      vm.$mount("#root");
    </script>
  </body>
</html>