詳解在Vue中通過自定義指令獲取dom元素
vue.js 是數(shù)據(jù)綁定的框架,大部分情況下我們都不需要直接操作 DOM Element,但在某些時候,我們還是有獲取DOM Element的需求的;
在 vue.js 中,獲取某個DOM Element常用的方法是將這個元素改成一個組件 (component),然后通過 this.$el
去獲取,但是在一些很小的項目里,在一些沒有使用 webpack 等構(gòu)建工具的項目中,創(chuàng)建一個組件并不是那么值得,所以 vue 提供了另一種操作DOM元素的方式,就是自定義指令 (directive) ;
自定義指令功能在DOM Element的生命周期內(nèi)提供了不同的鉤子函數(shù),并允許我們監(jiān)聽指令綁定的數(shù)據(jù)的變化,但是它也是有缺點的,就是在指令的鉤子函數(shù)內(nèi)無法通過 this
來訪問當前 vue 實例,也就無法進一步進行復雜的操作(雖然一般不需要什么復雜的操作),在 vue 的鉤子函數(shù) (lifecycle hook) 和方法 (method) 中也無法像 this.$el
那樣輕易的訪問到自定義指令綁定的DOM元素;
不過只要通過一點點變通的做法,就可以突破這個限制:
HTML代碼:
<div id="app"> <span class='test' v-run="register('test1')"></span> <p class='test' v-run="register('test2')"></p> </div>
JavaScript代碼:
const vm = new Vue({ el:'#app', data : { elements : {} }, directives : { run (el, binding) { if (typeof binding.value == 'function') binding.value(el); } }, methods : { register (flag) { return (el)=>{ this.elements[flag] = el; } } }, beforeMount () { console.log(this.elements.test1); //=> undefined }, mounted () { console.log(this.elements.test1); //=> the span DOM Element console.log(this.elements.test2); //=> the p DOM Element } })
如代碼所示,建立一個名為 run
的自定義指令,運行綁定的方法,并將當前 DOM Element 作為參數(shù)傳入;
同時建立一個名為 register
的方法,接收一個 flag 參數(shù),并根據(jù)這個參數(shù)返回一個用于將傳入?yún)?shù)注冊到 this.elements
對象中的閉包函數(shù);
將寫好的 run 指令和 register 方法搭配使用,就可以把想要的 DOM 注冊進this.elements,并在 hook 或者 method 中十分方便的訪問;
注意:自定義指令將會在DOM元素插入 Document 時,也就是組件 mount 時首次執(zhí)行,所以在此之前,比如 beforeMount
鉤子中是無法使用的,這點也和 this.$el
一致,詳情可以查看官方文檔中的生命周期圖示;
其實也很好理解啦……在 mount 之前,根本就沒有這個實際的 DOM 元素,怎么可能訪問的到……(:з)∠)
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
VsCode工具開發(fā)vue項目必裝插件清單(推薦!)
對于很多使用vscode編寫vue項目的新手同學來說,可能不知道使用什么插件,下面這篇文章主要給大家介紹了關(guān)于VsCode工具開發(fā)vue項目必裝插件的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-09-09vueCli?4.x升級5.x報錯:Progress?Plugin?Invalid?Options的解決方法
本文主要介紹了vueCli?4.x升級5.x報錯:Progress?Plugin?Invalid?Options的解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-01-01