Vue干貨第一集:
v-for 循環(huán)
- v-for 指令需要以 site in sites 形式的特殊語法， sites 是源數(shù)據(jù)數(shù)組并且 site 是數(shù)組元素迭代的別名。
- v-for 可以綁定數(shù)據(jù)到數(shù)組來渲染一個(gè)列表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>循環(huán)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
}
});
};
</script>
</head>
<body>
<div id="box">
<ul>
<li v-for="value in arr">
{{value}}
</li>
</ul>
</div>
</body>
</html>
- 模板中使用 v-for：
<template v-for="site in sites">
<li>{{ site.name }}</li>
<li>--------------</li>
</template>
- v-for 可以通過一個(gè)對(duì)象的屬性來迭代數(shù)據(jù)：
<li v-for="value in object">
{{ value }}
</li>
<li v-for="(value, key) in object">
{{ key }} : {{ value }}
</li>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</li>
- v-for 也可以循環(huán)整數(shù)
<li v-for="n in 10">
{{ n }}
</li>
computed 計(jì)算屬性
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>計(jì)算后反轉(zhuǎn)字符串: {{ reversedMessage }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
computed: {
// 計(jì)算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實(shí)例
return this.message.split('').reverse().join('')
}
}
})
</script>
實(shí)例中聲明了一個(gè)計(jì)算屬性 reversedMessage 。
提供的函數(shù)將用作屬性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依賴于 vm.message，在 vm.message 發(fā)生改變時(shí)，vm.reversedMessage 也會(huì)更新。
事件處理器
- 事件監(jiān)聽可以用v-on指令：
<button v-on:click="counter += 1">增加 1</button>
- 我們需要使用一個(gè)方法來調(diào)用 JavaScript 方法，v-on 可以接收一個(gè)定義的方法來調(diào)用
<button v-on:click="greet">Greet</button>
methods: {
greet: function (event) {
// `this` 在方法里指當(dāng)前 Vue 實(shí)例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
- 除了直接綁定到一個(gè)方法，也可以用內(nèi)聯(lián) JavaScript 語句：
<button v-on:click="say('hi')">Say hi</button>
methods: {
say: function (message) {
alert(message)
}
}
