路漫漫其修远兮
吾将上下而求索

vue学习:购物车地址选配笔记

使用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);
},

未经允许不得转载:江哥架构师笔记 » vue学习:购物车地址选配笔记

分享到:更多 ()

评论 抢沙发

评论前必须登录!