the 1st demo of vue

by Zili Xu

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>test04</title>
	<link rel="stylesheet" type="text/css" href="test04.css">
</head>
<body>
	<div id="app">
		<!-- <form action="#" method="post"> -->
			<fieldset>
				<legend>Create a new person</legend>
				Name:<input type="text" v-model="newPerson.name">
				Age:<input type="text" v-model="newPerson.age">
				Sex:
				<select v-model="newPerson.sex">
					<option value="Male">Male</option>
					<option value="Female">Female</option>
				</select>
				<button @click="createPerson">Create</button>
			</fieldset>
		<!-- </form> -->
		<table>
			<thead>
				<tr>
					<th>Name</th>
					<th>Age</th>
					<th>Sex</th>
					<th>Delete</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="person in people">
					<td>{{ person.name }}</td>
					<td>{{ person.age }}</td>
					<td>{{ person.sex }}</td>
					<td><button @click="deletePerson($index)">Delete</button></td>
				</tr>
			</tbody>
		</table>
	</div>
	<script src="./vue.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',	//注意此处需要引号和井号
			data: {
				newPerson: {
					name: '',
					age: 0,
					sex: 'Male'
				},
				people: [{
					name: 'Anna',
					age: 20,
					sex: 'Female'
				},{
					name: 'Tony',
					age: 21,
					sex: 'Male'
				},{
					name: 'Jack',
					age: 22,
					sex: 'Male'
				}]
			},
			methods: {
				createPerson: function () {
					this.people.push(this.newPerson);
					// 添加完newPerson对象后，重置newPerson对象
					this.newPerson = {name: '', age: 0, sex: 'Male'};
				},
				deletePerson: function (index) {
					this.people.splice(index,1);
				}
			}
		})
	</script>
</body>
</html>

CSS

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
	font-size: 20px;
}
#app {
	background-color: red;
	width: 800px;
	margin: 0 auto;
}
/*form */button{
	background-color: blue;
	color: yellow;
	border: 0px;
}
/*form */input,button,select {
	font-size: 1rem;
	margin-left: 50px;
	margin-bottom: 10px;
	display: block;
	height: 30px;
	border-radius: 5px;
}
table {
	width: 100%;
}
table,th,tr,td {
	border: 1px solid black;
	border-collapse: collapse;
}
th {
	background: blue;
	color: yellow;
	cursor: pointer;
}
table button {
	margin: 5px auto;
}