>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 15972 个阅读者 刷新本主题
 * 贴子主题:  Vue自定义指令的用法 回复文章 点赞(0)  收藏  
作者:sunshine    发表时间:2021-02-04 11:58:09     消息  查看  搜索  好友  邮件  复制  引用

      用了这么就Vue,还没用过自定义指令(逃...),看了下文档,所以总结一下用法,其实现在疑惑的重点不是具体用法,而是:

1.在什么场景下用?毕竟之前这么久都没用过不也过来了。

2.文档中提到的函数简写,是在指令的哪个生命周期调用。

首先总结一下简单用法

Vue自定义指令和Vue中其他的大多数对象一样,有 全局 局部两种注册方法

全局

Vue.driective('orange',{ //注册了一个质量 'v-orange'
    //提供以下5个钩子函数,每个钩子函数提供四个参数
  bind: function(el,binding,vnode,oldVnode) {
    //只调用一次,指令第一次绑定到元素时调用,在这里可以进行一次性的初始化设置
  },
  inserted: function(el,binding,vnode,oldVnode) {
    //被绑定元素插入父节点时调用(仅保证父节点存在,但不一定被插入文章中)
  },
  update: function(el,binding,vnode,oldVnode) {
    //所在组件的Vnode更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
  },
  conponentUpdated: function(el,binding,vnode,oldVnode) {
    //指令所在组件的vnode及其子vnode全部更新后调用
  },
  unbind: function(el,binding,vnode,oldVnode) {
    //指令与元素解绑时调用,只调用一次
  }
})

局部

directive: {
  orange: {
    bind:function() {
    },
    inserted: function() {
    }
    ...同样五个钩子函数
  }
}

钩子函数的参数

el: 指令所绑定的dom元素,可以只用来直接操作dom,比如:el.style.color = 'red'

binding: 还有下图为列出的一个参数 oldValue:指令绑定的前一个值,仅在  update 和  componentUpdated 钩子中可用。无论值是否改变都可用。    

     <div v-orange>{{message}}</div>
    <div v-orange="1+2">{{message}}</div>
    <div v-orange:thisIsArg="1+2">{{message}}</div>
    <div v-orange:thisIsArg.foo="1+2">{{message}}</div>

     directives: {
      orange: {
        bind: function(el,binding,vnode,oldVnode) {
          console.log(binding)
        }
      }
    }

             点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小

钩子函数的binding参数的详情.png

     vnode

Vue 编译生成的虚拟节点。移步 VNode API来了解更多详情

oldVnode

上一个虚拟节点,仅在  update 和  componentUpdated 钩子中可用。

函数的简写

            点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小

函数简写.png

     其实写到这里已经很清楚了,函数的简写就是在 bind和 update两个钩子时期都调用。

总结

关于自定义指令使用的时机: 然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。


----------------------------
原文链接:https://www.jianshu.com/p/5d0da3a5c722

程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2021-02-08 22:37:29 重新编辑]
  Java面向对象编程-->变量的作用域和初始化
  JavaWeb开发-->JSP中使用JavaBean(Ⅱ)
  JSP与Hibernate开发-->数据库事务的并发问题的解决方案
  Java网络编程-->通过JavaMail API收发邮件
  精通Spring-->绑定CSS样式
  Vue3开发-->CSS过渡和动画
  聊聊Nodejs中的模块化和事件循环
  vue-min-picker普通选择器,日期选择器,省市区选择器,适用...
  史上最全的web前端面试题汇总及答案
  JavaScript的HTML DOM Parameter 对象
  JavaScript中的HTML DOM Label 对象
  JavaScript的History 对象
  jQuery UI 如何使用部件库
  CSS3的响应式 Web 设计:媒体查询
  HTML5 地理定位
  JavaScript 库
  JavaScript 函数参数
  JavaScript 的字符串以及处理方法
  jQuery Mobile 方向改变事件
  jQuery Mobile 安装
  jQuery Mobile 简介
  更多...
 IPIP: 已设置保密
树形列表:   
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。