Vue自定義指令及實現圖片懶加載指令

一. 速識概念：

在我們使用 Vue 的過程中，遇到了很多方便我們操作的vue內置指令，以 v-xxx 表示。比如有 v-module，v-for，v-if，v-show 等等，每個指令都能實現一些相對應的功能。但是，在實際的開發過程中，可能這些內置指令并不能滿足所有的需求，這時候，就需要用到 Vue 給我們提供的一個強大又靈活的功能「 自定義指令 」。

同樣，vue自定義指令可以分為全局注冊指令和局部注冊指令。下面我將以最簡單的例子帶你認識vue自定義指令。

二.全局注冊指令：

比如，我們想要定義一個 v-color=" " 指令 ，標簽引用這個指令后可以改變自身背景顏色。一個全局注冊指令的基本語法如下：

Vue.directive('color',{ bind(){}, inserted(){}, update(){}, componentUpdated(){}, unbind() })

第一個參數，color 為自定義指令的名稱，不用帶 v- 。第二個參數為一個對象，其中有5個鉤子函數，你可以類似于vue的生命周期鉤子函數，它們也是被綁定元素各個周期會觸發的鉤子函數。每個的執行期間如下：

bind()：只調用一次，指令第一次綁定到HTML元素時調用。在這里可以進行一次性的初始化設置。

inserted()：當指令綁定的元素插入到父節點中的時候觸發。

update()：當指令綁定的元素狀態/樣式、內容(這里指元素綁定的 vue 數據) 發生改變時觸發。

componentUpdated()：當 update() 執行完畢之后觸發。

unbind()：只調用一次，指令與元素解綁時調用。

其實，我們最常用的就是 bind（）和 inserted（），也可以理解為在 bind（）里設置被綁定元素的css樣式，在 inserted（）里設置被綁定元素的 js 操作。

我們的 v-color=" " 指令 ，標簽引用這個指令后可以改變自身背景顏色，只定義bind（）函數就行，如下：

------------------------------------------- Vue.directive("color", { bind(el, binding) { console.log(el); console.log(binding); }, });

其中，每個鉤子函數都有4個參數，我們只討論 el 和 binding ，打印看看是什么：

可以看到，el 就是使用該指令的元素，而binding為一個對象，它保存著很多值，根據vue官方文檔，其屬性值包括：

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 }。

那么就很簡單了，我們想利用 v-color 自定義指令把背景顏色改為紅色可以如下設置：

------------------------------------------- Vue.directive("color", { bind(el, binding) { el.style.cssText = `background-color:${binding.value}`; }, });

效果成功：

函數簡寫形式：

在很多時候，你可能想在 bind 和 update 時觸發相同行為，而不關心其它的鉤子。這時候函數可以簡寫如下：

Vue.directive("color", function (el, binding) { el.style.cssText = `background-color:${binding.value}`; });

三.局部注冊指令：

上面我們定義的全局自定義指令是在Vue實例上定義的，全局可以，如果我只想在某個組件上使用也是可以的，vue組件中規定了directives方法，與data和methods這些同級別，如下：

-------------------------------------- var app = new Vue({ el: "#app", data: {}, directives: { color: { bind(el, binding) { el.style.cssText = `background-color:${binding.value}`; }, }, }, });

可以看到跟全局也是差不多寫法，就是換個位置寫而已。

四：圖片懶加載：

我們可以用自定義指令實現圖片懶加載。這里只介紹寫法，關于圖片懶加載原理可以看我另一篇文章，對懶加載原理和原生js實現分析的很全面：前端必會的圖片懶加載，你造嗎？ 。地址 https://auroras.blog.csdn.net/article/details/119789741 看完了再回來看這里就一目了然啦~

下面將用到 Intersection Observer 觀察器接口實現懶加載。

1.建一個HTML單頁面，引入vue，然后new一個vue實例，變量http://m.bai1xia.com/news/zb_users/upload/2022/05/20220530161731_52484.為圖片默認地址，arrSrc數組為圖片真實地址：

var app = new Vue({ el: "#app", data: { http://m.bai1xia.com/news/zb_users/upload/2022/05/20220530161731_52484.: "img/0.png", arrSrc: [ "img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg", "img/6.jpg", "img/7.jpg", "img/8.jpg", ], }, });

2.使用 v-for 渲染 arrSrc 數組，但是圖片的src都設為http://m.bai1xia.com/news/zb_users/upload/2022/05/20220530161731_52484.：

此時頁面效果如下：

3.定義 v-lazy = “圖片地址” 自定義指令：

實現：

Vue.directive("lazy", { inserted(el, binding) { //定義一個觀察器，entries為狀態改變元素的數組 let observer = new IntersectionObserver((entries) => { // 遍歷 for (let i of entries) { // 如果改元素處于可視區 if (i.isIntersecting > 0) { // 獲取該元素 let img = i.target; // 重新設置src值 img.src = binding.value; //取消對該元素的觀察 observer.unobserve(img); } } }); // 為 img 標簽添加一個觀察 observer.observe(el); }, });

效果，可以看到右邊控制臺，當圖片出現在可視區時才加載：

五.總結：

上面就是vue自定義指令的一些簡單用法與應用的全部內容啦。總的來說，Vue 給我們提供的一個強大又靈活的功能「 自定義指令 ，可以分為全局注冊指令和局部注冊指令。全局注冊為 Vue.directive(‘name’,{ bind(el,binding){} ,inserted(el,binding){}})。其中，el為該元素，binding為一個對象等等。當然，vue自定義指令肯定沒這么簡單，在一些復雜用法上是很難的，只能說學無止境了~

下次見啦~

Vue

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。