v-for
1、v-for 可以通過(guò)一個(gè)對(duì)象的屬性來(lái)迭代數(shù)據(jù)
<div id="main">
<ul>
<li v-for="value in object">
{{ value }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#main',
data: {
object: {
name: '百度',
url: 'http://www.baidu.com',
slogan: '百度一下，你就知道'
}
}
})
</script>
2、也可以提供第二個(gè)的參數(shù)為鍵名
<div id="main">
<ul>
<li v-for="(value,key) in object">
{{ key }}:{{ value }}
</li>
</ul>
</div>
<script>
new Vue ({
el:"#main",
data: {
object: {
name: '百度',
url: 'www.baidu.com',
slogan: '百度一下，你就知道'
}
}
})
</script>
3、第三個(gè)參數(shù)為索引
<div id="main">
<ul>
<li v-for="(value,key,index) in object">
{{index}}.{{key}}.{{value}}
</li>
</ul>
</div>
<script>
new Vue({
el:"#main",
data: {
object: {
name: '百度',
url: 'www.baidu.com',
slogan: '百度一下，你就知道'
}
}
})
</script>
4、v-for 也可以循環(huán)整數(shù)
<div id="app">
<ul>
<li v-for="n in 10">
{{ n }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app'
})
</script>
Vue.js 計(jì)算屬性
{ 鍵：函數(shù)} { [key: string]: Function | { get: Function, set: Function } } ，可以省略setter,如果省略了setter，那么值就可以是普通函數(shù)，但是必須有返回值。
var vm = new Vue({
data: { a: 1 },
computed: {
// 僅讀取，值只須為函數(shù)
aDouble: function () {
return this.a * 2
},
// 讀取和設(shè)置
aPlus: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
}
})
vm.aPlus // -> 2
vm.aPlus = 3
vm.a // -> 2
vm.aDouble // -> 4
1、計(jì)算屬性關(guān)鍵詞: computed。
<div id="main">
{{ message.split('').reverse().join('') }}
</div>
<script>
new Vue({
el: '#main',
data: {
message: 'ABC!'
}
})
</script>
2、聲明了一個(gè)計(jì)算屬性 reversedMessage 。
提供的函數(shù)將用作屬性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依賴于 vm.message，在 vm.message 發(fā)生改變時(shí)，vm.reversedMessage 也會(huì)更新。
<div id="main">
<p>原始字符串: {{ message }}</p>
<p>計(jì)算后反轉(zhuǎn)字符串: {{ reversedMessage }}</p>
</div>
<script>
var vm = new Vue({
el: '#main',
data: {
message: 'Runoob!'
},
computed: {
// 計(jì)算屬性的 getter
reversedMessage: function () {
// this 指向 vm 實(shí)例
return this.message.split('').reverse().join('')
}
}
})
</script>
3、可以使用 methods 來(lái)替代 computed，效果上兩個(gè)都是一樣的，但是 computed 是基于它的依賴緩存，只有相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新取值。而使用 methods ，在重新渲染的時(shí)候，函數(shù)總會(huì)重新調(diào)用執(zhí)行。
類型: { [key: string]: Function }
methods 將被混入到 Vue 實(shí)例中。可以直接通過(guò) VM 實(shí)例訪問(wèn)這些方法，或者在指令表達(dá)式中使用。方法中的 this 自動(dòng)綁定為 Vue 實(shí)例。
<div id="main">
<p>原始字符串: {{ message }}</p>
<p>計(jì)算后反轉(zhuǎn)字符串: {{ reversedMessage }}</p>
<p>使用方法后反轉(zhuǎn)字符串: {{ reversedMessage2() }}</p>
</div>
<script>
var vm = new Vue({
el: '#main',
data: {
message: 'Runoob!'
},
computed: {
// 計(jì)算屬性的 getter
reversedMessage: function () {
// this 指向 vm 實(shí)例
return this.message.split('').reverse().join('')
}
},
methods: {
reversedMessage2: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>
4、computed setter
<div id="app">
<p>{{ site }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'Google',
url: 'http://www.google.com'
},
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
})
// 調(diào)用 setter， vm.name 和 vm.url 也會(huì)被對(duì)應(yīng)更新
vm.site = 'baidu http://www.baidu.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
key的使用
一般情況下，vue在渲染完成后，如果數(shù)據(jù)發(fā)生變化，只會(huì)重新渲染數(shù)據(jù)，不會(huì)重新渲染整個(gè)元素，但是有時(shí)候我們需要元素被重新渲染，此時(shí)就需要使用key關(guān)鍵字，使用v-bind綁定key關(guān)鍵字，可以實(shí)現(xiàn)在數(shù)據(jù)發(fā)生變化時(shí)候重新渲染整個(gè)元素。注：同一父級(jí)元素下所有子元素如果都要在數(shù)據(jù)變化后重新渲染元素，則需要被綁定的key
v-move的使用
在使用<transition-group>時(shí)候，不僅可以定義進(jìn)入離開動(dòng)畫，還可以使用新增的v-move特性，與過(guò)渡一樣，默認(rèn)為v-move，可以用name進(jìn)行自定義前綴，也可以用move-class屬性手動(dòng)設(shè)定。用了這個(gè)之后就可以實(shí)現(xiàn)移動(dòng)過(guò)程中的動(dòng)畫。
