Vue 2.0学习笔记:自定义指令

在Vue中为了更好的操作DOM元素,其内置了一些指令,比如v-modelv-ifv-showv-textv-htmlv-forv-bind等。除此之外,Vue也允许注册自定义指令。这些自定义指令可以说我们对普通DOM元素进行底层操作。比如@SARAH DRASNER写的一篇有关于Vue自定义指令的文章,简单易懂。今天自己也仔细撸了一下Vue中怎么实现自定义的指令。

钩子函数

创建自定义指令,在Vue中一个指令定义对象可以提供下面几个钩子函数,而这几个钩子函数都是可选的:

  • bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
  • inserted:被绑定元素插入父节点时调用(仅保证父节点存在,但不一定已被插入文档中)
  • update:所在组件的VNode更新时调用,但是可能发生在其子VNode更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
  • componentUpdated:指令所在组件的VNode及其子VNode全部更新后调用
  • unbind:只调用一次,指令与元素解绑时调用

自定义指令

上图来自于《The Power of Custom Directives in Vue》一文。

来看一个简单的示例,看看这些钩子函数的触发时机。

至于怎么自定义一个指令,先不阐述。在Vue中通过Vue.directive('directiveName', {...})方式来注册一个指令。在实际调用的时候需要前面添加v-来使用。有关于这方面的细节,我们稍后再阐述。

Vue.directive('hello', {
    // 只调用一次,指令第一次绑定到元素时调用
    bind: function (el) {
        console.log('触发bind钩子函数!')
    },
    // 被绑定元素插入父节点时调用
    inserted: function (el) {
        console.log('触发inserted钩子函数!')
    },
    // 所在组件的`VNode`更新时调用,但是可能发生在其子元素的`VNode`更新之前
    update: function (el) {
        console.log('触发update钩子函数!')
    },
    // 所在组件的`VNode`及其子元素的`VNode`全部更新时调用
    componentUpdated: function (el) {
        console.log('触发componentUpdated钩子函数!')
    },
    // 只调用一次,指令与元素解绑时调用
    unbind: function (el) {
        console.log('触发unbind钩子函数!')
    }
})

let myComponent = {
    template: '<h1 v-hello>{{ message }}</h1>',
    props: {
        message: String
    }
}

let app = new Vue({
    el: '#app',
    data () {
        return {
            message: 'Hello! 大漠'
        }
    },
    components: {
        myComponent: myComponent
    },
    methods: {
        update: function () {
            this.message = 'Hi! 大漠'
        },
        uninstall: function () {
            this.message = ''
        },
        install: function () {
            this.message = 'Hello!W3cplus'
        }
    }
})

<div id="app">
    <my-component v-if="message" :message="message"></my-component>
    <div class="actions">
        <button @click="update">更新</button>
        <button @click="uninstall">卸载</button>
        <button @cl
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/vue/custom-directive.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部