摘要:指令綁定的前一個值,僅在和鉤子中可用。字符串形式的指令表達式。上一個虛擬節點在上可根據需要定義一些鉤子函數只調用一次,指令第一次綁定到元素時調用。指令的值可能發生了改變,也可能沒有。
前文
先來bb一堆廢話哈哈.. 用vue做項目也有一年多了.除了用別人的插件之外.自己也沒嘗試去封裝指令插件之類的東西來用. 剛好最近在項目中遇到一個問題.(快速點擊按鈕多次觸發多次綁定的方法),于是就想說自己封裝一個 自定義指令來解決這個問題,于是便有了自己的第一個vue自定義指令 vue-reclick .
vue-reclick 傳送門
哈哈,好了!廣告打完了,開始進入正題(等一下,聽說star有獎哦)...
1.使用場景在vue 2.0中,有的情況下,你需要對普通DOM元素進行底層操作,這時候就需要用到自定義指令!2.api詳解
其實關于vue自定義指令的使用 vue官方文檔已經說的非常清楚.這里只是簡單的照搬,哦不,講一下 (23333..)..
1.首先創建一個指令自定義對象directObj。 let directObj = {}. 2.vue為所有指令的鉤子函數都提供一些函數參數。 let args = { el:"指令所綁定的元素,可以用來直接操作 DOM ", binding:{ name:"指令名,不包括 v- 前綴。", value:"指令的綁定值,例如:v-my-directive="1 + 1" 中,綁定值為 2。", oldValue:"指令綁定的前一個值,僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。", expression:"字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中,表達式為 "1 + 1"", arg:"傳給指令的參數,可選。例如 v-my-directive:foo 中,參數為 "foo"", modifiers:"一個包含修飾符的對象。例如:v-my-directive.foo.bar 中,修飾符對象為 { foo: true, bar: true }。", vnode:"Vue 編譯生成的虛擬節點。", oldVnode:"上一個虛擬節點" } } 3.在directObj上可根據需要定義一些鉤子函數 directObj.bind = function({...args }){ //只調用一次,指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。 } directObj.inserted= function({...args }){ //被綁定元素插入父節點時調用 (僅保證父節點存在,但不一定已被插入文檔中)。 } directObj.update= function({...args }){ //所在組件的 VNode 更新時調用,但是可能發生在其子 VNode 更新之前。 指令的值可能發生了改變,也可能沒有。 但是你可以通過比較更新前后的值來忽略不必要的模板更新 } directObj.componentUpdated= function({...args }){ //指令所在組件的 VNode 及其子 VNode 全部更新后調用。 } directObj.unbind= function({...args }){ //只調用一次,指令與元素解綁時調用。 } 4.注冊自定義指令 (1).全局注冊: Vue.directive("指令名稱","指令對象"); 例:Vue.directive("reclick",directObj); 注意:全局注冊自定義指令需在實例化Vue之前. (2).局部(組件)注冊: export default{ directives:{ "指令名稱":"指令配置" } } 例: export default{ directives:{ "reclick":directObj } }3.封裝自定義指令
好了,簡單的講(抄)完 自定義指令相關的api,接下來我們通過vue-reclick來簡單的講解一下如何封裝一個vue自定義指令吧. 由于vue-reclick 只是用來解決一個問題的小東西,所以代碼也相對簡單,這里主要講一個封裝自定義指令的過程. 下面我們先來看下vue-reclick的源碼:
;(function() { /** * 函數防抖 * * @param {any} method 方法名 */ function debounce(method) { clearTimeout(method.tId); method.tId = setTimeout(function() { method.call(); }, 200); } /** * 事件綁定 * * @param {any} element 綁定dom * @param {any} event 事件類型 * @param {any} listener 方法 */ function addEvent(element, event, listener) { if (element.addEventListener) { element.addEventListener(event, listener, false); } else if (element.attachEvent) { element.attachEvent("on" + event, listener); } else { element["on" + event] = listener; } } var vueReclick = {}; var reclick = { bind: function(el, binding) { addEvent(el, "click", function() { debounce(binding.value); }); }, unbind: function(el) { addEvent(el, "click", function() {}); } }; vueReclick.install = function(Vue) { Vue.directive("reclick", reclick); }; if (typeof exports == "object") { module.exports = vueReclick; } else if (typeof define == "function" && define.amd) { define([], function() { return vueReclick; }); } else if (window.Vue) { window.vueReclick = vueReclick; Vue.use(vueReclick); } })();
1.將所有代碼包裹在一個立即執行函數之中. 立即執行函數有自己的作用域,可以避免變量沖突與污染. 將獨立的功能封裝在自包含模塊中. 2.vue-reclick功能相關的代碼這里簡單說明下. 這里封裝了兩個方法(1.throttle,2.addEvent) 一個指令配置對象(reclick) 在reclick對象里定義了bind方法,在指令綁定到dom的時候,在dom上綁定點擊事件,并獲取指令綁定的方法名稱. 在觸發點擊事件的時候通過函數節流的方法來調用該方法,從而解決短時間快速點擊觸發多次方法的問題. 在reclick對象里定義了unbind方法,在指令與dom解綁的時候,將傳入方法與dom進行解綁.. 3.定義一個vueReclick插件對象,并在該對象上定義一個install方法. (Vue.js 的插件應當有一個公開方法 install 。這個方法的第一個參數是 Vue 構造器) 4.在install方法里全局注冊指令 vueReclick.install = function(Vue) { Vue.directive("reclick", reclick); }; 5.兼容多種模塊規范暴露該插件 if (typeof exports == "object") { module.exports = vueReclick; } else if (typeof define == "function" && define.amd) { define([], function() { return vueReclick; }); } else if (window.Vue) { window.vueReclick = vueReclick; Vue.use(vueReclick); } 6.到這一步,其實一個簡單的自定義組件就已經大功告成了. 7.最后.我們來講一下如何在項目中引入vueReclick并使用. (1).非node環境中 在第5點我們在else if(window.Vue)中其實已經Vue的全局方法來使用該插件. 所以我們可以直接在項目中使用該指令. 例:https://github.com/webfansplz/vue-reclick/blob/master/example/index.html (2).node環境中 我們可以在項目入口文件中引入該插件,然后全局使用它,下面我們會講解如何將插件發布到Npm. 例: import vueReclick from "vue-reclick"; Vue.use(vueReclick);4.將封裝好的插件發布到npm.
1.在Npm官網注冊一個賬號 2.在項目目錄下 使用npm login 登錄. 3.在項目目錄下 使用npm publish 上傳插件 4.大功告成,這樣以后我們在所有項目中就都可以使用npm install 來下載我們自己封裝好的插件啦!.
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/90416.html
摘要:仿網易云音樂項目地址來源感謝讓我能用喜歡的東西做一個屬于自己的播放器源碼地址不要臉的求哈哈哈項目預覽端按切換手機調試模式效果更佳移動端可直接掃碼技術棧文件結構構建服務和配置項目不同環境的配置項目目錄項目入口文件項目配置文件靜態資源生產目錄 仿網易云音樂(webapp) 項目地址 (project address) api來源 感謝binaryify讓我能用喜歡的東西做一個屬于自己的...
摘要:在解析完其構造函數上的之后,需要把構造函數上的和實例化時傳入的進行合并操作并生成一個新的。檢查組件名稱是否合法首先看傳入的三個參數,,這三個參數分別代表的是該實例構造函數上的實例化時傳入的實例本身。 前幾篇文章中我們講到了resolveConstructorOptions,它的主要功能是解析當前實例構造函數上的options,不太明白的同學們可以看本系列的前幾篇文章。在解析完其構造函數...
摘要:前端面試題總結持續更新中是哪個組件的屬性模塊的組件。都提供合理的鉤子函數,可以讓開發者定制化地去處理需求。 前端面試題總結——VUE(持續更新中) 1.active-class是哪個組件的屬性? vue-router模塊的router-link組件。 2.嵌套路由怎么定義? 在 VueRouter 的參數中使用 children 配置,這樣就可以很好的實現路由嵌套。 //引入兩個組件 ...
摘要:組件是最強大的功能之一。組件可以擴展元素,封裝可重用的代碼。驗證組件可以為指定驗證要求。以下實例中子組件已經和它外部完全解耦了。它所做的只是觸發一個父組件關心的內部事件。實例如果你想在某個組件的根元素上監聽一個原生事件。 組件(Component)是 Vue.js 最強大的功能之一。 組件可以擴展 HTML 元素,封裝可重用的代碼。 組件系統讓我們可以用獨立可復用的小組件來構建大型應用...
摘要:今天就來介紹一下如何利用的自定義指令來開發一個表單驗證插件的過程。按照這種方式就能夠使用自己開發的這個表單校驗插件。這段時間在進行一個新項目的前期搭建,新項目框架采用vue-cli3和typescirpt搭建。因為項目比較輕量,所以基本沒有使用額外的ui組件,有時候我們需要的一些基礎組件我就直接自己開發了。今天就來介紹一下如何利用vue的自定義指令directive來開發一個表單驗證插件的過...
閱讀 1225·2021-11-11 16:54
閱讀 877·2021-10-19 11:44
閱讀 1337·2021-09-22 15:18
閱讀 2445·2019-08-29 16:26
閱讀 2946·2019-08-29 13:57
閱讀 3094·2019-08-26 13:32
閱讀 1081·2019-08-26 11:58
閱讀 2328·2019-08-26 10:37