vue学习的总结，用vue实现一个简单的书籍购物车
程序员文章站
2022-03-28 11:14:15
...
最近学习了vue对学习的内容做了以下总结：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="./js/vue.js"></script> <title>Document</title> <style> [v-cloak]{ display: none; } .objcolor { color: red; } </style> </head> <body> <div id="app" v-cloak> <!--斗篷：防止在Vue还未加载的时候显示乱码--> <p>代号:{{name}} </p> <!--插值表达式--> <p v-once>{{number + ":" + name}}</p> <!--让数据不动态改变--> <p v-html="html">{{html}}</p> <!--将html代码进行解析，使得Vue能够认识--> <p v-text="name"></p> <!--将data中的数据展示出来，但是标签内不能够写别的东西，不然会被替换--> <p v-pre>{{name}}</p> <!--取消Vue对本行内容的解析--> <p v-bind:class="bindcolor"> <!--v-bind动态绑定属性，--> {{number}} </p> <p :class="{objcolor:iscolor}" @click="change"> <!--v-bind绑定属性，对象语法v-bind:class={"类名：值，类名：Boolean"}--> {{number}} </p> <p :class="[bindcolor]"><!--v-bind绑定属性，数组语法v-bind:class="[定义在data中的类名]"--> 代号：{{name}} </p> <p :style="{color:'red'}">{{name}}</p> <p :style=stylecolor()>{{name}}</p> <p :style="[stylcolor]">{{name}}</p> <!--绑定style语法：对象语法：v-bind:style="{属性名：'属性值'}" 数组语法：v-bind：style="[将style以{属性名:'属性值'}的形式绑定在data中的名字]"--> <p>{{hw}}</p> <ul> <li v-for="sj in iphon"> <!-- v-for="（自定义的名字，index（下标）） in （遍历的对象）"，循环遍历对象--> 编号：{{sj.id}} - 名字：{{sj.name}} - 价格：{{sj.price}} </li> </ul> <h2>总价：{{all}}</h2> <div> <!-- v-on:监听的事件="运行的函数方法"，本例就是监听点击次数--> <h5 >点击次数：{{cs}}</h5> <button @click="djnumber">按钮</button> </div> </div> <script> new Vue({ el:"#app", //挂载在那个位置 data:{ //数据 number:"代号", name:"black", html:"<h3>代号小黑</h3>", bindcolor:"objcolor", iscolor:'true', stylcolor: {color:'red'}, iphon:[ { id:1, name:"华为", price:1800 }, { id:2, name:"华为2", price:1800 }, { id:3, name:"华为3", price:1800 }, { id:4, name:"华为4", price:1800 } ], cs:0 }, methods: { //定义方法 change(){ return this.iscolor = !this.iscolor }, stylecolor:function(){ return {color:'red'} }, djnumber(){ //点击次数 return this.cs++ } }, computed: { //计算属性 hw(){ //以方法的形式定义，以变量的形式使用 return this.number+":"+this.name }, all(){ //计算4个华为的总价 let sevire = 0; for(let i = 0; i<this.iphon.length; i++){ sevire += this.iphon[i].price } return sevire }, }, }) </script> </body> </html>
还顺手写了一个购物车的小案例，有兴趣的可以看看哈，有问题的地方希望各位大佬帮忙指出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
table{
border: 1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0;
}
th, td{
padding: 8px 16px;
border: 1px solid #e9e9e9;
text-align: center;
}
th{
background-color: #f7f7f7;
color: #5c6b77;
font-weight: 600;
}
</style>
<script src="./js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<div v-if="books.length"> <!--判断如果books这个数组有长度执行以下-->
<table>
<thead>
<tr>
<th></th>
<th>名称</th>
<th>价格</th>
<th>日期</th>
<th>数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(book,index) in books"> <!--循环遍历books这个数组内的内容-->
<td>{{book.id}}</td> <!--显示书籍的id-->
<td>{{book.name}}</td> <!--显示书籍的名字-->
<td>{{book.price | fprice}}</td> <!--显示书籍的价格，fprice是一个过滤器方法-->
<td>{{book.data}}</td> <!--显示书籍日期-->
<td>
<button @click="decrease(index)" :style="disappear(index)">-</button> <!--一个减号按钮，监听点击事件并执行decrease方法，动态绑定属性disappear函数-->
{{book.count}} <!--显示书籍数量-->
<button @click="increase(index)">+</button> <!--一个加号按钮，监听点击事件并执行increase方法 -->
</td>
<td>
<button @click="remove(index)">删除</button> <!--一个删除按钮，监听点击事件并执行remove方法-->
</td>
</tr>
</tbody>
</table>
<h2>总价：{{allprice | fprice}}</h2> <!--显示书籍总价，使用过滤器显示小数点后两位和"$"符号-->
</div>
<div v-else> <!--如果为空执行以下代码-->
<h2>
{{text}} <!--使用插值表达式显示数据text的内容-->
</h2>
</div>
</div>
<script>
const vm = new Vue({
el:"#app", //将vue挂载到app上
data:{ //定义需要使用到的数据
books:[ //所有书籍的数据
{
id:1,
name:"《算法导论》",
data:"2006-09",
price:85.00,
count:1
},
{
id:2,
name:"《UNIX编程算法艺术》",
data:"2006-02",
price:50.00,
count:1
},
{
id:3,
name:"《编程珠玑》",
data:"2018-10",
price:39.00,
count:1
},
{
id:4,
name:"《代码大全》",
data:"2006-09",
price:128.00,
count:1
},
{
id:5,
name:"《Vue.js入门》",
data:"2015-09",
price:160.00,
count:1
}
],
text:"您的购物车为空"
},
methods: { //用于定义方法
increase(index){ //添加书籍的数量，需要传入index是因为需要知道是哪一本书籍被点击添加了
this.books[index].count++
},
decrease(index){ //减少书籍的数量，需要传入index是因为需要知道是哪一本书籍被点击减少了
this.books[index].count--
},
disappear(index){ //判断当书籍数量为1时，将“-”这个按钮删除掉
if(this.books[index].count <= 1){
return{display:'none'}
}
},
remove(index){ //从购物车中移除这本数的所有信息，通过splice方法从数组中删除书籍的index以达到删除书籍所有信息的目的
return this.books.splice(index,1)
}
},
computed: { //计算属性
allprice(){ //用于计算书籍的总价，定义一个变量用于储存价格，循环给变量加上每一种书籍的总价，返回变量
let resut = 0;
for(let i = 0; i < this.books.length; i++){
resut += this.books[i].price*this.books[i].count
}
return resut
}
},
filters: { //过滤器
fprice(price){ //给价格添加上"$"和显示小数点后两位
return "$" +price.toFixed(2);
}
}
})
</script>
</body>
</html>