Vue.js component tutorial part-2 source code, based on Vue.js v1.0.25

XitangChen · Jul 3, 2016 · 928ebff · 928ebff
1 parent b9dce73
commit 928ebff
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 29 deletions.
diff --git a/02.Components/Part-2/demo/step04.html b/02.Components/Part-2/demo/step04.html
@@ -64,15 +64,15 @@ <h1 class="dialog-title">{{ title }}</h1>
 						</header>
 
 						<div class="dialog-body">
-						<div v-for="field in fields" class="form-group">
-							<label>{{ field.name }}</label>
-							<select v-if="field.dataSource" v-model="item[field.name]" :disabled="mode === 2 && field.isKey">
+							<div v-for="field in fields" class="form-group">
+								<label>{{ field.name }}</label>
+								<select v-if="field.dataSource" v-model="item[field.name]" :disabled="mode === 2 && field.isKey">
 									<option v-for="opt in field.dataSource" :value="opt">{{ opt }}</option>
 							</select>
-							<input v-else type="text" v-model="item[field.name]" :disabled="mode === 2 && field.isKey">
-						</div>
+								<input v-else type="text" v-model="item[field.name]" :disabled="mode === 2 && field.isKey">
+							</div>
 						</div>
-						
+
 						<footer class="dialog-footer">
 							<div class="form-group">
 								<label></label>
@@ -99,7 +99,6 @@ <h1 class="dialog-title">{{ title }}</h1>
 				},
 				props: ['dataList', 'columns', 'searchKey'],
 				methods: {
-
 					openNewItemDialog: function(title) {
 						// 对话框的标题
 						this.title = title
@@ -110,7 +109,6 @@ <h1 class="dialog-title">{{ title }}</h1>
 						// 广播事件，showDialog是modal-dialog组件的一个方法，传入参数true表示显示对话框
 						this.$broadcast('showDialog', true)
 					},
-
 					openEditItemDialog: function(index, title) {
 						// 对话框的标题
 						this.title = title
@@ -119,21 +117,34 @@ <h1 class="dialog-title">{{ title }}</h1>
 						// 初始化this.item
 						this.item = {}
 						// 将选中行的数据拷贝到this.item
-						for (var i in this.dataList[index]) {
-							this.item[i] = this.dataList[index][i]
-						}
+						this.item = this.initItemForUpdate(this.dataList[index])
 						// 广播事件，传入参数true表示显示对话框
 						this.$broadcast('showDialog', true)
 					},
-
+					// 弹出修改数据的对话框时，使用对象的深拷贝
+					initItemForUpdate: function(p) {
+						var c = c || {};
+						for (var i in p) {
+							// 属性i是否为p对象的自有属性
+							if (p.hasOwnProperty(i)) {
+								if (typeof p[i] === 'object') {
+									c[i] = Array.isArray(p[i]) ? [] : {}
+									deepCopy(p[i], c[i])
+								} else {
+									// 属性是基础类型时，直接拷贝
+									c[i] = p[i]
+								}
+							}
+						}
+						return c;
+					},
 					getKeyColumn: function() {
 						for (var i = 0; i < this.columns.length; i++) {
 							if (this.columns[i].isKey) {
 								return this.columns[i].name
 							}
 						}
 					},
-
 					createItem: function() {
 						// 将item追加到dataList
 						this.dataList.push(this.item)
@@ -143,7 +154,6 @@ <h1 class="dialog-title">{{ title }}</h1>
 						this.item = {}
 					},
 					updateItem: function() {
-
 						// 获取主键列
 						var keyColumn = this.getKeyColumn()
 
@@ -190,7 +200,7 @@ <h1 class="dialog-title">{{ title }}</h1>
 								if (this.mode === 1) {
 									// 使用$dispatch调用simple-grid的create-item事件
 									this.$dispatch('create-item')
-								}else if(this.mode === 2){
+								} else if (this.mode === 2) {
 									// 使用$dispatch调用simple-grid的update-item事件
 									this.$dispatch('update-item')
 								}

diff --git a/02.Components/Part-2/demo/step05.html b/02.Components/Part-2/demo/step05.html
@@ -112,15 +112,29 @@ <h1 class="dialog-title">{{ title }}</h1>
 						this.title = title
 						// mode = 2表示修改模式
 						this.mode = 2
-						// 初始化this.item
-						this.item = {}
-							// 将选中行的数据拷贝到this.item
-						for (var i in this.dataList[index]) {
-							this.item[i] = this.dataList[index][i]
-						}
+						this.item = this.initItemForUpdate(this.dataList[index])
 						// 广播事件，传入参数true表示显示对话框
 						this.$broadcast('showDialog', true)
 					},
+
+					// 弹出修改数据的对话框时，使用对象的深拷贝
+					initItemForUpdate: function(p) {
+						var c = c || {};
+						for (var i in p) {
+							// 属性i是否为p对象的自有属性
+							if (p.hasOwnProperty(i)) {
+								if (typeof p[i] === 'object') {
+									c[i] = Array.isArray(p[i]) ? [] : {};
+									deepCopy(p[i], c[i]);
+								} else {
+									// 属性是基础类型时，直接拷贝
+									c[i] = p[i];
+								}
+							}
+						}
+						return c;
+					},
+
 					getKeyColumn: function() {
 						for (var i = 0; i < this.columns.length; i++) {
 							if (this.columns[i].isKey) {

diff --git a/02.Components/Part-2/demo/step06.html b/02.Components/Part-2/demo/step06.html
@@ -148,14 +148,27 @@ <h1 class="dialog-title">{{ title }}</h1>
 						// mode = 2表示修改模式
 						this.mode = 2
 						// 初始化this.item
-						this.item = {}
-						// 将选中行的数据拷贝到this.item
-						for (var i in this.dataList[index]) {
-							this.item[i] = this.dataList[index][i]
-						}
+						this.item = this.initItemForUpdate(this.dataList[index])
 						// 广播事件，传入参数true表示显示对话框
 						this.$broadcast('showDialog', true)
 					},
+					// 弹出修改数据的对话框时，使用对象的深拷贝
+					initItemForUpdate: function(p) {
+						var c = c || {};
+						for (var i in p) {
+							// 属性i是否为p对象的自有属性
+							if (p.hasOwnProperty(i)) {
+								if (typeof p[i] === 'object') {
+									c[i] = Array.isArray(p[i]) ? [] : {}
+									deepCopy(p[i], c[i])
+								} else {
+									// 属性是基础类型时，直接拷贝
+									c[i] = p[i]
+								}
+							}
+						}
+						return c;
+					},
 					getKeyColumn: function() {
 						for (var i = 0; i < this.columns.length; i++) {
 							if (this.columns[i].isKey) {
@@ -175,9 +188,9 @@ <h1 class="dialog-title">{{ title }}</h1>
 						if (!this.itemExists(keyColumn)) {
 							// 将item追加到dataList
 							this.dataList.push(this.item)
-								// 广播事件，传入参数false表示隐藏对话框
+							// 广播事件，传入参数false表示隐藏对话框
 							this.$broadcast('showDialog', false)
-								// 新建完数据后，重置item对象
+							// 新建完数据后，重置item对象
 							this.item = {}
 						} else {
 							alert(keyColumn + ' "' + this.item[keyColumn] + '" is already exists')
@@ -200,7 +213,7 @@ <h1 class="dialog-title">{{ title }}</h1>
 						}
 						// 广播事件，传入参数false表示隐藏对话框
 						this.$broadcast('showDialog', false)
-							// 修改完数据后，重置item对象
+						// 修改完数据后，重置item对象
 						this.item = {}
 					},
 					deleteItem: function(index) {

diff --git a/02.Components/Part-2/test.html b/02.Components/Part-2/test.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title></title>
+	</head>
+	<body>
+		<div id="app">
+			<div v-for="col in columns">
+				<input type="text" v-model="item[col]"/>
+			</div>
+
+			<div v-for="col in columns">
+				{{ item[col] }}
+			</div>
+		</div>
+	</body>
+	<script src="js/vue.js">
+	</script>
+	<script>
+
+		new Vue({
+			el: '#app',
+			data: {
+				item: {},
+				columns: ['age','name','sex']
+			}
+		})
+
+	</script>
+</html>