項目前導 學習筆記
一、視圖更新
1.1、觸發視圖更新
Vue 對一些方法進行了包裝和變異，以後數組通過這些方法進行數組更新，會觸發視圖的更新。（就是在頁面看到數據的變化）
- 直接賦值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue 保持狀態</title>
</head>
<body>
<div id="app">
<div v-for="value in books">
<label for="value">{{value}}</label>
</div><br>
<button @click="updatelist">視圖更新</button>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
books: ['Python','JAVA','C++','PHP']
},
methods: {
updatelist:function(){
// 直接賦值
this.books = ['三國演義','水滸傳','紅樓夢','西遊記','金瓶梅']
}
}
})
</script>
push()：在末尾添加元素的方法。
methods:{
updatelist:function(){
// 在末尾添加元素
this.books.push("GO")
}
}
unshift(item)：在數組的開頭位置添加一個元素。
methods:{
updatelist:function(){
// 在數組的開頭位置添加一個元素
this.books.unshift("GO")
}
}
pop()：刪除數組最後一個元素。
methods:{
updatelist:function(){
// 刪除數組最後一個元素
this.books.pop()
}
}
shift()：刪除數組的第一個元素。
methods:{
updatelist:function(){
// 刪除數組第一個元素
this.books.shift()
}
}
splice(index,howmany,item1,...,itemX)：向數組中添加或者刪除或者替換元素。
methods:{
updatelist:function(){
// 向 books 第 0 個位置添加元素
this.books.splice(0,0,"金瓶梅")
// 下標從0開始，刪除2個元素
this.books.splice(0,2)
// 下標從0開始，替換2個元素
this.books.splice(0,2,'金瓶梅','駱駝祥子')
// 從 books 第 1 個位置開始修改 2 個元素
this.books.splice(1,2,"金瓶梅")
}
}
sort(function)：排序。
methods:{
updatelist:function(){
this.books.sort(function(x,y){
<!-- 取兩個隨機數排序 -->
a = Math.random();
b = Math.random();
return a-b;
});
}
}
reverse()：將數組元素進行反轉。
methods:{
updatelist:function(){
// 在數組的開頭位置添加一個元素
this.books.reverse()
}
}
1.2、視圖更新注意事項
- 直接修改數組中的某個值是不會出發視圖更新的。
- 比如：
// 想要修改 books 數組的第 0 個值
this.books[0] = 'Python';
- 這種情況應該改成用
splice或者是用Vue.set方法來實現：
// 修改數組中第 0 個值
Vue.set(this.books,0,'Python');
- 如果動態的給對象添加屬性，也不會觸發視圖更新。只能通過
Vue.set來添加。比如：
<div v-for="(value, key) in person">
<label>{{key}}: {{value}}</label>
</div>
<button @click="updatelist">添加值</button>
data: {
person: {
name: '老A'
}
},
methods:{
updatelist:function(){
Vue.set(this.person, 'age', 18)
}
}
二、事件
2.1、事件綁定
事件綁定就是在 HTML 元素中，通過 v-on 綁定事件的。事件代碼可以直接放到 v-on 後面，也可以寫成一個函數。
<div id="app">
<p>{{count}}</p>
<button v-on:click="count+=1">加</button>
<button v-on:click="subtract(2)">減2</button>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
count: 0
},
methods: {
// subtract: function(value=1) { this.count -= value; }
// 可簡寫爲如下：
// 不傳參時減 1
subtract(value=1){
this.count -= value;
}
}
});
</script>
2.2、event 參數
如果在事件處理函數中，想要獲取原生的 DOM 事件，那麼在 html 代碼中，調用的時候，可以傳遞一個 $event 參數。
<button v-on:click="subtract(2, $event)">減2</button>
...
<script>
...
methods: {
subtract: function(value, event){
this.count -= value;
// 打印 event 參數
console.log(event);
}
}
...
</script>
