通过一个Demo学习Vue的基本语法

由于有一些angularJs的基础，所以初次接触觉得语法还是蛮熟悉的
下面就通过这个购物车的小例子来说一些基础知识
希望大牛们能不吝指教，也给后来的人避免一些坑

Vue学习之路（1、Vue基本语法）-LMLPHP

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8"/>
		<title>购物车实例</title>
		<link rel="stylesheet" type="text/css" href="demo1.css"/>
		<!-- demo1.js不能放在这里。因为js里通过id查找DOM元素挂载Vue实例，此时DOM树还没加载
			<script src="vue.js"></script>
			<script src="demo1.js"></script>
		-->
	</head>
	<body>
		<!-- v-cloak和css的[v-cloak]配合 解决由于初始化慢导致的页面闪动 -->
		<div id="app" v-cloak>
			<!-- v-if v-else-if v-else根据表达式的值在DOM中渲染或销毁元素组件 -->
			<template v-if="list.length">
				<table>
					<thead>
						<tr>
							<th></th>
							<th>商品名称</th>
							<th>商品价格</th>
							<th>购买数量</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<!-- v-for用于数组遍历或枚举一个对象的属性值 -->
						<tr v-for="(item, index) in list">
							<td> {{ index+1 }} </td>
							<td> {{ item.name }} </td>
							<td> {{ item.price }} </td>
							<td>
								<!-- 语法糖， v-on:click可以缩写成@click, v-bind:disabled可以缩写成:disabled -->
								<button @click="handleReduce(index)" :disabled="item.count == 1">
									-
								</button>
								{{ item.count }}
								<button @click="handleAdd(index)">
									+
								</button>
							</td>
							<td>
								<button @click="handleRemove(index)">移除</button>
							</td>
						</tr>
					</tbody>
				</table>
				<div>总价：￥{{totalPrice}}</div>
			</template>
			<div v-else>购物车为空</div>
			<div>{{ date | formateDate }}</div>
		</div>
		<script src="vue.js"></script>
		<script src="demo1.js"></script>
	</body>
</html>

var padDate = function(value) {
	return value < 10 ? '0'+value : value;
}

// 创建一个Vue实例
var app = new Vue({
	// 用于指定一个页面中已经存在的DOM元素来挂载Vue实例
	// el:document.getElementById('app') 这样也可以
	el:'#app',
	data:{
		list:[
			{
				id:1,
				name:'iphone 7',
				price:6188,
				count:1
			},
			{
				id:2,
				name:'ipad pro',
				price:5888,
				count:1
			},
			{
				id:3,
				name:'MacBook Pro',
				price:21488,
				count:1
			}
		],
		date: new Date()
	},
	// 计算属性
	// list的内容有任何变化 totalPrice就会自动更新 视图中的总价也会自动变化
	computed:{
		totalPrice:function(){
			var total = 0;
			for (var i = 0 ; i < this.list.length ; i++) {
				var item = this.list[i];
				total += item.price * item.count;
			}
			return total.toString().replace(/\B(?=(\d{3})+$)/g,',')
		}
	},
	// 提供的方法
	methods:{
		handleReduce:function (index){
			if (this.list[index].count === 1) return;
			this.list[index].count--;
		},
		handleAdd:function (index) {
			this.list[index].count++;
		},
		handleRemove: function(index){
			this.list.splice(index,1);
		}
	},
	// 过滤器
	filters: {
		formateDate: function(value) {
			var date = new Date(value);
			var year = date.getFullYear();
			var month = padDate(date.getMonth()+1);
			var day = padDate(date.getDate());
			var hours = padDate(date.getHours());
			var minutes = padDate(date.getMinutes());
			var seconds = padDate(date.getSeconds());
			return year + '年 ' + month + '月 ' + day + '日 ' + hours + '时 ' + minutes + '分 ' + seconds + '秒';
		}
	},
	// el挂载Vue实例后调用
	mounted: function() {
		// 声明一个变量指向Vue实例this,保持作用域一致
		var _this = this;
		this.timer = setInterval(function(){
			_this.date = new Date();
		}, 1000);
	},
	// Vue实例销毁之前调用
	beforeDestory: function(){
		if (this.timer) {
			clearInterval(this.timer);
		}
	}
});

[v-cloak] {
	display:none;
}

table {
	border: 1px solid #e9e9e9;
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: show;
}

th, td {
	padding: 8px 16px;
	border: 1px solid #e9e9e9;
	text-align: left;
}

th {
	background: #f7f7f7;
	color: #5c6b77;
	font-weight: 600;
	white-space: nowrap;
}

阮俗气

Vue学习之路（1、Vue基本语法）

通过一个Demo学习Vue的基本语法