1、列表渲染的基本知識
指令名稱：v-for
指令格式:(別名 in 表達(dá)式)
demo1：
基本渲染：
eg：
? ? ? ?可以看出，這是一個最簡單的v-for循環(huán)實(shí)例，其中info是你自己定義的名字，但是在渲染的時候應(yīng)該使用info在<li></li>標(biāo)簽中進(jìn)行渲染。
demo2，v-for升級的例子
(1)在數(shù)組中存放對象
在?v-for?塊中，我們擁有對父作用域?qū)傩缘耐耆L問權(quán)限。v-for?還支持一個可選的第二個參數(shù)為當(dāng)前項(xiàng)的索引。
(2) 對象的循環(huán)
可以使用一個對象的參數(shù)、兩個對象的參數(shù)、三個對象的參數(shù)。
2.變異方法
Vue 包含一組觀察數(shù)組的變異方法，所以它們也將會觸發(fā)視圖更新。這些方法如下：
push() pop() shift() unshift() splice() sort() reverse()
替換數(shù)組：
變異方法 (mutation method)，顧名思義，會改變被這些方法調(diào)用的原始數(shù)組。相比之下，也有非變異 (non-mutating method) 方法，例如：filter(),?concat()?和?slice()?。這些不會改變原始數(shù)組，但總是返回一個新數(shù)組。當(dāng)使用非變異方法時，可以用新數(shù)組替換舊數(shù)組：
eg：
example1.items = example1.items.filter(function(item){
returnitem.message.match(/Foo/)
})
vue對可以改變原數(shù)組的方法【push()、pop()、shift()、unshift()、splice()、sort()、reverse()】進(jìn)行了改寫，以保證數(shù)組變化觸發(fā)響應(yīng)式
3.計(jì)算屬性
模板內(nèi)的表達(dá)式非常便利，但是設(shè)計(jì)它們的初衷是用于簡單運(yùn)算的。在模板中放入太多的邏輯會讓模板過重且難以維護(hù)。例如：
{{ message.split('').reverse().join('') }}
在這個地方，模板不再是簡單的聲明式邏輯。你必須看一段時間才能意識到，這里是想要顯示變量message的翻轉(zhuǎn)字符串。當(dāng)你想要在模板中多次引用此處的翻轉(zhuǎn)字符串時，
就會更加難以處理。所以，對于任何復(fù)雜邏輯，你都應(yīng)當(dāng)使用計(jì)算屬性。
Original message: "{{ message }}"
Computed reversed message: "{{ reversedMessage }}"
var vm =new Vue({
el:'#example',
data: {
message:'Hello'
},
computed: {
// 計(jì)算屬性的 getter
reversedMessage:function () {
// `this` 指向 vm 實(shí)例
returnthis.message.split('').reverse().join('')
}
}
})
結(jié)果：
Original message: "Hello"
Computed reversed message: "olleH"
這里我們聲明了一個計(jì)算屬性reversedMessage。我們提供的函數(shù)將用作屬性vm.reversedMessage的 getter 函數(shù)：
console.log(vm.reversedMessage)// => 'olleH'
vm.message ='Goodbye'
console.log(vm.reversedMessage)// => 'eybdooG'
你可以打開瀏覽器的控制臺，自行修改例子中的 vm。vm.reversedMessage的值始終取決于vm.message的值。
你可以像綁定普通屬性一樣在模板中綁定計(jì)算屬性。Vue 知道vm.reversedMessage依賴于vm.message，因此當(dāng)vm.message發(fā)生改變時，
所有依賴vm.reversedMessage的綁定也會更新。而且最妙的是我們已經(jīng)以聲明的方式創(chuàng)建了這種依賴關(guān)系：計(jì)算屬性的 getter 函數(shù)是沒有副作用 (side effect) 的，這使它更易于測試和理解。
計(jì)算屬性緩存
計(jì)算屬性是基于它們的依賴進(jìn)行緩存的。計(jì)算屬性只有在它的相關(guān)依賴發(fā)生改變時才會重新求值。
這就意味著只要message還沒有發(fā)生改變，多次訪問reversedMessage計(jì)算屬性會立即返回之前的計(jì)算結(jié)果，而不必再次執(zhí)行函數(shù)。
偵聽屬性 （監(jiān)聽屬性）
{{ fullName }}
// 偵聽屬性
var vm =new Vue({
el:'#demo',
data: {
firstName:'Foo',
lastName:'Bar',
fullName:'Foo Bar'
},
watch: {
firstName:function (val) {
this.fullName = val +' ' +this.lastName
},
lastName:function (val) {
this.fullName =this.firstName +' ' + val
}
}
})//計(jì)算屬性
var vm =new Vue({
el:'#demo',
data: {
firstName:'Foo',
lastName:'Bar'
},
computed: {
fullName:function () {
returnthis.firstName +' ' +this.lastName
}
}
})
計(jì)算屬性的setter
// ...
computed: {
fullName: {
// getter
get:function () {
returnthis.firstName +' ' +this.lastName
},
// setter
set:function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length -1]
}
}
}
// ...
現(xiàn)在再運(yùn)行vm.fullName = 'John Doe'時，setter 會被調(diào)用，vm.firstName和vm.lastName也會相應(yīng)地被更新
