VUE的自定义指令


前言

VUE除了核心功能默认内置的指令 (v-modelv-show),Vue
也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM
元素进行底层操作,这时候就会用到自定义指令。


提示:以下是本篇文章正文内容,下面案例可供参考

一、VUE自定义指令的创建?

1.全局自定义指令创建

<div id="app">
        <input type="text" v-focus>//使用v-focus自定义指令
</div>
    
<script>
    // 注册一个全局自定义指令 `v-focus`
    Vue.directive('focus', {
        inserted: function (el) {
            el.focus()
        }
    })

    let vm = new Vue({
        el:"#app",
        data:{

        }
    })
</script>

上面创建了一个v-focus获焦指令,可以看到我们使用了directive关键字,directive有两个参数。

第一个参数是名字,需要加双引号(为你的自定义指令取名)。

第二个参数为你具体想要执行的指令,directive中除了有inserted之外还有bindupdate等钩子函数,但我们一般将指令写在inserted中。

inserted方法携带一个参数,这个参数就是我们的DOM页面元素,这个参数是必带的,方法中我们给这个DOM页面元素绑定了一个focus获焦的函数方法,至此我们的全局自定义指令创建完毕。

下面再通过一个VUE实例绑定我们的页面DIV,并在页面的DIV中加入V-focus来使用即可。

这样就实现了我们全局自定义指令的创建与使用,自定义指令也是有全局与局部之分的,如果你不想这个指令让其他实例使用,那么就可以创建一个局部的自定义指令

2.局部自定义指令创建

我们仍然使用focus获焦事件,创建局部自定义指令与全局自定义指令的区别:
1、局部变量写在一个VUE实例中
2、directives末尾加不加s。创建局部变量需要加s,全局则不需要

<div id="app2">
        <input type="text">
    </div>

<script>
let vm2 = new Vue({
        el: "#app2",
        data: {

        },
     //创建局部指令directives需要加s
        directives: {
            focus: {
                inserted: function (el) {
                    el.focus()
                }
            }
        }
    })
</script>

总结

本篇内容至此已结束,如有错误,欢迎评论指出。共勉~

相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页