迈向成功的第一步--个人自学前端学习记录

记录自己日常学习的内容

我是转行前端,现在是个小白,之前学了点html,css,能写一写好看的静态页面就以为自己可以了,找工作之后才发现,人家根本不要,才发现自己的水平连入门都算不上,于是就打算深入学习前端,但是生活压力太大,又不能按部就班,于是我快速过了一遍js,jquery,php等技术,打算直接上手vue,遇到不会的再想办法解决,我会把学习的进度记录下去,主要是为了自学,觉得可以也可以借鉴,希望自己有朝一日能成功吧.

用vue实现购物车操作

1.分析要实现的功能
1.选择切换(单个列表选择切换和多选)
2.删除(删除单个和删除多个列表)
3.商品数量的增加和减少
4.总计数量和价格
第一步html样式

	
	
	
	
	

		
  
			

				

					

						
					
					
商品名称
					
商品产地
					
商品数量
					
商品单价
					
商品小计
					
操作
				
			
			

				

					

						
					
					
{{item.name}}
					
{{item.adress}}
					

						
						{{item.num}}
						
					
					
{{item.price}}
					
{{item.num*item.price}}
					

						删除
					
				
				

					

						删除所选
						总计:{{getTotal.totalNum}}个,共{{getTotal.totalPrice}}
						结算
					
				
			
		
	

这里要注意几个地方:
1.表格table的几个属性:
cellspacing='0’规定的是每个小单元格之间的空隙
cellpadding='10’规定的是每个单元格与内容的间距
2.表格 行col的属性:
**colspan=‘7’**规定单元格可横跨格数
3.@click="item.num>0 ? item.num-- :’’ 这里用三元运算,判定产品的个数是否大于0,是的话就可以继续减,否则就无效果了,避免出现负数

css样式

		th,td{border: 1px solid #ddd;}	
		.check{
			display: block;
			background: url(check.png) no-repeat;
			background-size: cover; 
			width: 20px;
			height: 20px;
		}
		.check-true{
			display: block;
			background: url(check-true.png) no-repeat;
			background-size: cover; 
			width: 20px;
			height: 20px;
		}

js代码

分析
1.创建把vue对象,把基础的数据结构写好,挂载点el,数据模型data
2.mounted是一个钩子函数,我现在基础很薄弱,理解的可能不对,我先贴一张自己找的图

这里边有一个地方就是mounted,我的理解是这些钩子分别代表vue执行的不同阶段,而mounted的解释是在html渲染后,也就是说我的mounted函数会在html加载完立马就执行,就相当于初始化的意思了
3.vue中有个$SET方法是往data里加入数据,这里相当于加入了select=false
mounted:function(){
_this=this;
this.list.map(function(item){
_this.$set(item,‘select’,false)
})
}
这样通过map遍历list中的每一个对象都有一个select=false了;然后通过html中这句代码,就可以控制选中和非选中的样式,

this.$set(this.data,”key”,value’)vue中在data添加新属性,可以同时触发视图更新.

顺便回忆一下遍历数组的方法
1.map()方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。全部返回形成新数组.<
2.every()如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true.
3.filter()方法将匹配元素集合缩减为匹配指定选择器的元素。只返回符合匹配值的元素,形成一个数组
4.for循环. 必须知道数组的长度.
5.forEach循环，循环数组中每一个元素并采取操作， 没有返回值， 可以不用知道数组长度

isSelectAll(){
			 return	this.list.every(function(item){
			 		return item.select
				})
			}

这里every遍历选择的项返回的是true或false

selectProduct(item){
			for (var i = 0; i < this.list.length; i++) {
					this.list[i].select=!item //item指的是传入的参数isSelectAll,如果isSelectAll是true,那么list的每一个对象的select的值都是false
				}	
			}

通过这几句代码实现全选的切换

dele(index){
				this.list.splice(index,1);//删除当前行
			},
deleteProduct(){
				this.list=this.list.filter(function(item){ return !item.select})//删除选择的
			}

这两句是删除代码的

getTotal(){
				totalNum=0;
				totalPrice=0;
				var total=this.list.filter(function(item){return item.select})
				for (var i = 0; i < total.length; i++) {
					totalNum+=total[i].num;
					totalPrice+=total[i].num*total[i].price;
				}
				return {totalNum:totalNum,totalPrice:totalPrice}
			}

这里是计算总计的,total指的是选择的商品列表,for循环,计算出总数目和总价格调用即可.

贴出全部代码

	
	
	
	
	
	


	

		
  
			

				

					

						
					
					
商品名称
					
商品产地
					
商品数量
					
商品单价
					
商品小计
					
操作
				
			
			

				

					

						
					
					
{{item.name}}
					
{{item.adress}}
					

						
						{{item.num}}
						
					
					
{{item.price}}
					
{{item.num*item.price}}
					

						删除
					
				
				

					

						删除所选
						总计:{{getTotal.totalNum}}个,共{{getTotal.totalPrice}}
						结算
					
				
			
		
	

这个例子,加强了数组遍历的几种方式的理解,vue的常用指令是如何实现的,对生命周期有个初步的了解,这是我第一次写博客,有很多不足,希望各位大神能多多斧正,我也会坚持下去,为自己的未来走好每一步路