这两天（本着划水摸鱼的“宗旨”）做了一个小项目，算是复习了一下Vue的一些知识点。这里总结一下，供自己和大家参考。
组件化
vue大项目一般都会采用 组件化 的思想，这也符合公司 多人协作开发 的现实。
vue通过import来导入另一个组件中传出来的数据（变量/参数），比如：
import VueAxios from 'Vue-axios'
import axios from 'axios'
...
当然，在每一个组件中，写法也有所不同：
<template>
...
</template>
<script>
import ...
export default{
//在这里面写本组件/页面的js代码
}
//export：模块 ——方便导出，供别的组件使用
</script>
axios请求与响应数据
vue里面关于数据交互这一块做的真心不错：axios 和 fetch 各有千秋，不同使用条件使他们互补。关于fetch，我在这个小项目做了详细解说。
我在这次的项目里使用了axios（因为请求并不是很频繁）：
（页面初始时响应所有数据信息）
mounted(){
this.init();
}
methods:{
init(){
this.axios.get("/mxc/cart.json").then((response)=>{
let res=response.data;
this.cartList=res.data;
})
}
}
（本页面）跳转路由
比如，我的项目中有个“购物车”功能，在你选择完毕，点击结算时，可以通过 （前端）路由 的改变，来达到单页面跳转：
//html
<a href="javascript:;" v-bind:class="{'btn-dis':!CheckedCount}" @click="CheckOut">结算</a>
//js
CheckOut(){
if(this.CheckedCount){
//路由API的方法
this.$router.push({
path:'/address'
})
}
}
那么问题来了，学过vue的肯定要问了：问啥不直接用<router-link to="..."></router-link>？
emmmmmmm，都差不多吧（我感觉），这样会更流畅（“平滑”）一点。
不过上面的代码里面就引出了一个知识点：v-bind动态绑定
它以object形式写入，里面可以写表达式：
（是否添加选中类）
v-bind:class="{'check':checkedIndex == index}"
过滤器
比如，在购物车页面，每一个物品都有价格，主要就在这里，过滤器得到了应用：
它的格式：属性|格式
{{(item.productPrice*item.productNum) | currency}}
filters:{
currency(value){
if(!value) return 0.00;
return '￥'+value.toFixed(2)+'元';
}
}
计算属性
在地址页面，要是显示地址栏的话，会用到v-for循环：
<ul class="check" v-for="item in addressList">...</ul>
但是你总不能让一次性显示出来所有的地址吧，一般刚进来我会让它只显示比如前三个，这样看着好看一点：
<ul class="check" v-for="item in addressFilter">...</ul>
这时候就要 计算属性 出场了：这里它监听addressFilter的变化，并返回我们想要的值：
computed:{
addressFilter(){
// slice:切割 —— 与此相对应还有个 splice：摘选（多在删除时使用，直接对原数组修改，返回被删除的项目）
// limit：data中的属性，用于表示显示的数据量
return this.addressList.slice(0,this.limit);
}
}
计算属性监听数据的变化，属于“过程监听”，这与watch的“结果监听”不同
计算属性的用法：
1、比如：购物车“全选按钮”的监听
computed:{
checkAllFlag(){
// every：筛选，只有全部符合条件（true），才能返回true
// 与此相对的还有：some（只要有一部分符合条件（为true），就返回true）
return this.cartList.every((item)=>{
return item.checked;
})
}
}
2、再比如：购物车“总金额”的实时计算：
<div class="item-total">
总价：<span class="total-price">{{totalPrice | currency}}</span>
</div>
...
<script>
import ...
export default{
...
computed:{
totalPrice(){
let money=0;
this.cartList.forEach((item)=>{
if(item.checked){
money+=item.pPrice*item.pdNum;
}
});
return money;
}
}
}
</script>
插槽
这在很多人心中算是vue里最重要的一点了吧（因为难学啊…）
插槽的作用其实很简单，和组件差不多：在组件化里面，插槽在作用——复用 被“无限放大”——比如：一个页面的头和尾，完全可以定义成子组件template，然后在这个项目任何想用的地方添加slot即可。
（比如：自定义的模态框组件）
<modal v-bind:mdShow="modalConfim">
<template v-slot:message>
<p>你确认要删除此条数据吗？</p>
</template>
<template v-slot:btnGroup>
<a class="btn btn--m" href="javascript:;">确认</a>
<a class="btn btn--m btn--red" href="javascript:;">取消</a>
</template>
</modal>