目录
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图书购物车小案例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<table>
<thead>
<th> </th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</thead>
<tbody>
<tr v-for="(book, index) in books" :key="index">
<td>{
{
index}}</td>
<td>{
{
book.name}}</td>
<td>{
{
book.beginDate}}</td>
<td>{
{
book.price | showPrice}}</td>
<td>
<button @click="decrement(index)" :disabled="book.count<=1" >-</button>
{
{
book.count}}
<button @click="increment(index)">+</button>
</td>
<td><button @click="remove">移除</button></td>
</tr>
</tbody>
</table>
<h3>总价：{
{
totalPrice | showPrice}}</h3>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
- 代码分析：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
content属性值 :
width:可视区域的宽度，值可为数字或关键词device-width
height:同width
intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
<meta http-equiv="X-UA-Compatible" content="IE=edge">
// 以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。
<link rel="stylesheet" href="style.css">
rel是Relations的所写 指关联到一个stylesheet（样式表单)
- DIV是层叠样式表中的定位技术，全称DIVision，即为划分
- table意思是简历一个表单
- thead是表头
表示这个表头的名字是一个空格
- tbody是表的内容
- tr是每一行的记录，使用v-for进行遍历，其中唯一标识符的key用的是index，注意这里的遍历使用的是（value，index)的形式
- 使用双{}来进行取值
- td是具体的一个单元格
- button添加一个按钮
- 对于-号按钮，实现-1逻辑，在js中实现，：disabled表示失效的判断，如果当前的计数小于等于1就不可以减了，对于+号按钮，可以加，两个按钮都绑定了一个method
- 对于remove按钮直接移除
- 对于{ {book.price | showPrice}}的写法，我以为是先得到前者的值，再对其进行showPrice的操作（这里指的是过滤器），showPrice的逻辑在main.js中
- script需要引入vue.js依赖以及本地实现的main.js
css
table{
border: 1px;
border-collapse: collapse;
border-spacing: 0;
}
th,td{
padding: 8px 16px;
border: ipx solid #e9e9e9;
text-align: center;
}
th{
background-color: #f7f7f7;
color: #5c6b77;
font-weight: 600;
}
- table：
- border：设置表格的边框
- 例如1px solid black实现一个黑色的实线1px的边框
- border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开；但我本地注释掉后看不出区别
- border-spacing设置表格的边框间距，但是这里由于后面有th和td的padding，这个似乎失效了
- th，td表示表头以及每一个元素的属性
- padding：表示每个单元格的高和宽
- border：同上，设置每个元素的边框，ipx应该就是直接不显示了的意思
- text-align：每个元素的位置，这里center表示居中
- th再定义
- background-color为背景色，设置为白色才可以显示出border的颜色
- color表示字体颜色，font-weight是字体的大小
- 可以认为td的字体和bgc都继承了th的？
前端效果图
js
const app = new Vue({
el: "#app",
data: {
books: [{
name: "《算法导论》",
beginDate: "2006-9",
price: 85.00,
count: 1
},
{
name: "《UNIX编程艺术》",
beginDate: "2006-2",
price: 59.00,
count: 1
},
{
name: "《编程大全》",
beginDate: "2008-10",
price: 39.00,
count: 1
},
{
name: "《代码大全》",
beginDate: "2006-3",
price: 128.00,
count: 1
},
]
},
computed: {
totalPrice () {
let total = 0;
//1.普通for循环
// for (let i = 0; i < this.books.length; i++) {
// total = total + this.books[i].price * this.books[i].count
// }
// 2.增强for循环
// for (let i in this.books) {
// total = total + this.books[i].price * this.books[i].count
// }
// 3.for of
// for (const book of this.books) {
// total = total + book.price * book.count
// }
// return total
// 2.使用高阶函数
// return this.books.map(function (book) {
// return book.price * book.count
// }).reduce(function (preValue,currentValue) {
// return preValue + currentValue
// })
// 3.高阶函数简写（箭头函数）
return this.books.length === 0 ? 0 : this.books.map(book => book.price * book.count).reduce((preValue,currentVlue) => preValue + currentVlue)
}
},
methods: {
increment(index){
this.books[index].count++
},
decrement(index){
this.books[index].count--
},
remove(index){
this.books.splice(index,1)
}
},
filters:{
//过滤器
showPrice(price){
return "￥" + price.toFixed(2)
}
}
})
// 1.filter过滤函数
const nums = [2,3,5,1,77,55,100,200]
//要求获取nums中大于50的数
//回调函数会遍历nums中每一个数，传入回调函数，在回调函数中写判断逻辑，返回true则会被数组接收，false会被拒绝
let newNums = nums.filter(function (num) {
if(num > 50){
return true;
}
return false;
})
//可以使用箭头函数简写
// let newNums = nums.filter(num => num >50)
console.log(newNums);
// 2.map高阶函数
// 要求将已经过滤的新数组每项乘以2
//map函数同样会遍历数组每一项，传入回调函数为参数，num是map遍历的每一项，回调函数function返回值会被添加到新数组中
let newNums2 = newNums.map(function (num) {
return num * 2
})
//简写
// let newNums2 = newNums.map(num => num * 2)
console.log(newNums2);
// 3.reduce高阶函数
//要求将newNums2的数组所有数累加
//reduce函数同样会遍历数组每一项，传入回调函数和‘0’为参数，0表示回调函数中preValue初始值为0，回调函数中参数preValue是每一次回调函数function返回的值，currentValue是当前值
//例如数组为[154, 110, 200, 400],则回调函数第一次返回值为0+154=154，第二次preValue为154，返回值为154+110=264，以此类推直到遍历完成
let newNum = newNums2.reduce(function (preValue,currentValue) {
return preValue + currentValue
},0)
//简写
// let newNum = newNums2.reduce((preValue,currentValue) => preValue + currentValue)
console.log(newNum);
//三个需求综合
let n = nums.filter(num => num > 50).map(num => num * 2).reduce((preValue,currentValue) => preValue + currentValue)
console.log(n);
- 代码分析：
- 这里使用vue绑定了id为app的元素，这里的#也就是id的意思吧
- 用books存数据，html中通过v-for遍历读
- 每一个book都是一个对象，这里有四个字段
- computed是计算的方式，调用的使用没有参数，可以缓存
- 通过let定义一个局部变量，可以通过for循环或者高阶函数map+reduce得到最终的totalPrice，通过箭头（lambda函数）得到结果
- incer、decre和remove比较简单；decre在1的时候进行了控制，不触发往下减
- 对于remove而言，spice函数两个参数，意味着在index的位置删掉1个元素，如果有第三个参数，表示加入的新元素
- filter过滤器对最终的结果进行可视化的转换，这里是保留两位小数的意思
- 对于数组的操作可用filter + map + reduce简化！
总结
- 本文详细地介绍了一个html + css + js的例子
- 其中使用了vue中的v-for，其他均为基础的css和js知识
- vue的精髓就是通过一个new Vue绑定对应的元素和对应的值，然后改变值的时候显示会发生变化