詳解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 beforeRouteEnter 的next執(zhí)行時機詳解
今天小編就為大家分享一篇對Vue beforeRouteEnter 的next執(zhí)行時機詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08vue新建項目并配置標(biāo)準(zhǔn)路由過程解析
這篇文章主要介紹了vue新建項目并配置標(biāo)準(zhǔn)路由過程解析,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12uniapp實現(xiàn)省市區(qū)三級級聯(lián)選擇功能(含地區(qū)json文件)
這篇文章主要給大家介紹了關(guān)于uniapp實現(xiàn)省市區(qū)三級級聯(lián)選擇功能(含地區(qū)json文件)的相關(guān)資料,級級聯(lián)是一種常見的網(wǎng)頁交互設(shè)計,用于省市區(qū)選擇,它的目的是方便用戶在一系列選項中進行選擇,并且確保所選選項的正確性和完整性,需要的朋友可以參考下2024-06-06Vite3 Svelte3構(gòu)建Web應(yīng)用報錯process is not def
這篇文章主要介紹了Vite3 Svelte3構(gòu)建Web應(yīng)用報錯:'process is not defined'解決方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06