vue自定义指令
source link: https://blog.csdn.net/weixin_47730573/article/details/112131494
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
自定义指令
自定义指令分为全局自定义指令和局部自定义指令
全局自定义指令注册：
html：
<div id="app">
<input type="text" v-focus >
</div>
Vue.directive("focus", {
inserted: function (el) {
el.focus();
el.style.border = "4px solid pink"
},
})
局部自定义指令注册：
html代码同上
js:
new Vue({
el: "#app",
directives:{
focus:{
inserted(el){
el.focus()
el.style.color='red'
}
}
}
自定义指令一共有五个钩子函数
bind（） 指令第一次绑定时调用 只调用一次
inserted() 被绑定元素被插入父节点是调用，
update() 被绑定元素所在模板更新时调用，不论绑定值是否发生变化
componentUpdated() 被绑定元素模板完成一次更新周期是调用
unbind() 指令与元素解绑是调用 只调用一次
输出的钩子函数的参数：
name 是自定义事件名
rawName 绑定方法
Recommend
-
113
本文同步发表在富途web开发团队博客 futu.im/posts/2017-… 在你初次接触一个新的Javascript框架时，会像第一次进糖果店的孩子一样。给啥拿啥，而更直接点，有些东西可以让你更容易成为一个开发者。不可避免的是，我们在用框架时都会有一个同
-
102
在你初次接触一个新的Javascript框架时，会像第一次进糖果店的孩子一样。给啥拿啥，而更直接点，有些东西可以让你更容易成为一个开发者。不可避免的是，我们在用框架时都会有一个同感，就是总有些场景是框架不能帮我们完成的。 Vue框架的漂亮之处在于它的功能非常...
-
16
分享8个非常实用的Vue自定义指令爱前端不爱恋爱微信公众号:web前端学习圈，关注领取85G前端全套系统教程
-
7
通过自定义 Vue 指令实现前端曝光埋点 2021-03-30 发布于
-
7
1、元素点击范围扩展指令 v-expandClick使用该指令可以隐式...
-
9
Vue 自定义指令实现按钮级别的权限控制 兰玉磊 • 2021年5月29日 23:48 • Web • 阅读 540在我们的日常开发过程中，通常...
-
6
8个非常实用的Vue自定义指令 2022年02月21日 06:48 · 阅读 4287 在 Vue，除了核心功能默认...
-
7
Vue3表单、自定义指令 - YaPiBlog表单值绑定及事件 v-model 会忽略所有表单元素的 value、checked、selected 属性的初始值，使用的是 data 选项中声明初始值。 text 和 textarea 元素使用 value 属性和 input 事件 checkbox...
-
5
在 Vue 中，指令是直接编辑 DOM 的最佳方法之一。 例如 v-if、v-show、v-bind 等。如果您使用过 Vue，那么您一定对它们很熟悉。 正如您可能猜到的，Vue 自定义指令是 Vue 让我们为项目构建额外指令的方式。它...
-
1
TienChin 项目前端是 Vue3，前端有这样的一个需求：有一些前端页面上的按钮要根据用户的权限来决定是否展示出来，如果用户具备相应的权限，那么就展示对应的按钮；如果用户不具备对应的权限，那么按钮就隐藏起来。大致上就这样一个需求。看到这个需求，可能有...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK