版权声明：yx全栈学习 https://blog.csdn.net/qq_43671996/article/details/84105925
“vue学习笔记”
学习网站：1.https://cn.vuejs.org/v2/guide/
2. http://www.runoob.com/vue2/vue-tutorial.html
- 下载vue.js
方法1：http://unpkg.com/[email protected]/dist/vue.js
方法2：gitup下载
2.入门操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--引入vue.js -->
<script src="../vue.js"></script>
</head>
<body>
<!-- vue的容器 -->
<div id="app">
<!-- 通过mustache语法展示 -->
{{msg}}
</div>
<script>
// 实例化vue
var app=new Vue({
el:'#app',//相当于document.getElementById('app');
data:{//核心数据放置位置
msg:'Hellow,Vue'
}
})
</script>
</body>
</html>
3.vue的几种常用语句
v-text；v-html；v-show；v-on；v-bind；v-if；v-for；v-model；v-once；v-pre；v-cloak;
1) v-text： 需要绑定在html标签上，以v-开头，“v”代表vue ,text代表文本
2) v-html ：更新内部的innerHTML,但需要注意：v-html会把一些标签元素内容data数据，暴露给外部，会造成一些XSS攻击，在渲染账号密码等隐私数据时请不要采用这种方式
3) v-show ：表示通过数据的true&false，来控制标签的显示隐藏。
4) v-on ：通过事件监听来实现相应的操作功能 "v-on" ==>可简写为@
5) v-bind：表示绑定标签的属性内容 v-bind==>':'
6) v-if表示条件判断，当条件满足时，自动执行v-if内容，否则执行v-else的内容。
// 注意：
// 1.当v-if满足时，v-else内容不被渲染
// 2.v-if&v-else之间不能有其他语句，除非它是v-else-if
// 3.v-show 只是简单的控制display：none&display:block，它的原理就是把所有标签渲染成功之后，通过css来操作显示隐藏
// v-if 属于条件判断语句，当条件满足渲染某一个页面标签，否则直接不渲染
// 选取原则：
// 当拥有频繁的tab切换时，建议你使用v-show
// 当你有较高的渲染需求时，为了节省你的初始渲染开销，建议你使用v-if
// 4.一个循环体内应该包含至少有一个v-if,至多有一个v-else，可以含有多个v-else-if.
7) v-for:可以绑定数组的数据来渲染一个项目列表：
8) v-model:用于实现表单空间的数据双向绑定//限制范围为：input textarea ,select
9) v-once:只被用来加载那些初始渲染页面需要加载一次的数据，之后不再更改，可以用于优化页面加载。
10) v-pre:
11) v-cloak:
//购物车代码
<!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>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div class="container">
<table class="table">
<thead>
<tr>
<th class="text-center">
全选
<input type="checkbox" v-model="allSelected" @click="selecteAll(allSelected)">
</th>
<th class="text-center">商品</th>
<th class="text-center">数量</th>
<th class="text-center">单价(元)</th>
<th class="text-center">金额(元)</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in items" :key="index">
<th class="text-center">
<input type="checkbox" v-model="item.selected">
</th>
<td class="text-center">{{item.name}}</td>
<td class="text-center">
<button @click="item.quanlity<=0?item.quanlity=0:item.quanlity--">-</button>
<input type="number" v-model.number="item.quanlity" style="width:100px;text-align:center;">
<button @click="item.quanlity>=20?item.quanlity=20:item.quanlity++">+</button>
</td>
<td class="text-center">{{item.price}}</td>
<td class="text-center">{{item.price*item.quanlity}}</td>
<td class="text-center">
<template v-if="index%2==0">
<button type="button" class="btn btn-primary" @click="del(index)">Delete</button>
</template>
<template v-if="index%2==1">
<button type="button" class="btn btn-warning" @click="del(index)">Delete</button>
</template>
</td>
</tr>
<tr>
<td colspan="2" class="text-center">
<button type="button" class="btn btn-danger" @click="delSelected">删除所选商品</button>
</td>
<td colspan="2" class="text-center">商品总件数(件)：{{TotalNum}}</td>
<td colspan="2" class="text-center">商品总金额(元)：{{TotalPrice}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
items:[
{selected:true,name:'iphone5',quanlity:3,price:1000},
{selected:false,name:'iphone6',quanlity:6,price:2000},
{selected:false,name:'iphone7',quanlity:4,price:3000},
{selected:true,name:'iphone8',quanlity:3,price:4000},
{selected:true,name:'iphoneX',quanlity:8,price:5000}
]
},
computed:{
allSelected:{
get(){
return this.items.every((item,index)=>{
return item.selected
})
},
set(){}
},
TotalNum(){
return this.items.filter((item,index)=>{
return item.selected
}).length
},
TotalPrice(){
var selectedItems = this.items.filter((item,index)=>{
return item.selected
})
// console.log(selectedItems)
return selectedItems.reduce((sum,item)=>{
return sum+item.quanlity*item.price
},0)
}
},
methods:{
del(index){
this.items.splice(index,1)
},
selecteAll(value){
//1.当全选未勾选，点击，所有项都应该被勾选
//2.当全选已勾选，点击，所有项都应该取消勾选
this.items.map((item,index)=>{
item.selected=!value
})
},
delSelected(){
var result=this.items.filter((item,index)=>{
return !item.selected
})
this.items=result
}
}
})
</script>
</body>
</html>