詳解vue中v-bind:style效果的自定義指令
自定義指令
1.什么是自定義指令
以 v- 為前綴，然后加上自己定義好的名字組成的一個指令就是自定義指令。為什么要有自定義指令呢？在有些時候，你仍然需要對普通的DOM元素進行底層的操作，這個時候就可以用到自定義指令。
2.自定義指令的語法
全局自定義指令
// 注冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
// 當(dāng)被綁定的元素插入到 DOM 中時……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
局部自定義指令
directives: {
focus: {
// 指令的定義
inserted: function (el) {
el.focus()
}
}
}
3.鉤子函數(shù)
看了上述的代碼，如果你從來沒接觸過這類內(nèi)容，你可能會很生疏，下面我給大家講講其每一步所需要掌握的東西
首先是鉤子函數(shù)：
bind ：只會調(diào)用一次的函數(shù)，表示指令第一次綁定元素時調(diào)用
inserted ：被綁定元素插入到父節(jié)點時調(diào)用(僅保證父節(jié)點存在，但不一定已被插入文檔中)。
update ：所在組件的 VNode 更新時調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。
componentUpdated ：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
unbind ：只調(diào)用一次，指令與元素解綁時調(diào)用。
然后我們看看鉤子函數(shù)中的參數(shù)列表：
el：指令所綁定的元素，可以用來直接操作 DOM 。
binding：一個對象，包含以下屬性：
name：指令名，不包括 v- 前綴。
value：指令的綁定值，例如：
v-my-directive="1 + 1" 中，綁定值為 2。
oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。expression：字符串形式的指令表達式。例
如 v-my-directive="1 + 1" 中，表達式為 "1 + 1"。arg：傳給指令的參數(shù)，可選。
例如 v-my-directive:foo 中，參數(shù)為 "foo"。
modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。vnode：Vue 編譯生成的虛擬節(jié)點。
oldVnode：上一個虛擬節(jié)點，僅在 update 和 componentUpdated 鉤子中可用。
除了 el 之外，其它參數(shù)都應(yīng)該是只讀的，切勿進行修改。如果需要在鉤子之間共享數(shù)據(jù)，建議通過元素的 dataset 來進行。
下面我們來分析幾個簡單的鉤子函數(shù)，及其參數(shù)
代碼如下：（看完代碼我再將其）
<div id="app">
<span v-mmm='{color:color, fontSize:"20px"}'>bind的對象形式</span>
<br>
<button @click='changeStyle'>改變顏色</button>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
color: 'cyan',
style1: {color: 'lightblue'},
style2: {fontSize:"20px"}
},
directives: {
mmm: {
bind(el,binding) {
// binding.value = {color:color, fontSize:"20px"}
if(binding.value.constructor === Object) {
Object.keys(binding.value).forEach(key => {
el.style[key] = binding.value[key];
})
}
}
}
},
methods: {
changeStyle() {
this.color = 'lightpink'
}
},
})
</script>
效果圖：
下面我們換成 update 鉤子函數(shù)：
update(el,binding) {
// binding.value = {color:color, fontSize:"20px"}
if(binding.value.constructor === Object) {
Object.keys(binding.value).forEach(key => {
el.style[key] = binding.value[key];
})
}
}
效果圖：
當(dāng)我們點擊按鈕后：
我們發(fā)現(xiàn)他會隨著數(shù)據(jù)改變而更新，但是他剛開始不會調(diào)用它，只有當(dāng)數(shù)據(jù)發(fā)生改變之后才會調(diào)用該鉤子函數(shù)
如果我們想要要剛開始就調(diào)用，并且會跟隨數(shù)據(jù)改變而改變，那么我們就要同時調(diào)用 bind 和 update 這兩個鉤子函數(shù)，但是兩個鉤子函數(shù)中的內(nèi)容又是一樣的，那么書寫起來就很麻煩。那么我們可以這樣寫：
mmm: function(el , binding) {
if(binding.value.constructor === Object) {
Object.keys(binding.value).forEach(key => {
el.style[key] = binding.value[key];
})
}
},
這樣之后我們就可以達到那樣的效果了。
書寫一個類似于 v-bind:style 的效果的自定義指令
<div id="app">
<span v-mystyle='{color:color, fontSize:"20px"}'>v-mystyle的對象形式</span>
<p v-mystyle='[style1 , style2]'>我使用的是v-mystyle的數(shù)組形式</p>
<button @click='changeStyle'>改變顏色</button>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
color: 'cyan',
style1: {color: 'lightblue'},
style2: {fontSize:"20px"}
},
directives: {
mystyle: function(el , binding) {
if(binding.value.constructor === Object) {
Object.keys(binding.value).forEach(key => {
el.style[key] = binding.value[key];
})
} else if(binding.value.constructor === Array) {
for(item of binding.value) {
for(key in item) {
el.style[key] = item[key];
}
}
}
},
},
methods: {
changeStyle() {
this.color = 'lightpink'
}
},
})
</script>
效果圖：
補充：下面看下v-bind綁定style的幾種方式
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>VUE --- V-BIND綁定STYLE的幾種方式</TITLE>
</HEAD>
<BODY>
<DIV ID="APP1">
<DIV :STYLE="{'COLOR':COLOR,'FONTSIZE':SIZE+'PX'}">第一個示例</DIV>
</DIV>
<DIV ID="APP2">
<DIV :STYLE="STYLES">第二種方式</DIV>
</DIV>
<SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="HTTPS://UNPKG.COM/VUE/DIST/VUE.MIN.JS"></SCRIPT>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
VAR APP1 = NEW VUE({
EL:'#APP1',
DATA:{
COLOR:'RED',
SIZE:15
}
})
VAR APP2 = NEW VUE({
EL:'#APP2',
DATA:{
STYLES:{
COLOR:'RED',
FONTSIZE:15+'PX'
}
}
})
</SCRIPT>
</BODY>
</HTML>
總結(jié)
以上所述是小編給大家介紹的vue中v-bind:style效果的自定義指令，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了vue中的h函數(shù)使用及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
vue3+ts+Vuex中使用websocket協(xié)議方式
這篇文章主要介紹了vue3+ts+Vuex中使用websocket協(xié)議方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue父組件如何獲取子組件的值,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06
你們是否聽說過Vue3的組合式API？它可是Vue3的新玩法，把以前的Vue2組件函數(shù)轉(zhuǎn)化為了函數(shù)組件。好了，今天我要和大家分享的是如何在組合式API中使用ref()函數(shù)，感興趣的朋友跟隨小編一起看看吧2023-06-06
這篇文章主要介紹的是Vue組件間的通信方式，本文將系統(tǒng)的介紹了幾種不使用Vuex，比較實用的組件間的通信方式，希望能幫助到大家2023-04-04
在使用?Vue?構(gòu)建的單頁面應(yīng)用中,頁面的樣式可能因為路由切換、組件加載順序或樣式的動態(tài)加載導(dǎo)致樣式混亂,尤其是在復(fù)雜的應(yīng)用中,隨著頁面的切換或者刷新,按鈕、文字、布局等可能表現(xiàn)出不同的樣式,所以本文給大家介紹了Vue頁面加載后和刷新后的樣式差異問題的解決方案2025-01-01
這篇文章主要為大家詳細(xì)介紹了如何利用vue實現(xiàn)前端列表拖拽功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,有需要的小伙伴可以參考一下2023-12-12
本文主要介紹了Vue3?全局切換字體大小的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-03-03
Vue中$router.push()路由切換及如何傳參和獲取參數(shù)
這篇文章主要給大家介紹了關(guān)于Vue中$router.push()路由切換及如何傳參和獲取參數(shù)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-03-03
sass或者less都提供變量設(shè)置，在需求切換主題的項目中使用less或者sass變量，這篇文章主要介紹了vue引入sass全局變量，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06