列表渲染
列表顯示指令
數組: v-for / index
對象: v-for / key
列表的更新顯示 刪除 item 替換 item
列表的高級處理 列表過濾 列表排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="./js/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
persons: [{
id: 1,
name: 'Tom',
age: 13
}, {
id: 2,
name: 'Jack',
age: 12
}, {
id: 3,
name: 'Bob',
age: 14
}]
},
methods: {
deleteItem(index) {
this.persons.splice(index, 1)
},
updateItem(index, p) {
// this.persons[index] = p // 頁面不會更新
this.persons.splice(index, 1, p)
}
}
})
</script>
</head>
<body>
<div id="demo">
<h2>測試: v-for 遍歷數組</h2>
<ul>
<li v-for="(p, index) in persons" :key="index"> {{index}}--{{p.name}}--{{p.age}} --<button
@click="deleteItem(index)">刪除</button> --<button
@click="updateItem(index, {name:'Jok',age:15})">更新</button> </li>
</ul>
<h2>測試: v-for 遍歷對象</h2>
<ul>
<li v-for="(value, key) in persons[0]"> {{ key }} : {{ value }} </li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="./js/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
orderType: 0,
//0 代表不排序, 1 爲升序, 2 爲降序
searchName: '',
persons: [{
id: 1,
name: 'Tom',
age: 13
}, {
id: 2,
name: 'Jack',
age: 12
}, {
id: 3,
name: 'Bob',
age: 17
}, {
id: 4,
name: 'Cat',
age: 14
}, {
id: 4,
name: 'Mike',
age: 14
}, {
id: 4,
name: 'Monica',
age: 16
}]
},
methods: {
setOrderType(orderType) {
this.orderType = orderType
}
},
computed: {
filterPerson() {
let {
orderType,
searchName,
persons
} = this // 過濾
persons = persons.filter(p => p.name.indexOf(searchName) != -1)
if (orderType !== 0) {
persons = persons.sort(function (p1, p2) {
if (orderType === 1) {
return p1.age - p2.age
} else {
return p2.age - p1.age
}
})
}
return persons
}
}
})
</script>
</head>
<body>
<div id="demo"> <input type="text" name="searchName" placeholder="搜索指定用戶名" v-model="searchName">
<ul>
<li v-for="(p, index) in filterPerson" :key="index"> {{index}}--{{p.name}}--{{p.age}} </li>
</ul> <button @click="setOrderType(1)">年齡升序</button> <button @click="setOrderType(2)">年齡降序</button> <button
@click="setOrderType(0)">原本順序</button>
</div>
</body>
</html>
事件處理
綁定監聽:
1) v-on:xxx="fun"
2) @xxx="fun"
3) @xxx="fun(參數)"
4) 默認事件形參: event
5) 隱含屬性對象: $event
事件修飾符
1) .prevent : 阻止事件的默認行爲 event.preventDefault()
2) .stop : 停止事件冒泡 event.stopPropagation()
按鍵修飾符
1) .keycode : 操作的是某個 keycode 值的鍵
2) .keyName : 操作的某個按鍵名的鍵(少部分)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="./js/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#example',
data: {
name: 'Vue.js'
},
methods: {
test1(
event) {
// 方法內 `this` 指向 vm
// alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
alert(event.target.innerHTML)
},
test2(event, msg) {
alert(event.target.innerHTML + '---' + msg)
},
test3() {
alert('阻止事件的默認行爲')
},
test4() {
alert('out')
},
test5() {
alert('inner')
},
test6(event) {
alert(event.keyCode + '---' + event.target.value)
}
}
})
</script>
</head>
<body>
<div id="example">
<h2>1. 綁定監聽</h2> <button v-on:click="test1">Greet</button> <button @click="test1">Greet2</button> <button
@click="test2($event, 'hello')">Greet3</button>
<h2>2. 事件修飾符</h2> <!-- 阻止事件默認行爲 --> <a href="http://www.baidu.com" @click.prevent="test3">百度一下</a> <br /> <br />
<!-- 停止事件冒泡 -->
<div style="width: 200px;height: 200px;background: red" @click="test4">
<div style="width: 100px;height: 100px;background: green" @click.stop="test5"></div>
</div>
<h2>3. 按鍵修飾符</h2> <input @keyup.8="test6"> <input @keyup.enter="test6">
</div>
</body>
</html>