|
先附上练习源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
<link rel="stylesheet" type="text/css" href="../css/demo.css">
<script src="../js/vue.js"></script>
</head>
<body>
<div id="demo_table" v-cloak>
<template v-if="list.length">
<table>
<thead>
<th>序号</th>
<th>商品名称</th>
<th>商品单价</th>
<th>购买数量</th>
<th>操作</th>
<th>全选 <input type="checkbox" :checked="allCheckStatus" @click="allCheck()"></th>
</thead>
<tbody>
<tr v-for="item,index in list">
<td>{{index + 1}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button @click="handleReduce(index)" :disabled="item.count==1">
-</button>
{{item.count}}
<button @click="handleIncrease(index)">+</button>
</td>
<td>
<button @click="handleDelete(index)">移除</button>
</td>
<td>
<input type="checkbox" :checked="item.checked" @change="change(index)">
</td>
</tr>
</tbody>
</table>
<div>
商品总价:{{totalPrice}}
</div>
</template>
<div v-else>列表为空</div>
</div>
<script src="../js/demo.js"></script>
</body>
</html>
var demo_table = new Vue({
el: "#demo_table",
data: {
//全选状态，与全选按钮绑定
allCheckStatus: true,
list: [{
"name": "ja",
"price": 1029,
"count": 100,
"checked": true
},
{
"name": "book2",
"price": 1029,
"count": 1,
"checked": true
},
{
"name": "book3",
"price": 1876,
"count": 19,
"checked": true
}]
},
methods: {
handleReduce: function (index) {
this.list[index].count--;
},
handleIncrease: function (index) {
this.list[index].count++;
},
handleDelete: function (index) {
this.list.splice(index, 1);
},
//全选点击事件
allCheck: function () {
for (var i = 0; i < this.list.length; i++) {
if (this.allCheckStatus) {
this.list[i].checked = false;
} else {
this.list[i].checked = true;
}
}
if (this.allCheckStatus) {
this.allCheckStatus = false;
} else {
this.allCheckStatus = true;
}
},
//每行选中状态切换事件
change : function(index){
if(this.list[index].checked){
this.list[index].checked = false;
} else {
this.list[index].checked = true;
}
}
},
computed: {
totalPrice: function () {
var total = 0;
for (var i = 0; i < this.list.length; i++) {
if(this.list[i].checked){
total += this.list[i].price;
}
}
return total;
}
}
});
- 练习要求：在原有表格基础上，新增一项是否选中该商品的功能，总价变为只计算选中商品的总价，同时提供一个全选的按钮。
- 实现思路：按照vue数据和dom元素双向绑定的特性，定义allCheckStatus变量与表格全选框绑定，list数组内每一个元素定义checked字段与表格每一行选中状态绑定，定义allCheck方法，绑定全选框点击事件，通过操作allCheckStatus与checked字段值，实现全选效果
- 回顾： 已经不写前端很久了，最近要换工作，一直想学学vue，终于有时间学学。回想下几年前最初写前端的时候，是最简单的jquery+dom原生操作，语法上十分繁琐，也不利于维护，一般拿到一个需求之后，先是画静态页面，然后将数据变动部分拿出来，写 ajax请求后台接口，拿到数据之后，动态拼接html字符串，最后append到对应html元素上。页面效果看起来不够流畅，同时后期维护起来特别麻烦，需要一点一点去扣html标签；后来写过jsp的el表达式，也写过html的template模板语法，比原来拼接html字符串进步了不少，不过还是有很多操作dom元素的代码，同时也无法实现数据与dom元素的双向绑定
- 感想： 刚开始看到这个练习题的时候，脑袋里瞬间有了思路，定义一个全选框，监听下事件，获取到每一行的dom元素，循环去修改选中状态值。转念一想，vue是实现数据与dom元素的双向绑定，尽量避免操作dom元素，根据这一特性，改变实现方式，通过数据去驱动dom元素的状态改变。vue的核心思想说是借鉴了MVVM模型，刚开始学，理解还不是很透彻，后续有新的想法再记录下来
| 
转播
