vue中如何自定义指令?

除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。下面我们就来看一下在vue中如何自定义指令。

使用 Vue.directive(id, [definition]) 定义全局的指令来进行自定义指令

参数1 : 指令的名称,注意,在定义的时候,指令的名称前面,不需要加 v-前缀,但是: 在调用的时候,必须在置顶的名称前加上 v-前缀来进行调用

参数2: 是一个对象, 这个对象身上,有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作。

Vue.directive("focus", {
            // 注意:在每个函数中, 第一个参数永远是el, 表示被绑定了指令的那个元素,这个el参数,是一个原生的JS对象
            bind: function(el){ // 每当指令绑定到元素上的时候,会立即执行这个bind函数,只执行一次

            },
            inserted: function(el){ // inserted 表示元素插入到DOM中的时候,会执行inserted函数【触发一次】
                el.focus()
            },
            updated: function(el) { // 当VNode更新的时候,会执行updated,可能会触发多次
                
            },
        })

调用:

<!-- 注意: Vue中所有的指令,在调用的时候,都以 v- 开头 -->
                    <input type="text" class="form-control" v-model="keywords" v-focus>

更多相关知识请关注前端学习网站

以上就是vue中如何自定义指令?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏