vue自定义指令

最新推荐文章于 2024-03-27 14:27:51 发布

干的漂亮

最新推荐文章于 2024-03-27 14:27:51 发布

阅读量210

点赞数

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

本文链接：https://blog.csdn.net/weixin_54671516/article/details/127165916

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

自定义指令：directive
Vue中多有的指令都以 v- 来调用。但是，有时候Vue提供给我们的指令并不能满足我们的需求，这个时候我们就需要自定义指令。指令允许我们对普通 DOM 元素进行底层操作。可以全局注册也可以局部注册。
全局注册:使用Vue.directive(指令名，配置对象)或者Vue.directive(指令名，回调函数)
局部注册:在Vue实例或组件中添加新的选项directives
配置对象中经常用到的三个回调
bind():指令与元素成功绑定时调用
inserted（）：指令所在元素被插入页面时调用
update(）：指令所在模板被重新编译时调用。
自定义指令的时候指令名不加v-，但是在使用的时候要加v-,如果指令名是多个单词，要使用kebab-case的方式命名，不要使用驼峰式命名。

代码如下

<!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>
  <!-- 引入vue框架 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
</head>

<body>
  <div id="root">
    <!-- 使用局部自定义指令 -->
    <div>当前的值是：<span v-text="n"></span></div>
    <div>放大十倍的值是：<span v-big="n"></span></div>
    <button @click="n++">点击加一</button>
    <hr>
    <input type="text" v-fbind="n">
    <hr>
    <!-- 使用全局自定义指令 -->
    <div>当前的值是：<span v-text="m"></span></div>
    <div>放大二十倍的值是：<span v-bigger="m"></span></div>
    <button @click="m++">点击加一</button>
    <hr>
    <input type="text" v-fbigger="m">
  </div>
  

  <script>
  
    // 全局注册自定义指令
    Vue.directive('bigger', function (element, binding) {
      element.innerText = binding.value * 20

    }
    )
    Vue.directive('fbigger', {
      // 指令与元素成功绑定时调用
      bind(element, binding) {
        element.value = binding.value
        console.log("bind");
      },
      // 指令所在元素被插入时调用
      inserted(element, binding) {
        element.focus()
        console.log("inserted");
      },
      // 指令所在的模板被重新解析时调用
      update(element, binding) {
        element.value = binding.value
        console.log("update");
      }
    })


    let vm = new Vue({
      el: '#root',
      data: {
        n: 1,
        m: 2
      },
      // 局部注册自定义指令
      directives: {
        // 当指令和元素绑定成功的时候自定义指定会被调用，指令所在的模板被重新解析的时候会被调用
        big(element, binding) {
          // big传入两个参数，第一个是拿到的真实DOM,第二个参数是binding,表示元素和数据绑定
          element.innerText = binding.value * 10
          // console.log(element,binding.value);
        },
        fbind: {
          // 指令与元素成功绑定时调用
          bind(element, binding) {
            element.value = binding.value
            console.log("bind");
          },
          // 指令所在元素被插入时调用
          inserted(element, binding) {
            element.focus()
            console.log("inserted");
          },
          // 指令所在的模板被重新解析时调用
          update(element, binding) {
            element.value = binding.value
            console.log("update");
          }
        }


      }


    })
  </script>
</body>

</html>

代码中写了两种自定义指令的注册方式，效果如下