本文实例讲述了vue自定义指令实现方法。分享给大家供大家参考,具体如下:
vue中的指令就是v-on v-bind v-show等等,那么自定义指令是什么呢?
自己定义的指令就是自定义指令。
语法:
Vue.directive(id, definition)
这里可以参考vue中的指令
<h1 v-if="yes">Yes</h1> 其中,if就是指令ID,yes是expression
Vue.directive()传入接受两个参数,id是指指令ID,definition是指定义对象。其中,定义对象可以提供一些钩子函数。
钩子函数:
- bind
- inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
- update
- componentUpdated
unbind
钩子函数参数
- el:指令所绑定的元素,可以用来直接操作 DOM 。
- binding:一个对象,包含以下属性:
比如 name, value ,expression ,rawName等等
为了更好的操作DOM
例子如下,让p标签的颜色变成红色。给p标签加入了v-color 的自定义指令。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <p v-color="red">我是自定义指令</p> red绑定到data里面的变量 <p v-color="'blue'">我是自定义指令</p> 也支持字符串 </div> <script src='vue.js'></script> <script> // 注册一个全局的自定义指令 Vue.directive('color', { inserted: function (el,binding) { console.log(el,binding) el.style.color = binding.value } }) new Vue({ el:'#app', data:{ red:'red' } }) </script> </body> </html>
局部注册例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <p v-color="red">我是自定义指令</p> </div> <script src='vue.js'></script> <script> new Vue({ el:'#app', data:{ red:'red' }, directives: { color: { // 指令的定义 inserted: function (el,binding) { el.style.color = binding.value } } } }) </script> </body> </html>
比如给侧边栏做一个鼠标滚轮事件。
但是,这样需要兼容写法,粗暴的给元素添加onmousewheel是不对的,因为在火狐浏览器下根本不会执行。
怎么办?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #scrollwrap { width:200px; height:800px; background: #ccc; } </style> </head> <body> <div id="app"> <div id="scrollwrap" v-scrollfn="mousewheel">我是侧边栏</div> </div> <script src='vue.js'></script> <script> new Vue({ el:'#app', data:{ red:'red', mousewheel: '滚轮事件' }, directives: { scrollfn: { // 指令的定义 inserted: function (el,binding) { var userAgent = window.navigator.userAgent // 通过userAgent拿到 if (userAgent.indexOf('Firefox')> -1) { console.log('是火狐浏览器') el.addEventListener('DOMMouseScroll',function (e){ console.log(e.detail) }) } else { console.log('不是火狐') el.addEventListener('mousewheel',function (e){ console.log(e.wheelDelta) }) } } } } }) </script> </body> </html>
希望本文所述对大家vue.js程序设计有所帮助。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 华少翌.2005-华少翌【中唱艺能】【WAV+CUE】
- 群星《十二女声Ⅱ》[WAV/CUE/分轨][527MB]
- 大自然音乐系列《漫步在山裡》[WAV/CUE/分轨][502.8MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]
- 史依弘《史依弘交响乐京剧演唱专辑HQ》头版限量编号[WAV+CUE]
- 曼丽2020《女人三十风继续吹》HQCD[WAV+CUE]
- 曼丽2021《女人三十2雾之恋》HQCD[WAV+CUE]
- 隔壁老樊.2019-我曾【好听音乐】【FLAC分轨】
- 高林生.1993-牵挂你的人是我【白天鹅】【WAV+CUE】
- 洪卓立.2012-找个懂我的女孩(国专)【英皇娱乐】【WAV+CUE】
- 曼丽2022《女人三十3晚秋》HQCD[WAV+CUE]
- 曼丽2018《女人三十4冬天》HQCD[WAV+CUE]
- 柏菲-《好歌30年壹》限量开盘母带ORMCD[低速原抓WAV+CUE]
- 大自然音乐系列《水舞》[WAV/CUE/分轨][424.3MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]