CSS與style的綁定
css的綁定:
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
或:
<div v-bind:class="[{ active: isActive }, 'text-danger']"></div>
data: {
isActive: true,
hasError: false
}
////////第一種 渲染結果爲: <div class="static active"></div>(active,'text-danger'爲CSS類名)
<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}
///////第二種 渲染結果同上
<div v-bind:class="classObject"></div>
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
/////第三種 用計算屬性的值綁定
內聯樣式的綁定:
////同上面一樣有對象寫法
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30 //這裏沒單引號
}
或更簡潔的:
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px' //這裏有單引號
}
}
也可以將值與計算屬性(computed)綁定
/////也可以與數組綁定 方法也css一樣
(樣式)屬性名有瀏覽器兼容問題時 vue會自動偵測並添加前綴
屬性值有兼容問題時 :
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
這樣 vue只會返回瀏覽器能識別的最後一個值
最後提醒:重複使用的樣式可以將其自定義爲組件,提高代碼整潔度
條件渲染
//使用
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
//與組件結合
<template v-if="Math.random() > 0.5">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
//v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面，否則它將不會被識別。
//細節
<template v-if="isNameLogin">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
//key的作用:在這個模板中vue的優化機制會識別到條件中 lable與input是可重用的,不加key導致切換
//isNameLogin值時 lable,input不會從新渲染(看效果來決定是否添加)
//是否顯示元素也可以用v-show指令 v-show指令只是改變元素的display樣式(所以v-show不能用於自定義模板上) 渲染是肯定要做的 看效果選擇v-if 與 v-show
列表渲染
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
//其中index是可選參數'(item, index) in items'中'in'可改爲'of'
迭代對象:
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
new Vue({
el: '#v-for-object',
data: {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
//其中一個第二個參數爲key 第三個爲index都是可選參數
items也可以爲整數或計算屬性
vue重新渲染數組的優化機制是:直接利用已有的相同元素進行修改樣式(少的再補,多的就刪) 當數組數據項位置改變時就可能不適用這種方式 這時我們給每個數據項添加"id_diy" 再
<div v-for="item in items" :key="item.id">
<!-- 內容 -->
</div>
這樣Vue就會根據id_diy來跟蹤數組渲染出來的Dom節點
數組跟新檢測問題
vue會觀察數組的push(),pop(),shift(),unshift(),splice(),sort(),reverse()方法 並更新視圖
而有些方法如filter(),concat(),和slice()這些方法不會改變原數組 只是返回一個新數組 從而導致視圖不更新,可以將返回值賦給原數組,從而更新視圖
注意,由於javascript的限制，Vue 不能檢測以下變動的數組：
- 當你利用索引直接設置一個項時，例如：
vm.items[indexOfItem] = newValue - 當你修改數組的長度時，例如：
vm.items.length = newLength
<!-- 實現值的修改 -->
// Vue.set,vue.$set也一樣
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
<!-- 直接縮短數組 -->
vm.items.splice(newLength)
對象更新檢測問題
同樣由於javascript的限制,Vue 不能檢測對象屬性的添加或刪除
可以用Vue.set(object, key, value)
當你需要用Object.assign() 或_.extend()添加多個新屬性時 可以調用這些方法再將返回值賦給原對象
事件處理
vue提供了事件修飾來設置事件的行爲,按鍵修飾來確定按鍵的狀態(按下,鬆開)與各個按鍵(<input @keyup.alt.67="clear">:alt+c鬆開狀態)
表單輸入綁定
用v-model指令把輸入與屬性綁定起來 輸入可以爲radio,checkbox,text,select 當這些值改變綁定的屬性的值也會改變,v-model還可以加'.lazy'(change改變屬性值而不是input),'.number','trim'修飾符