Train of thought:

• Obtain the background data through VueResource, and check whether the debugging of browser console is successful. Use the hook function mounted to ensure that when all DOM are mounted on the page, request again
• Write the layout of the page, set the interface, and render the page through v-for
• Data format of rendering through filters filter
• Realize the function of adding and subtracting the quantity of goods (it can be done quickly by passing the judgment function to the parameter [- 1,1]), and at the same time, the minimum control quantity can only be reduced to 1
• Realize the function of selecting goods, add an attribute to $set to record whether the goods are selected or not, and change the selection status icon by controlling the class name to change the style
• Implement the function of select all and cancel all,. forEach traverses the list of goods, and each selected or unselected state created by adding $set
• Calculate the total closing price. You must clear 0 before each calculation, traverse the list of goods, calculate each time (quantity * unit price), and then add the goods
• Delete goods, use indexOf to determine the location of the selected goods, and use splice to delete the goods from the list of goods.

Knowledge points:

Code with detailed comments vue file:

<template>
	<div>
		<h1>Shopping Cart{{test}}</h1>
		<div>
			<ul v-for="item in productList">
				<!-- {'checked':item.ischecked} Changing class names dynamically by Boolean -->
				<li class="select" :class="{'checked':item.ischecked}" @click="selectedItem(item)" ></li>
				<li><img :src="item.productImage" alt=""></li>
				<li>{{item.productName}}</li>
				<li>{{item.productPrice|chineseYuan('element')}}</li>
				<li class="inp">
					<a href="javascript:;" @click="changeQuantity(item,-1)">-</a>
					<input type="text" v-model="item.productQuantity">
					<a href="javascript:;" @click="changeQuantity(item,1)">+</a>
				</li>
					
				<li>{{item.productPrice*item.productQuantity|chineseYuan('element')}}</li>
				<li @click="removeConfirm(item)">delete</li>
			</ul>
				<div class="footer">
					<div class="select" :class="{'checked':selectedAll}" @click="checkAll(true)" ></div>|
					<span>All election</span>|
					<span @click="checkAll(false)">Cancel all</span>|
					<span>Total amount:{{totalMoney}}</span>
				</div>
		</div>
		
		<!-- Elastic frame	 -->
			 <div class="alert" v-show="showto" style="background-color:white; position:absolute ;top:40%;left: 40%; width:300px;z-index:51;">
						<div class="md-modal-inner">
							<div class="md-top">
								<button class="md-close" @click="showto=false">Close</button>
							</div>
							<div>
								<div>
									<p>Are you sure to delete this order information?</p>
								</div>
								<div>
									<button @click="removeClass">Yes</button>
									<button @click="showto=false">No</button>
								</div>
							</div>
						</div>
				</div>
        <div class="shade" v-show="showto" style="width:1000px; height:1000px;position:fixed; top :0px;background-color:#000;opacity:0.1;text-align:center;z-index:10;"></div>

			
	</div>
</template>
<style>	
	div{
		width:80%;
		margin: 0 auto;
	}
	.footer{
		width:1200px;
	}
	.footer>div{
		display: inline-block;
	}
	ul{
		list-style-type: none;
		margin:0;
		padding:0;
		display: flex;
	}
	li{
		display: inline;
		width:12%;
		justify-content: space-between;
	}
	li input{
		width: 60%;
		text-align: center;
	}
	.select{
		width:20px;
		height: 20px;
		background-image:url(img/notselect.png);
		background-repeat: no-repeat;
		background-size: 90%;
	}
	.checked{
		background-image:url(img/selects.png);
	}
	.inp a{
		margin: auto 5px;
		text-decoration: none;
		font-size: 15px;
	}
	

</style>
<script>
	export default{
		data:function(){
			return{
				
					test:'testtesttest',
					productList:[],
					totalMoney:0,
					selectedAll:false,
					deleteClass:false,
					currenClass:'',
					showto:false
				
			}
		},
		filters:{
		//Vue 2.0 has slimmed down a lot of its own filter s, which can be cleaned up with all the native writes
		chineseYuan:function(value,param){
			if(!value) return '0';
			return '¥ ' + value.toFixed(2)+param;//In a real project, the future generations need to feed back the amount, and JS will lead to the amount error
		}
	},
		//Hook function. When all DOM is mounted on the page, load this method, which is equivalent to window.onload=function() {}
		mounted:function(){
			//You need to use $nextTick to ensure that all nodes are mounted before executing the method
			this.$nextTick(function(){
				this.cartView();
			})
		},
		methods:{
			cartView:function(){
					var _this = this;
					//Vue.source plug-in, now replaced by axios
					// this.$http.get('./public/data/cartData.json',{'id':123}).then(function(res)???? why can only request the contents of public files
					this.$http.get('./data/cartData.json',{'id':123}).then(function(res){
						_this.productList = res.data.result.list;
						console.log(res)
						// _this.totalMoney = res.data.result.totalMoney;
					});
				},
				
			changeQuantity:function(product,type){
					if (type>0) {
						//Plus sign increase quantity
						product.productQuantity++;
						this.calcTotalmoney();//Recalculate total amount for quantity change
					} else{
						//The minus sign reduces the quantity, but the minimum quantity is 1 because there is a delete button
						if(product.productQuantity < 2){
							product.productQuantity = 1;
						}else{
							product.productQuantity--;
							this.calcTotalmoney();//Recalculate total amount for quantity change
						}
					}
				},
				
			selectedItem:function(item){
					if(typeof item.ischecked === 'undefined'){
						//Local $set method, register ischecked property in item, and assign value to true
						this.$set(item,'ischecked',true);
					}else {
						//Click to reverse attribute value
						item.ischecked = !item.ischecked;
					};
					this.calcTotalmoney();//Select goods to recalculate total amount
				},
				
			checkAll:function(statu){
					//Select all or cancel all according to the parameter passing
					this.selectedAll = statu;
					var _this = this;//Solve this pointing problem with ES5 method
					//forEach(), val is each item of data, and index is the index of each item
					this.productList.forEach(function(val,index){
						//Similarly, because there is no attribute in json that determines whether to select, we need to create an attribute that indicates whether each item is selected,
						//Register the ischecked attribute of each item in the data through local registration.
						if(typeof val.ischecked === 'undefined'){
							_this.$set(val,'ischecked',_this.selectedAll);
						}else {
							val.ischecked = _this.selectedAll;
						}
					});
					this.calcTotalmoney();// Recalculate total amount for all / non all selected items
				},	
																																	
			calcTotalmoney:function(){
					var _this = this;//Solve this pointing problem with ES5 method
					//Before each calculation, it must be cleaned to prevent cumulative calculation
					this.totalMoney = 0;
					this.productList.forEach(function(val,index){
						if(val.ischecked){
							_this.totalMoney += val.productPrice * val.productQuantity;
						}
					});
				},
				
			removeConfirm:function(item){
				this.showto = true;
				this.currentClass = item;
				},
			removeClass:function(){
					//The indexOf method takes a value and retrieves whether the value exists in the array. The value can make string, number, and object
					var index = this.productList.indexOf(this.currentClass);
					this.productList.splice(index,1);
					this.deleteClass = false;
					this.calcTotalmoney();//Recalculate total amount after deleting item
				}
		
		
			
		}
		
		
	}
	
</script>

To be continued....