Skip to content

Commit 928ebff

Browse files
keepfoolkeepfool
committed
Vue.js component tutorial part-2 source code, based on Vue.js v1.0.25
1 parent b9dce73 commit 928ebff

File tree

4 files changed

+97
-29
lines changed

4 files changed

+97
-29
lines changed

‎02.Components/Part-2/demo/step04.html

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -64,15 +64,15 @@ <h1 class="dialog-title">{{ title }}</h1>
6464
</header>
6565

6666
<div class="dialog-body">
67-
<div v-for="field in fields" class="form-group">
68-
<label>{{ field.name }}</label>
69-
<select v-if="field.dataSource" v-model="item[field.name]" :disabled="mode === 2 && field.isKey">
67+
<div v-for="field in fields" class="form-group">
68+
<label>{{ field.name }}</label>
69+
<select v-if="field.dataSource" v-model="item[field.name]" :disabled="mode === 2 && field.isKey">
7070
<option v-for="opt in field.dataSource" :value="opt">{{ opt }}</option>
7171
</select>
72-
<input v-else type="text" v-model="item[field.name]" :disabled="mode === 2 && field.isKey">
73-
</div>
72+
<input v-else type="text" v-model="item[field.name]" :disabled="mode === 2 && field.isKey">
73+
</div>
7474
</div>
75-
75+
7676
<footer class="dialog-footer">
7777
<div class="form-group">
7878
<label></label>
@@ -99,7 +99,6 @@ <h1 class="dialog-title">{{ title }}</h1>
9999
},
100100
props: ['dataList', 'columns', 'searchKey'],
101101
methods: {
102-
103102
openNewItemDialog: function(title) {
104103
// 对话框的标题
105104
this.title = title
@@ -110,7 +109,6 @@ <h1 class="dialog-title">{{ title }}</h1>
110109
// 广播事件，showDialog是modal-dialog组件的一个方法，传入参数true表示显示对话框
111110
this.$broadcast('showDialog', true)
112111
},
113-
114112
openEditItemDialog: function(index, title) {
115113
// 对话框的标题
116114
this.title = title
@@ -119,21 +117,34 @@ <h1 class="dialog-title">{{ title }}</h1>
119117
// 初始化this.item
120118
this.item = {}
121119
// 将选中行的数据拷贝到this.item
122-
for (var i in this.dataList[index]) {
123-
this.item[i] = this.dataList[index][i]
124-
}
120+
this.item = this.initItemForUpdate(this.dataList[index])
125121
// 广播事件，传入参数true表示显示对话框
126122
this.$broadcast('showDialog', true)
127123
},
128-
124+
// 弹出修改数据的对话框时，使用对象的深拷贝
125+
initItemForUpdate: function(p) {
126+
var c = c || {};
127+
for (var i in p) {
128+
// 属性i是否为p对象的自有属性
129+
if (p.hasOwnProperty(i)) {
130+
if (typeof p[i] === 'object') {
131+
c[i] = Array.isArray(p[i]) ? [] : {}
132+
deepCopy(p[i], c[i])
133+
} else {
134+
// 属性是基础类型时，直接拷贝
135+
c[i] = p[i]
136+
}
137+
}
138+
}
139+
return c;
140+
},
129141
getKeyColumn: function() {
130142
for (var i = 0; i < this.columns.length; i++) {
131143
if (this.columns[i].isKey) {
132144
return this.columns[i].name
133145
}
134146
}
135147
},
136-
137148
createItem: function() {
138149
// 将item追加到dataList
139150
this.dataList.push(this.item)
@@ -143,7 +154,6 @@ <h1 class="dialog-title">{{ title }}</h1>
143154
this.item = {}
144155
},
145156
updateItem: function() {
146-
147157
// 获取主键列
148158
var keyColumn = this.getKeyColumn()
149159

@@ -190,7 +200,7 @@ <h1 class="dialog-title">{{ title }}</h1>
190200
if (this.mode === 1) {
191201
// 使用$dispatch调用simple-grid的create-item事件
192202
this.$dispatch('create-item')
193-
}else if(this.mode === 2){
203+
} else if (this.mode === 2) {
194204
// 使用$dispatch调用simple-grid的update-item事件
195205
this.$dispatch('update-item')
196206
}

‎02.Components/Part-2/demo/step05.html

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -112,15 +112,29 @@ <h1 class="dialog-title">{{ title }}</h1>
112112
this.title = title
113113
// mode = 2表示修改模式
114114
this.mode = 2
115-
// 初始化this.item
116-
this.item = {}
117-
// 将选中行的数据拷贝到this.item
118-
for (var i in this.dataList[index]) {
119-
this.item[i] = this.dataList[index][i]
120-
}
115+
this.item = this.initItemForUpdate(this.dataList[index])
121116
// 广播事件，传入参数true表示显示对话框
122117
this.$broadcast('showDialog', true)
123118
},
119+
120+
// 弹出修改数据的对话框时，使用对象的深拷贝
121+
initItemForUpdate: function(p) {
122+
var c = c || {};
123+
for (var i in p) {
124+
// 属性i是否为p对象的自有属性
125+
if (p.hasOwnProperty(i)) {
126+
if (typeof p[i] === 'object') {
127+
c[i] = Array.isArray(p[i]) ? [] : {};
128+
deepCopy(p[i], c[i]);
129+
} else {
130+
// 属性是基础类型时，直接拷贝
131+
c[i] = p[i];
132+
}
133+
}
134+
}
135+
return c;
136+
},
137+
124138
getKeyColumn: function() {
125139
for (var i = 0; i < this.columns.length; i++) {
126140
if (this.columns[i].isKey) {

‎02.Components/Part-2/demo/step06.html

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -148,14 +148,27 @@ <h1 class="dialog-title">{{ title }}</h1>
148148
// mode = 2表示修改模式
149149
this.mode = 2
150150
// 初始化this.item
151-
this.item = {}
152-
// 将选中行的数据拷贝到this.item
153-
for (var i in this.dataList[index]) {
154-
this.item[i] = this.dataList[index][i]
155-
}
151+
this.item = this.initItemForUpdate(this.dataList[index])
156152
// 广播事件，传入参数true表示显示对话框
157153
this.$broadcast('showDialog', true)
158154
},
155+
// 弹出修改数据的对话框时，使用对象的深拷贝
156+
initItemForUpdate: function(p) {
157+
var c = c || {};
158+
for (var i in p) {
159+
// 属性i是否为p对象的自有属性
160+
if (p.hasOwnProperty(i)) {
161+
if (typeof p[i] === 'object') {
162+
c[i] = Array.isArray(p[i]) ? [] : {}
163+
deepCopy(p[i], c[i])
164+
} else {
165+
// 属性是基础类型时，直接拷贝
166+
c[i] = p[i]
167+
}
168+
}
169+
}
170+
return c;
171+
},
159172
getKeyColumn: function() {
160173
for (var i = 0; i < this.columns.length; i++) {
161174
if (this.columns[i].isKey) {
@@ -175,9 +188,9 @@ <h1 class="dialog-title">{{ title }}</h1>
175188
if (!this.itemExists(keyColumn)) {
176189
// 将item追加到dataList
177190
this.dataList.push(this.item)
178-
// 广播事件，传入参数false表示隐藏对话框
191+
// 广播事件，传入参数false表示隐藏对话框
179192
this.$broadcast('showDialog', false)
180-
// 新建完数据后，重置item对象
193+
// 新建完数据后，重置item对象
181194
this.item = {}
182195
} else {
183196
alert(keyColumn + ' "' + this.item[keyColumn] + '" is already exists')
@@ -200,7 +213,7 @@ <h1 class="dialog-title">{{ title }}</h1>
200213
}
201214
// 广播事件，传入参数false表示隐藏对话框
202215
this.$broadcast('showDialog', false)
203-
// 修改完数据后，重置item对象
216+
// 修改完数据后，重置item对象
204217
this.item = {}
205218
},
206219
deleteItem: function(index) {

‎02.Components/Part-2/test.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
</head>
7+
<body>
8+
<div id="app">
9+
<div v-for="col in columns">
10+
<input type="text" v-model="item[col]"/>
11+
</div>
12+
13+
<div v-for="col in columns">
14+
{{ item[col] }}
15+
</div>
16+
</div>
17+
</body>
18+
<script src="js/vue.js">
19+
</script>
20+
<script>
21+
22+
new Vue({
23+
el: '#app',
24+
data: {
25+
item: {},
26+
columns: ['age','name','sex']
27+
}
28+
})
29+
30+
</script>
31+
</html>

0 commit comments

Comments
 (0)