詳解vue中v-bind:style效果的自定義指令
自定義指令
1.什麼是自定義指令
以 v- 為字首，然後加上自己定義好的名字組成的一個指令就是自定義指令。為什麼要有自定義指令呢？在有些時候，你仍然需要對普通的DOM元素進行底層的操作，這個時候就可以用到自定義指令。
2.自定義指令的語法
全域性自定義指令
// 註冊一個全域性自定義指令 `v-focus`
Vue.directive('focus',{
// 當被繫結的元素插入到 DOM 中時……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
區域性自定義指令
directives: {
focus: {
// 指令的定義
inserted: function (el) {
el.focus()
}
}
}3.鉤子函式
看了上述的程式碼，如果你從來沒接觸過這類內容，你可能會很生疏，下面我給大家講講其每一步所需要掌握的東西
首先是鉤子函式：
bind ：只會呼叫一次的函式，表示指令第一次繫結元素時呼叫
inserted ：被繫結元素插入到父節點時呼叫(僅保證父節點存在，但不一定已被插入文件中)。
update ：所在元件的 VNode 更新時呼叫，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。
componentUpdated ：指令所在元件的 VNode 及其子 VNode 全部更新後呼叫。
unbind ：只調用一次，指令與元素解綁時呼叫。
然後我們看看鉤子函式中的引數列表：
el：指令所繫結的元素，可以用來直接操作 DOM 。
binding：一個物件，包含以下屬性：
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 }。vnode：Vue 編譯生成的虛擬節點。
oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。
除了 el 之外，其它引數都應該是隻讀的，切勿進行修改。如果需要在鉤子之間共享資料，建議通過元素的 dataset 來進行。
下面我們來分析幾個簡單的鉤子函式，及其引數
程式碼如下：（看完程式碼我再將其）
<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 鉤子函式：
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];
})
}
}
效果圖：
當我們點選按鈕後：
我們發現他會隨著資料改變而更新，但是他剛開始不會呼叫它，只有當資料發生改變之後才會呼叫該鉤子函式
如果我們想要要剛開始就呼叫，並且會跟隨資料改變而改變，那麼我們就要同時呼叫 bind 和 update 這兩個鉤子函式，但是兩個鉤子函式中的內容又是一樣的，那麼書寫起來就很麻煩。那麼我們可以這樣寫：
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的陣列形式</p>
<button @click='changeStyle'>改變顏色</button>
</div>
<script>
const vm = new Vue({
el: '#app',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];
}
}
}
},},})
</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>
總結
以上所述是小編給大家介紹的vue中v-bind:style效果的自定義指令，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對我們網站的支援！
如果你覺得本文對你有幫助，歡迎轉載，煩請註明出處，謝謝！