vue directive 指令开发

为什么要写指令?

directive 和 component 的区别是什么?

指令适合处理简单的数据和对DOM的一些操作,v-focus,v-touch这种行为的一些操作适合用指令去实现。

涉及到复杂的行为,尤其是要接受各种选项的,那么就适合在 component 中去实现

https://github.com/vuejs/vue/issues/862

全局指令

// 注册一个全局自定义指令 `v-focus` 
Vue.directive('focus', { 
  // 当被绑定的元素插入到 DOM 中时…… 
  inserted: function (el) { 
    // 聚焦元素 
    el.focus() 
  } 
})

局部指令

组件中设置一个 directives 的选项

directives: { 
  focus: { 
    // 指令的定义 
    inserted: function (el) { 
      el.focus() 
    } 
  } 
}

全局指令插件写法

!function () { 
    let vueLazy = {}; 

    // options vue.use(xxx,{}) 传入额外参数
    vueLazy.install = function (Vue, options) { 
        Vue.directive('lazy', { 
            bind(el, binding) { 

            }, 
            update(el, binding) { 

            }, 
            unbind(el) { 

            } 
        }); 
    }; 

    if (typeof exports == "object") { 
        module.exports = vueLazy; 
    } else if (typeof define == "function" && define.amd) { 
        define([], function () { 
            return vueLazy 
        }); 
    } else if (window.Vue) { 
        window.vueLazy = vueLazy; 
        Vue.use(vueLazy); 
    } 
}();

执行周期-钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选):

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

Gif展示这5个的执行策略

html部分

<button @click="clickMe">click</button> 
<div class="block" v-lazy:class="className" v-if="status"> 
    father className 
    <div v-if="status2"> 
        child 
    </div> 
</div>

Js 部分

new Vue({ 
    el: '#demo', 
    data: function () { 
        return { 
            className: 'customClass', 
            imgSrc: 'https://raw.githubusercontent.com/github/explore/6c6508f34230f0ac0d49e847a326429eefbfc030/topics/gulp/gulp.png', 
            status: false, 
            status2: false 
        } 
    }, 
    methods: { 
        clickMe() { 
            this.status = !this.status; 
            setTimeout(()=> { 
                this.status2 = !this.status2 
            },2000); 
        } 
    } 
})
上一篇 >:如何区分 babel polyfill 和 transform-runtime 下一篇 >:酷狗铃声xss漏洞

1 条回应“vue directive 指令开发”

  1. 毛毛

    有用 :mrgreen:

发表评论