以下文章皆为观看慕课网https://www.imooc.com/learn/796中“河畔一角”老师的讲解做的笔记，仅供参考。
一、Vue特点
Vue是MVVM的框架，也就是模型视图->视图模型。Vue对数据的操作是直接操作模型里的数据，间接的修改Dom中绑定的数据，模型反向修改Dom中的值。
Vue的三大特点是：易用，灵活，高效。
易用-->渲染比较方便（不用像jquery那样每个去取）；
灵活-->渐进式：声明式渲染、组件、路由、状态管理、构建，也就是缺什么补什么。
高效-->16k的gzip，运行大小够小，超快的虚拟DOM，最省心的优化（vue1-->vue2版本的优化，废除了过滤器（js可以做到的就没必要再在Vue上面去做，核心放在高效））。
二、Vue的常用指令介绍
三、创建一个Vue的实例
var vm = new Vue({ el: "#app", data: { //定义数据 }, filters: { //Vue内部定义filters局部过滤器 //过滤器filter 对接口返回的字段进行转换等（比如格式化，字段的不同效果） }, mounted: function () { //初始化时执行的方法,可以在这里改变数据，添加方法。类似于jquery的ready，vue实例化完成后需要调用的方法 //1.0版本生命周期的代码是放在ready函数，2.0版本使用mounted函数代替ready，与data和methods同级. //mounted函数并不能保证实例已经插入文档，所以要用 this.$nextTick(function () { //保证this.$el已经插入文档 }) }, methods: { //所有的方法写在这里 }});//全局过滤器Vue.filter();
四、v-for的vue2.0使用与原生js以及Jquery的对比
循环遍历：
(1)js:
obj.forEach(function(value,index){});
(2)jQuery:
$.each(function(index,value){});
(3)vue2.0:
<i v-for="(value,index) in arr"></i>
五、vue-resource小谈
vue-resoure插件主要用于数据交互方面
this.$http.get("请求地址"，{请求参数（可选）}).then(function(res)){ //取数据。res返回的数据并不是真正的数据 ，而是由vue封装的，全部，包括 data,header等应该用，res.data获取数据对象});
六、过滤器的使用
过滤器，全局过滤器的写法；调用过滤器时，加“|”，后面跟过滤器的名字，如果过滤器有参数，用函数写法加括号和参数名。
在html中语法：
<span>{{item.productPrice | formatMoney(‘元‘)}}</span>
在js中语法：
//全局过滤器,第一个参数"money"是过滤器的名称,value是回调函数,type是参数//注意全局的过滤器没有sVue.filter("money",function(value,type){
return "￥"+value.toFixed(2) + type;
})
//局部过滤器
new Vue({
el:"#app",
filters:{
formatMoney:function(value){
return "￥"+value.toFixed(2);
}
}
});
七、小知识点
1.可以用typeof item.xxx == ‘undefined‘来检测属性存不存在。
如果不存在，要么用Vue.set给item全局注册一个checked的属性，赋值为true；
vue.set(target,key,value)
要么用vm.$set局部注册。
vm.$set(target,key,value)
如果存在，item.checked = !item.checked将checked的值取反。
[email protected]中不止可以调用函数,也可以写表达式,但表达式要么是一元表达式,要么是三元表达式,不可以出现声明或业务逻辑在里面
3.删除:通过indexOf获取索引,从当前位置开始删除一个元素
var index = this.productList.indexOf(this.curProduct); this.productList.splice(index,1)
4.js中slice与splice的差别：都是截取数组，slice重新创建一个数组,不影响原来的数组，splice在原先的数组的基础上操作，是会影响原生数组
5.通过computed:{}实时计算
6.关于循环中的选中
<li v-bind:class="{‘check‘:index==currentIndex}" @click="currentIndex=index"></li>
关于不同方式的选中
<li v-bind:class="{‘check‘:isCheck==1}" @click="isCheck=1">配送方式一<li>
<li v-bind:class="{‘check‘:isCheck==2}" @click="isCheck=2">配送方式一<li>