江哥架构师笔记–
使用vue2.0实现购物车和地址选配功能 笔记
http://www.imooc.com/learn/796
https://git.andblog.cn/root/vue-shop
1-1 vue基础知识介绍
vue-ressource 前后交互，发送ajax插件
特点：易用，灵活，高效
windows安装
首先要在windows上面安装nodejs，在官网下载。安装webstorm，在官网下载。安装vue-cli，使用npm安装，在终端：npm install -g vue-cli，全局安装vue-cli
2-1 nodejs和npm的安装和环境搭建 (07:21)
http://www.runoob.com/nodejs/nodejs-install-setup.html
https://segmentfault.com/a/1190000007829080
Linux 上安装 Node.js
直接使用已编译好的包
Node 官网已经把 linux 下载版本更改为已编译好的版本了，我们可以直接下载解压后使用：
# wget https://nodejs.org/dist/v10.9.0/node-v10.9.0-linux-x64.tar.xz // 下载
# tar xf node-v10.9.0-linux-x64.tar.xz // 解压
# cd node-v10.9.0-linux-x64/ // 进入解压目录
# ./bin/node -v // 执行node命令 查看版本
v10.9.0
解压文件的 bin 目录底下包含了 node、npm 等命令，我们可以使用 ln 命令来设置软连接：
ln -s /usr/software/nodejs/bin/npm /usr/local/bin/
ln -s /usr/software/nodejs/bin/node /usr/local/bin/
查看已安装的模块
npm list
将源换为淘宝的
具体查看：https://segmentfault.com/a/1190000009151389
npm config set registry https://registry.npm.taobao.org 设定为淘宝
npm install -g cnpm --registry=https://registry.npm.taobao.org
创建新项目
创建新项目有两种，一种是命令行手动创建一个项目
具体查看：https://segmentfault.com/a/1190000009151389
一种是使用webstorm里面创建工程，按照一步一步设置，也一样
运行
点击webstorm里面左边的npm菜单，点击dev，运行示例程序
或者命令行输入：
$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev
运行示例程序
打开浏览器：localhost:8080查看示例页面
npm install --save参数意思
https://segmentfault.com/q/1010000000403629
cpm install module-name -save 自动把模块和版本号添加到dependencies部分
cpm install module-name -save-dve 自动把模块和版本号添加到devdependencies部分
2-1 创建vue实例
一个最小单元
new Vue(
el: "#app",
data: {
title: "hello world"
},
filters: {
局部过滤器
},
mounted: function(){
this.cartView();
页面加载完成后会执行一些初始化操作
},
computed: {
实时渲染一些内容
},
methods:{
cartView: function(){
this.title = "hi"
}
其他一些方法
}
)
3-1使用v-for渲染商品
这里的实验都是直接访问html，而没有运行：npm run dev。工作过程是浏览器将原始的html下载到本地（包括过滤器什么的都是没有渲染的），然后调用vue的js插件进行渲染显示出来
将resorce插件js加载到html里面
先在methods里面定义一个cartView方法，然后在mountd里面使用这个方法，页面加载完成后调用这个方法来加载数据
<li v-for="(item, index) in productList"> v-for有两个返回，一个是值，一个是索引
<div class="item-name">{{item.productName}}</div>
<dd v-for="part in item.parts" v-text="part.partsName"></dd> 嵌套使用v-for，v-text就是将变量以文本的方式显示出来
<input type="text" value="0" disabled v-model="item.productQuantity"> 当数量变化的时候，总价跟着数量已起变，这里要双向数据绑定
<div class="item-price-total">{{item.productPrice * item.productQuantity}}</div> 总价
<img v-bind:src="item.productImage" v-bind:_src="item.productImage" alt="烟"> 加载图片使用这个指令，直接调取变量不行。v-bind可以绑定显示另外一个属性，
便于调试的时候查看具体的值是什么，是否已经获取到这个值
4-1 vue过滤器使用
箭头函数是es6的新语法，下面两个函数的作用是一样的。使用箭头函数可以让函数里面的作用域和函数外的作用域是相同的
this.$http.get("data/cartData.json", {"id":123}).then(function(res){
_this.productList = res.data.result.list;
_this.totalMoney = res.data.result.totalMony;
})
this.$http.get("data/cartData.json", {"id":123}).then(res=>{
this.productList = res.data.result.list;
this.totalMoney = res.data.result.totalMony;
})
全局过滤器，所有页面都可以使用这个过滤器。局部过滤器只有这个页面可以
局部过滤器，接收参数value为通过过滤器传入的值
filters: {
formatMoney: function(value){
return "￥ " + value.toFixed(2);
}
}
全局过滤器，接收的第二个参数为过滤器后面的参数
<div class="item-price">{{item.productPrice | money("元")}}</div>
Vue.filter("money", function(value,type){
return "￥" + value.toFixed(2) + type
})
5-1 商品金额计算和单选全选
下面是两种不同方式绑定点击事件，都可以。
javascript:;的作用是点击此按钮后不刷新页面，也不跳转，可以将此删除测试下效果
点击按钮，执行changeMoney方法，将item对应的元素加或者减，这里显示的变化， 总金额也变化
<a href="javascript:;" v-on:click="changeMoney(item, -1)">-</a>
<input type="text" value="0" disabled v-model="item.productQuantity">
<a href="javascript:void 0" @click="changeMoney(item, 1)">+</a>
单选
通过v-bind来为元素添加class属性，必须用大括号括起来。
通过点击事件来将item.checked设置为true或false，v-bind实时来决定是否显示
<a href="javascript:void 0" class="item-check-btn" v-bind:class="{'check':item.checked}" @click="selectedProduct(item)">
多选
v-bind的简写为:， 下面两个是相同的
<a class="item-check-btn" v-bind:class="{'check':item.checked}">
<a class="item-check-btn" :class="{'check':item.checked}">
单选里面的item.checked无法定义到vue的变量里面，因为是循环去调用
全选只有一个，可以定义到vue的变量里面，不用在方法里面检查是否未定义
只有定义的变量，v-bind才会去监听，不然不会生效的
5-2 总金额计算，删除
总金额计算
每次计算之前都要将金额清零，不然就变成累加了
html中只显示总金额变量，每个按钮上的事件上都加上计算函数，每发生一次变化，重新计算一次
遍历所有元素，只加已经选中的商品
calcTotalPrice: function(){
var _this = this;
this.totalMoney = 0;
this.productList.forEach(function(item, index){
if(item.checked){
_this.totalMoney += item.productPrice * item.productQuantity;
}
})
}
删除
首先定义delFlag变量
删除按钮绑定事件，点击的时候变量为true，
当变量为true，显示md-show这个class属性，弹框
当变量为true，显示遮罩，如果为false，整个div都不存在
<a href="javascript:void 0" class="item-edit-btn" @click="delFlag=true">
<div class="md-modal modal-msg md-modal-transition" id="showModal" v-bind:class="{'md-show':delFlag}">
<div class="md-overlay" v-if="delFlag"></div>
当点击x，或者点击no的时候，需要将flag置为false，
当用户点击yes的时候，需要删除此商品，需要知道该商品的id。因此，重新设置一个变量来做中间消息传递，将商品的id传递到函数中。
删除后将flag置为false，重新计算商品数量
<a href="javascript:void 0" class="item-edit-btn" @click="delFlag=true; pIndex=index">
delProduct: function(){
this.productList.splice(this.pIndex, 1);
this.delFlag = false;
this.calcTotalPrice();
}
6-1 地址过滤和展开
只显示三个地址，这里使用过滤器，定义limitNumber为3，只显示前三个
<li v-for="(item,index) in filterAddress">
computed: {
filterAddress: function(){
return this.addressList.slice(0, this.limitNumber);
}
},
当点击更多的时候，触发事件，将limitNumber设置为所有长度，computed实时计算，这里显示出来，
showHide: function(){
if(this.limitNumber == 3){
this.limitNumber = this.addressList.length;
}else{
this.limitNumber = 3;
}
}
6-2 卡片选择，设置默认
点击选中功能
每个图片都有一个索引，当点击第2张图片的时候，index为2。
这里将index赋给currentIndex，每个图片判断currentIndex是否为自己图片的索引
<li v-for="(item,index) in filterAddress" v-bind:class="{'check':index==currentIndex}" @click="currentIndex=index">
设置默认功能
设置点击事件，将图片id传入方法，遍历list，当list中某个元素和此id匹配，设置为默认，其他都设置为false
然后html根据此重新渲染
setDefault: function(addressId){
this.addressList.forEach(function(address, index){
if(address.addressId == addressId){
address.isDefault = true;
}else{
address.isDefault = false;
}
})
}
另外一种选中方法，和上面的类似
第一个<li v-bind:class="{'check':shoppingMethod==1}" @click="shoppingMethod=1">
第二个<li v-bind:class="{'check':shoppingMethod==2}" @click="shoppingMethod=2">
补充
地址删除
和上面的类似
<div class="addr-opration addr-del" @click="pIndex=index; delAddress()">
delAddress: function(){
this.addressList.splice(this.pIndex,1);
},
–
–
–
评论前必须登录！
注册