一、事件修饰符
enter：回车生效（常用于替代判断是否按下回车事件）
once：单次生效（只会生效一次）
stop：阻止事件冒泡
self：阻止事件冒泡（只有点击自身时才生效）
capture：将后面的事件变为捕获事件
prevent：阻止默认事件（比如：a标签之类的）
二、axios的使用
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
Axios 在Vue中的使用
1 <div id="app"></div>
2 <script src="node_modules/vue/dist/vue.js"></script>
3 <!-- 基于promise的 -->
4 <script src="node_modules/axios/dist/axios.js"></script>
5 <script>
6 let vm = new Vue({
7 el: "#app",
8 // 数据被初始化后会进行调用，this只想vm实例,钩子函数。
9 created() {
10 // var that = this;
11 this.getData();
12 },
13 method: {
14 getData() {
15 axios.get("./carts.json").then(res=> {
16 // console.log(res);
17 this.products = res.data;
18 }, err=> {
19
20 });
21 }
22 },
23 data: {
24 products: []
25 }
26 })
27 </script>
三、购物车案例
（1） 使用axios并展示到view中
//VM实例创建后会自动执行这个函数
created() {
// 这里使用箭头函数，会使得this指向vue的实例对象
axios.get("./book.json").then((data) => {
this.bookList = data.data;
})
},
（2）v-bind
使用v-bind将对象绑定到dom属性上(v-bind:src === :src)
<img :src="item.imgUrl" alt="">
（3） v-model.number
<input type="number" v-model="item.number" min="1">
（4）实现删除功能
delBook(index) {
this.bookList = this.bookList.filter((item, suo) => {
return suo != index;
})
},
（5）实现全选和反选
selectAll() {
this.bookList.forEach((item) => {
item.isSelect = this.isAll;
})
},
（6）单个选项影响全选按钮
selectOne() {
this.isAll = this.bookList.every((item) => {
return item.isSelect == true;
})
},
（7）实现计算总价功能
priceNum() {
return this.bookList.reduce((num, item) => {
if (item.isSelect) {
num += parseFloat((item.price * item.number));
return num;
} else {
return num;
}
},0)
}
注意：在这个案例中使用函数表达式时会有一些缺陷，当整个页面中有值发生变化时，都会影响计算函数的执行。所以引入两个概念：过滤器和computed（自动计算属性）
四、filters过滤器
Vue中过滤器有两种定义方式（1）全局定义（2）局部定义
//全局定义
Vue.filter('myfilter',function(val){
return val;
//返回处理过的值
}
)
//局部定义
4 filters: {
5 toFixed(input, param1) {
6 return '￥' + input.toFixed(param1);
7 }
8 }
computed使用示例
computed: {
// 这里面写函数,这个函数就是数据模型！！！
total() {
console.log("总价重新进行了计算")
return this.bookList.reduce((total, item)=> {
if(item.isSelect) {
// 加入到total
total += parseFloat((item.price * item.number))
return total;
}else {
return total;
}
}, 0)
},
isAll: {
get() {
return this.bookList.every((item)=> {
return item.isSelect == true;
})
},
set(newVal) {
this.bookList.forEach((item)=> {
item.isSelect = newVal
})
}
}
},
自动计算属性，一旦依赖的数据模型发生变化就会重新执行代码
自动计算属性不支持异步代码！！！
案例源码：
<!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">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<title>Document</title>
</head>
<body>
<div id="app">
<div class="container">
<table class="table table-bordered table-hover">
<tr>
<th>
全选
<input type="checkbox" v-model="isAll">
</th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr v-for="(item, index) in bookList">
<td>
<input type="checkbox" v-model="item.isSelect">
</td>
<td>
<img :src="item.imgUrl" alt="">
<span>{{item.title}}</span>
</td>
<td>
<span>{{item.price}}</span>
</td>
<td>
<input type="number" v-model="item.number" min="1">
</td>
<td>
<span>￥{{(item.number*item.price).toFixed(2)}}</span>
<span>￥{{(item.number*item.price) | toFixed(2)}}</span>
</td>
<td>
<button class="btn btn-danger" @click="deletePro(index)">删除</button>
</td>
</tr>
<tr>
<!-- 在{{}} 可以使用表达式-->
<td>总价:{{total.toFixed(2)}}</td>
</tr>
</table>
</div>
</div>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script src="node_modules/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
created() {
// 这个vm实例创建之后会自动执行这个函数。
axios.get("./book.json").then((data)=> {
console.log(data.data)
// 将获取到的数据赋值给booklist
this.bookList = data.data
})
},
data: {
bookList: [],
msg: "je"
},
computed: {
// 这里面写函数,这个函数就是数据模型！！！
// 自动计算属性: 一旦依赖的数据模型发生变化就会重新执行逻辑
// 自动计算属性不支持异步代码！！！
total() {
console.log("总价重新进行了计算")
return this.bookList.reduce((total, item)=> {
if(item.isSelect) {
// 加入到total
total += parseFloat((item.price * item.number))
return total;
}else {
return total;
}
}, 0)
},
isAll: {
get() {
return this.bookList.every((item)=> {
return item.isSelect == true;
})
},
set(newVal) {
this.bookList.forEach((item)=> {
item.isSelect = newVal
})
}
}
},
methods: {
// 单独选中一个产品
// selectOne(){
// // every方法当所有的item满足条件时返回true，一个不满足返回false
// this.isAll = this.bookList.every((item)=> {
// return item.isSelect == true;
// })
// },
filters: {
toFixed(input, param1) {
return '￥' + input.toFixed(param1);
}
},
// 删除商品
deletePro(ind) {
// 使用filter进行删除操作，过滤掉不满足条件的数据
this.bookList = this.bookList.filter((item, index)=> {
return index != ind;
})
}
}
})
</script>
</body>
</html>
