vue自定义指令 Vue.directive

最新推荐文章于 2024-06-12 13:02:56 发布
最新推荐文章于 2024-06-12 13:02:56 发布
阅读量131 收藏
点赞数
分类专栏： vue2项目一些 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ss043500/article/details/119581613
版权

Vue.directive

自定义指令的五个钩子函数

下面展示一些 内联代码片。

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <input type="text" v-focus="msg"  v-model="msg">
    </div>

    <script src="./vue.js"></script>
    <script>
      Vue.directive('focus', {
        // 五个钩子函数
        // 只调用一次, 在指令 和 元素第一次绑定时执行, 此时元素不一定渲染了
        // 一般在bind中可以进行指令的初始化 (具体初始化什么内容, 和功能相关)
        bind() {
          console.log('bind')
        },
        // 在指令所在元素, 插入到页面中时, 执行 (元素肯定是渲染了)
        inserted() {
          console.log('inserted')
        },
        // 当指令的值发生修改时, 触发
        update() {
          console.log('update')
        },
        // 会等待当前组件以及子组件的节点都更新完成后, 调用
        componentUpdated() {
          console.log('componentUpdated')
        },
        // 当指令 和 元素解绑时触发
        unbind() {
          console.log('unbind')
        }
      })

      const vm = new Vue({
        el: '#app',
        data: {
          msg: 'hello vue'
        }
      })
    </script>
  </body>
</html>

钩子函数的参数

钩子函数有俩个参数
参数1: el 指令所在的元素
参数2: binding 指令相关的信息的对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p v-demo:aa.bb.cc.dd="msg">{{ msg }}</p>
    </div>

    <script src="./vue.js"></script>
    <script>
      // v-model="msg"
      // v-text="msg"

      // 完整的指令: v-on:click.prevent.stop="fn"

      Vue.directive('demo', {
        // 5个钩子函数, 钩子函数的参数
        // 5个钩子函数的参数一个样
        // 参数1: el 指令所在的元素
        // 参数2: binding 指令相关的信息的对象
        // (1) name 指令名   => demo
        // (2) value 指令的值
        // (3) arg 指令的参数  :aa
        // (4) modifiers 指令的修饰符 .bb.cc
        bind(el, binding) {
          console.log(el)
          console.log(binding)
        }
      })

      const vm = new Vue({
        el: '#app',
        data: {
          msg: 'hello vue'
        }
      })
      /* 
        钩子函数的参数
        el: 指令所在的当前元素

        binding: 指令相关信息的对象
          (1) name 指令名
          (2) value 指令值
          (3) arg 指令的参数   :click
          (4) modifiers 指令的修饰符  .prevent.stop
      */
    </script>
  </body>
</html>

下面是对应参数
在这里插入图片描述
下面是自定义指令的用法

  1. value 的使用
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h1 v-red>{{ msg }}</h1>
    <h2 v-color="color">你好哇</h2>

    <hr>

    <p v-text="msg"></p>
    <p v-mytext="msg"></p>
  </div>

  <script src="./vue.js"></script>
  <script>
    // var div = document.createElement('div')
    // div.style.backgroundColor = 'blue'

    // 需求1: v-red 指令, 给哪个元素加, 这个元素字体颜色就变成红色
    Vue.directive('red', {
      // 一般指令的初始化, 都会放到bind中
      bind(el, binding) {
        el.style.color = 'red'
      }
    })

    // 需求2: v-color = '值'   
    // el 当前指令所在的元素
    // binding 指令相关的信息对象
    // (1) name 指令名
    // (2) value 指令值
    // (3) arg 指令参数 :click
    // (4) modifiers 指令的修饰符 .aa.bb
    Vue.directive('color', {
      bind(el, binding) {
        console.log(binding);
        // console.log(binding.value)
        el.style.color = binding.value
      },
      update(el, binding) {
        el.style.color = binding.value
      }
    })


    // 实现 v-mytext
    Vue.directive('mytext', {
      bind(el, binding) {
        el.innerText = binding.value
      },
      update(el, binding) {
        el.innerText = binding.value
      }
    })
    const vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello vue',
        color: 'green'
      }
    })
  </script>
</body>

</html>
  1. arg 的使用
	<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h1 v-bind:title="msg" v-bind:str="str">{{ msg }}</h1>
    <h1 v-mybind:title="msg" v-mybind:str="str">{{ msg }}</h1>
    <hr>
    <p v-color:bg="bgColor">我是文本, 我希望设置背景颜色</p>
    <p v-color:font="fontColor">我是文本, 我希望设置字体颜色</p>
  </div>

  <script src="./vue.js"></script>
  <script>
    // el 指令所在的元素
    // binding 指令相关的信息
    // (1) name 指令名
    // (2) value 指令值
    // (3) arg 指令参数  :title  属性名
    // (4) modifiers 指令的修饰符 .bb .cc

    // v-bind:title="msg"  设置元素的 title属性, 值就是 msg的值
    Vue.directive('mybind', {
      bind(el, binding) {
        console.log(binding.arg)  // 属性名
        // console.log(binding.value) // 属性值
        // getAttribute 获取标签属性, setAttribute(name, value)
        el.setAttribute(binding.arg, binding.value)
      },
      update(el, binding) {
        el.setAttribute(binding.arg, binding.value)
      }
    })


    // 需求: 对于 v-color 进阶
    // v-color:bg="值"   :bg就是设置背景颜色
    // v-color:font="值"  :font就是设置字体颜色
    Vue.directive('color', {
      bind(el, binding) {
        // 可能设置背景, 也可能设置是字体, 判断一下
        if (binding.arg === 'bg') {
          el.style.backgroundColor = binding.value
        }
        if (binding.arg === 'font') {
          el.style.color = binding.value
        }
      },
      update(el, binding) {
        if (binding.arg === 'bg') {
          el.style.backgroundColor = binding.value
        }
        if (binding.arg === 'font') {
          el.style.color = binding.value
        }
      }
    })

    const vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello vue',
        str: '你好哇',
        bgColor: 'pink',
        fontColor: 'red'
      }
    })
  </script>
</body>
</html>
  1. modifiers 的使用(修饰符)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p v-color:bg.bold.italic="bgColor">我是加粗的文本, 我希望设置背景颜色</p>
      <p v-color:font.italic="fontColor">我是倾斜的文本, 我希望设置字体颜色</p>
    </div>

    <script src="./vue.js"></script>
    <script>
      // el 指令所在的元素
      // binding 指令相关的信息
      // (1) name 指令名
      // (2) value 指令值
      // (3) arg 指令参数  :title  属性名
      // (4) modifiers 指令的修饰符 .bb .cc

      // 需求: 对于 v-color 进阶
      // v-color:bg.bold="值"     .bold 字体要加粗
      // v-color:font.italic="值"   .italic 字体要倾斜

      Vue.directive('color', {
        bind(el, binding) {
          // 可能设置背景, 也可能设置是字体, 判断一下
          if (binding.arg === 'bg') {
            el.style.backgroundColor = binding.value
          }
          if (binding.arg === 'font') {
            el.style.color = binding.value
          }

          console.log(binding.modifiers)
          if (binding.modifiers.bold) {
            el.style.fontWeight = 700
          }
          if (binding.modifiers.italic) {
            el.style.fontStyle = 'italic'
          }

        },
        update(el, binding) {
          if (binding.arg === 'bg') {
            el.style.backgroundColor = binding.value
          }
          if (binding.arg === 'font') {
            el.style.color = binding.value
          }
        }
      })
      

      
      const vm = new Vue({
        el: '#app',
        data: {
          msg: 'hello vue',
          str: '你好哇',
          bgColor: 'pink',
          fontColor: 'red'
        }
      })
    </script>
  </body>
</html>

自定义指令小技巧
当bind和updata 逻辑一样是可以简写

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1 v-color="color">{{ msg }}</h1>
    </div>

    <script src="./vue.js"></script>
    <script>
      // Vue.directive('color', {
      //   bind() {...},
      //   update() {...}
      // })
      // 如果配置的钩子函数, bind 和 update 的逻辑, 是一模一样的, 可以简写
      // Vue.directive(指令名, 函数) 这个函数表示直接统一配置了 bind 和 update
      Vue.directive('color', (el, binding) => {
        el.style.color = binding.value
      })

      const vm = new Vue({
        el: '#app',
        data: {
          msg: 'hello vue',
          color: 'red'
        }
      })
    </script>
  </body>
</html>
qq1208013747
关注
专栏目录
Vue.directive使用注意(小结)
10-18
主要介绍了Vue.directive使用注意(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue.directive
lala_likesun的博客
12-15 2万+
vue.directive是我们除了内置的指令（如v-model和v-show）之外的自定义指令。自定义指令是对普通DOM元素进行的底层操作 1、vue.directive 有两个参数：id（string）和[definition](function|object) 2、vue.directive有5种钩子函数，分别是：bind, inserted ,update, componentUpdated, unbind 2.1、bind：只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的.
vue中directives的用法
热门推荐
请叫我李先生
06-26 8万+
vue中directives的用法 关于 vue 中 directives 的用法问题，详细可以参考vue官方对directives的解释 当前文章主要讲述directives怎么用，directives做权限按钮的功能 1. directives 怎么用 directives 在生命周期内用 export default { data() { ret...
VUE.directive
yanzhe6789的博客
03-14 509
例如 v-my-directive=“1 + 1” ， expression 的值是 “1 + 1”。参数2： 是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作。value:指令的绑定值，例如：v-mydirective=“1+1”，那么value的值是2。例如 v-my-directive:foo， arg 的值是 foo。注意： Vue中所有的指令，在调用的时候，都以 v- 开头 ，但是自定义时不需要v-开头。无论是全局还是私有的都可以都可以适用如下的简写形式。
Vue.directive
我的博客简介
12-07 305
总的来说，指令是Vue中的一个重要机制，其通过Vue内部的响应式机制，实现了在模板中简洁地声明式使用指令，并对DOM元素进行操作。指令钩子函数是在指令所绑定的元素插入到 DOM 中后执行的函数，它与 Vue.js 侦听器 Watcher 是订阅者和观察者的一种模式。指令函数包括两个参数：一个是指令绑定的元素，一个是指令绑定的对象，通过对这两个参数的操作，实现指令的功能。指令中最常用的参数包括el，binding，vnode。Vue在解析模板的过程中，会扫描模板中的指令，并将其转换成相应的模板渲染函数。
详解Vue.directive 自定义指令
10-17
Vue.directive 是 Vue.js 框架中用于创建自定义指令的全局 API。自定义指令允许开发者扩展 Vue 的基础功能，实现一些特定的 DOM 操作或复杂行为。下面我们将深入探讨这个话题。 首先，我们要理解什么是全局 API。...
Vue.directive自定义指令的使用详解
12-04
- 在Vue中，创建自定义指令使用`Vue.directive()`方法。以拖拽为例，我们可以定义一个名为`v-drag`的指令。在HTML中，通过`<div v-drag>`将该指令应用到元素上。 - 指令的生命周期中有多个钩子函数，比如`inserted...
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
01-19
在Vue中，自定义指令的生命周期，有5个事件钩子：1-bind 被绑定， 2-inserted 被插入， 3-update 开始更新， 4-componentUpdated 更新完成，5-unbind 解除绑定。我们可以设置指令在某一个事件发生时的具体行为。 ...
vue自定义指令实现方法详解
01-21
本文实例讲述了vue自定义指令实现方法。分享给大家供大家参考，具体如下： vue中的指令就是v-on v-bind v-show等等，那么自定义指令是什么呢？ 自己定义的指令就是自定义指令。 语法： Vue.directive(id, definition...
vue中directive
ssjjrr的博客
10-07 682
vue directive
Vue—视图中的Directive（指令）
成长永远没有尽头
03-24 430
在我们学习.net语言时，有.asp、.aspx页面，在Vue.js中也有类似的编程能力，但是因为Vue.js是一种JavaScript框架，所以只能与标签结合使用，叫做Directive（指令） 指令的原理： （1）用户在浏览器中输入网址，按回车键 （2）浏览器加载所有的资源（js、html内容），此时尚未解析 （3）浏览器加载Vue.js （4）Vue.js程序被执行，发现页面中的D...
vue的directive指令
mldwyy的博客
03-20 1346
1.directive的作用： 可以用于注册全局指令 2.directive的使用： 定义指令：这里的update表示在使用指令的结点更新时调用，还有 Vue.directive('指令名',{update(el,binding,vnode){}}) 使用指令： <div v-指令名='isLoading'>{{msg}}</div> Vue.directive('lo...
Vue自定义指令--Vue.directive
weixin_43581952的博客
10-11 225
Vue中内置了很多指令，如v-model、v-show、v-html等，但有时候我们可能会想为某个/某些元素添加特定的功能，这个时候就可以使用Vue提供的自定义指令来实现。在Vue官方文档中还提到动态指令参数的使用，通过设置指令参数来实现动态使用指令。如上述例子，通过设置动态指令参数可以实现同一指令对不同样式的设置。2、第二个参数表示该指令下的操作，可以是一个对象数据也可以是一个函数；1、第一个参数表示自定义指令的名称（不需要携带v-）；1、新建一个js文件，在js文件中定义全局指令`
Vue配置项之directives
最新发布
weixin_45134711的博客
06-12 1512
一、定义语法：directives:{} 指令名:配置对象或directives{指令名:回调函数}vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)bind：指令与元素成功绑定时调用。inserted：指令所在元素被插入页面时调用。update：指令所在模板结构被重新解析时调用。指令定义时不加v-，但使用时要加v-；指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
Vue.js中Directive知识
daxiwu6685的博客
12-07 140
近期所学的Vue.js这个MVVM前端技术缓解了我一直愁于前后端开发杂糅所带来的痛苦。今天就来说说关于Vue.js里面的Directive知识。 Directive Directive看上去虽然和Angular中的定义类似，Directive都是对DOM功能的一种拓展，但是Vue的Directive要弱的多。 因为，Vue Component本来就包括对DOM的操作，所以大多...
vue--directive自定义指令
大小都是愁的成长之路
04-04 873
概述：对底层DOM操作时，用自定义指令1、自定义指令.了解指令的组成部分.全局注册 Vue.directive('指令名’，{ 钩子函数 })；局部注册directives:{指令名：{} }.使用时，用v-指令名.钩子函数 bind(){} //只调用一次，指令第一次绑定到元素时调用 inserted(){} ...
Vue中 实现自定义指令（directive）及应用场景
明天也要努力的博客
01-22 6627
1.1 钩子函数 一个指令定义对象可以提供如下几个钩子函数 (均为可选)： bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 update 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。 compo...
vue自定义指令
weixin_30843605的博客
07-31 372
除了核心功能默认内置的指令（v-model和v-show），也可以注册自定义指令。 //注册一个全局自定义指令'v-focus' Vue.directive('focus', { //当被绑定的元素插入到DOM中时 inserted: function(el) { //聚焦元素 el.focus() } }) ...
Vue源码阅读（30）：Vue.directive、Vue.filter、Vue.component、Vue.use、Vue.mixin 源码解析
f18855666661的博客
09-14 500
今天和大家讲讲标题中五个全局 API 的源码，这些 API 的内部实现都很简单。 1，Vue.directive，Vue.filter，Vue.component 在这里，将这三个 API 放在一起讲，因为这三个 API 在源码中的实现是放在一起的，这三个 API 的功能也很相似，都是向 Vue.options 对象上注册添加或者获取指定的资源，这里的资源是指 指令、过滤器和组件，通过将这些资源注册到 Vue.options 对象上，可以使得后续创建的组件实例可以使用到这些资源。 官方文档请点击V.
Vue自定义指令详解与实战应用
Vue自定义指令directive是Vue.js框架中一个强大的功能，它允许开发者扩展HTML元素的行为，实现那些内置指令无法满足的特定需求。自定义指令主要解决的是在普通DOM元素上进行底层操作的场景，因此在使用时需谨慎考虑...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值