詳解vue中v-bind:style效果的自定義指令
自定義指令
1.什么是自定義指令
以 v- 為前綴,然后加上自己定義好的名字組成的一個(gè)指令就是自定義指令。為什么要有自定義指令呢?在有些時(shí)候,你仍然需要對(duì)普通的DOM元素進(jìn)行底層的操作,這個(gè)時(shí)候就可以用到自定義指令。
2.自定義指令的語(yǔ)法
全局自定義指令
// 注冊(cè)一個(gè)全局自定義指令 `v-focus` Vue.directive('focus', { // 當(dāng)被綁定的元素插入到 DOM 中時(shí)…… inserted: function (el) { // 聚焦元素 el.focus() } })
局部自定義指令
directives: { focus: { // 指令的定義 inserted: function (el) { el.focus() } } }
3.鉤子函數(shù)
看了上述的代碼,如果你從來(lái)沒(méi)接觸過(guò)這類(lèi)內(nèi)容,你可能會(huì)很生疏,下面我給大家講講其每一步所需要掌握的東西
首先是鉤子函數(shù):
bind
:只會(huì)調(diào)用一次的函數(shù),表示指令第一次綁定元素時(shí)調(diào)用
inserted
:被綁定元素插入到父節(jié)點(diǎn)時(shí)調(diào)用(僅保證父節(jié)點(diǎn)存在,但不一定已被插入文檔中)。
update
:所在組件的 VNode 更新時(shí)調(diào)用,但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變,也可能沒(méi)有。
componentUpdated
:指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
unbind
:只調(diào)用一次,指令與元素解綁時(shí)調(diào)用。
然后我們看看鉤子函數(shù)中的參數(shù)列表:
el
:指令所綁定的元素,可以用來(lái)直接操作 DOM 。
binding
:一個(gè)對(duì)象,包含以下屬性:
name
:指令名,不包括 v-
前綴。
value
:指令的綁定值,例如:
v-my-directive="1 + 1"
中,綁定值為 2
。
oldValue
:指令綁定的前一個(gè)值,僅在 update
和 componentUpdated
鉤子中可用。無(wú)論值是否改變都可用。expression
:字符串形式的指令表達(dá)式。例
如 v-my-directive="1 + 1"
中,表達(dá)式為 "1 + 1"
。arg
:傳給指令的參數(shù),可選。
例如 v-my-directive:foo
中,參數(shù)為 "foo"
。
modifiers
:一個(gè)包含修飾符的對(duì)象。例如:v-my-directive.foo.bar
中,修飾符對(duì)象為 { foo: true, bar: true }
。vnode
:Vue 編譯生成的虛擬節(jié)點(diǎn)。
oldVnode
:上一個(gè)虛擬節(jié)點(diǎn),僅在 update
和 componentUpdated
鉤子中可用。
除了 el
之外,其它參數(shù)都應(yīng)該是只讀的,切勿進(jìn)行修改。如果需要在鉤子之間共享數(shù)據(jù),建議通過(guò)元素的 dataset
來(lái)進(jìn)行。
下面我們來(lái)分析幾個(gè)簡(jiǎn)單的鉤子函數(shù),及其參數(shù)
代碼如下:(看完代碼我再將其)
<div id="app"> <span v-mmm='{color:color, fontSize:"20px"}'>bind的對(duì)象形式</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)我們點(diǎn)擊按鈕后:
我們發(fā)現(xiàn)他會(huì)隨著數(shù)據(jù)改變而更新,但是他剛開(kāi)始不會(huì)調(diào)用它,只有當(dāng)數(shù)據(jù)發(fā)生改變之后才會(huì)調(diào)用該鉤子函數(shù)
如果我們想要要?jiǎng)傞_(kāi)始就調(diào)用,并且會(huì)跟隨數(shù)據(jù)改變而改變,那么我們就要同時(shí)調(diào)用 bind
和 update
這兩個(gè)鉤子函數(shù),但是兩個(gè)鉤子函數(shù)中的內(nèi)容又是一樣的,那么書(shū)寫(xiě)起來(lái)就很麻煩。那么我們可以這樣寫(xiě):
mmm: function(el , binding) { if(binding.value.constructor === Object) { Object.keys(binding.value).forEach(key => { el.style[key] = binding.value[key]; }) } },
這樣之后我們就可以達(dá)到那樣的效果了。
書(shū)寫(xiě)一個(gè)類(lèi)似于 v-bind:style
的效果的自定義指令
<div id="app"> <span v-mystyle='{color:color, fontSize:"20px"}'>v-mystyle的對(duì)象形式</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>
效果圖:
補(bǔ)充:下面看下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'}">第一個(gè)示例</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效果的自定義指令,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
關(guān)于vue-router路徑計(jì)算問(wèn)題
這篇文章主要介紹了關(guān)于vue-router路徑計(jì)算問(wèn)題,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05簡(jiǎn)單聊一聊axios配置請(qǐng)求頭content-type
最近在工作中碰到一個(gè)問(wèn)題,后端提供的get請(qǐng)求的接口需要在request header設(shè)置,下面這篇文章主要給大家介紹了關(guān)于axios配置請(qǐng)求頭content-type的相關(guān)資料,需要的朋友可以參考下2022-04-04對(duì)Vue beforeRouteEnter 的next執(zhí)行時(shí)機(jī)詳解
今天小編就為大家分享一篇對(duì)Vue beforeRouteEnter 的next執(zhí)行時(shí)機(jī)詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08vue新建項(xiàng)目并配置標(biāo)準(zhǔn)路由過(guò)程解析
這篇文章主要介紹了vue新建項(xiàng)目并配置標(biāo)準(zhǔn)路由過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12uniapp實(shí)現(xiàn)省市區(qū)三級(jí)級(jí)聯(lián)選擇功能(含地區(qū)json文件)
這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)省市區(qū)三級(jí)級(jí)聯(lián)選擇功能(含地區(qū)json文件)的相關(guān)資料,級(jí)級(jí)聯(lián)是一種常見(jiàn)的網(wǎng)頁(yè)交互設(shè)計(jì),用于省市區(qū)選擇,它的目的是方便用戶(hù)在一系列選項(xiàng)中進(jìn)行選擇,并且確保所選選項(xiàng)的正確性和完整性,需要的朋友可以參考下2024-06-06Vite3 Svelte3構(gòu)建Web應(yīng)用報(bào)錯(cuò)process is not def
這篇文章主要介紹了Vite3 Svelte3構(gòu)建Web應(yīng)用報(bào)錯(cuò):'process is not defined'解決方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06