Skip to content

Commit 1b9e899

Browse files
keepfoolkeepfool
committed
Vue.js tutorial with $.ajax source code, based on Vue.js v1.0.25
1 parent df1e7b9 commit 1b9e899

21 files changed

+24763
-0
lines changed

‎02.Components/Part-2/compile-scope.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@
1414
#myComponent{
1515
display: none;
1616
}
17+
18+
template{
19+
display: none;
20+
}
1721
</style>
1822
</head>
1923

‎03.Ajax/jQuery&Zepto/$.ajax-cors-delete.html

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title></title>
7+
<link rel="stylesheet" href="style.css" />
8+
<link rel="stylesheet" href="fonts/iconfont.css" />
9+
</head>
10+
11+
<body>
12+
13+
<div id="app">
14+
<div class="container">
15+
<simple-grid :data-list="gridData" :columns="gridColumns"
16+
v-on:load-entry="loadCustomer"
17+
v-on:delete-entry="deleteCustomer">
18+
</simple-grid>
19+
</div>
20+
21+
<div class="container">
22+
<div class="form-group">
23+
<button @click="this.show = true">Create</button>
24+
</div>
25+
</div>
26+
27+
<modal-dialog v-bind:show.sync="show">
28+
29+
<header class="dialog-header" slot="header">
30+
<h1 class="dialog-title">{{ item.customerId ? 'Edit Customer - ' + item.contactName : 'Create New Customer' }}</h1>
31+
</header>
32+
33+
<div class="dialog-body" slot="body">
34+
<div v-show="item.customerId" class="form-group">
35+
<label>Customer Id</label>
36+
<input type="text" v-model="item.customerId" disabled="disabled" />
37+
</div>
38+
<div class="form-group">
39+
<label>Company Name</label>
40+
<input type="text" v-model="item.companyName" />
41+
</div>
42+
43+
<div class="form-group">
44+
<label>Contact Name</label>
45+
<input type="text" v-model="item.contactName" />
46+
</div>
47+
48+
<div class="form-group">
49+
<label>Phone</label>
50+
<input type="text" v-model="item.phone" />
51+
</div>
52+
<div class="form-group">
53+
<label></label>
54+
<button @click="saveCustomer">Save</button>
55+
</div>
56+
</div>
57+
58+
</modal-dialog>
59+
</div>
60+
61+
<template id="grid-template">
62+
<table>
63+
<thead>
64+
<tr>
65+
<th v-for="col in columns">
66+
{{ col.name | capitalize}}
67+
</th>
68+
<th>Delete</th>
69+
</tr>
70+
</thead>
71+
<tbody>
72+
<tr v-for="(index,entry) in dataList">
73+
<td v-for="col in columns">
74+
<span v-if="col.isKey"><a href="javascript:void(0)" @click="loadEntry(entry[col.name])">{{ entry[col.name] }}</a></span>
75+
<span v-else>{{ entry[col.name] }}</span>
76+
</td>
77+
<td>
78+
<button class="btn-danger" @click="deleteEntry(entry)">delete</button>
79+
</td>
80+
</tr>
81+
</tbody>
82+
</table>
83+
</template>
84+
85+
<template id="dialog-template">
86+
<div class="dialogs">
87+
<div class="dialog" v-bind:class="{ 'dialog-active': show }">
88+
<div class="dialog-content">
89+
<div class="close rotate">
90+
<span class="iconfont icon-close" @click="close"></span>
91+
</div>
92+
<slot name="header"></slot>
93+
<slot name="body"></slot>
94+
<slot name="footer"></slot>
95+
</div>
96+
</div>
97+
<div class="dialog-overlay"></div>
98+
</div>
99+
</template>
100+
101+
<script src="js/vue.js"></script>
102+
<script src="js/zepto.js"></script>
103+
<script src="js/ajax-helper.js"></script>
104+
<script>
105+
Vue.component('simple-grid', {
106+
template: '#grid-template',
107+
props: ['dataList', 'columns'],
108+
methods: {
109+
loadEntry: function(key) {
110+
this.$dispatch('load-entry', key)
111+
},
112+
deleteEntry: function(entry) {
113+
this.$dispatch('delete-entry', entry)
114+
}
115+
}
116+
})
117+
118+
Vue.component('modal-dialog', {
119+
template: '#dialog-template',
120+
props: ['show'],
121+
methods: {
122+
close: function() {
123+
this.show = false
124+
}
125+
}
126+
})
127+
</script>
128+
<script>
129+
var ajaxHelper = new AjaxHelper()
130+
131+
var demo = new Vue({
132+
el: '#app',
133+
data: {
134+
show: false,
135+
title: '',
136+
gridColumns: [{
137+
name: 'customerId',
138+
isKey: true
139+
}, {
140+
name: 'companyName'
141+
}, {
142+
name: 'contactName'
143+
}, {
144+
name: 'phone'
145+
}],
146+
gridData: [],
147+
apiUrl: 'http://211.149.193.19:8080/api/customers',
148+
item: {}
149+
},
150+
ready: function() {
151+
this.getCustomers()
152+
},
153+
methods: {
154+
closeDialog: function() {
155+
this.show = false
156+
},
157+
getCustomers: function() {
158+
// 定义vm变量，让它指向this,this是当前的Vue实例
159+
var vm = this,
160+
success = function(data) {
161+
// 由于函数的作用域，这里不能用this
162+
vm.$set('gridData', data)
163+
}
164+
ajaxHelper.get(vm.apiUrl, null, success)
165+
},
166+
createCustomer: function() {
167+
var vm = this,
168+
success = function(data) {
169+
vm.$set('item', {})
170+
vm.getCustomers()
171+
}
172+
ajaxHelper.post(vm.apiUrl, vm.item, success)
173+
},
174+
loadCustomer: function(customerId) {
175+
var vm = this
176+
vm.gridData.forEach(function(item) {
177+
if (item.customerId === customerId) {
178+
// 使用$.set设置item
179+
vm.$set('item', item)
180+
return
181+
}
182+
}),
183+
vm.$set('show', true)
184+
},
185+
saveCustomer: function() {
186+
this.item.customerId ? this.updateCustomer() : this.createCustomer()
187+
this.show = false
188+
},
189+
updateCustomer: function() {
190+
// 定义vm变量，让它指向this,this是当前的Vue实例
191+
var vm = this,
192+
callback = function(data) {
193+
// 更新成功后，重新加载页面数据
194+
vm.getCustomers()
195+
}
196+
// 将vm.item直接PUT到服务端
197+
ajaxHelper.put(vm.apiUrl + '/' + vm.item.customerId, vm.item, callback)
198+
},
199+
deleteCustomer: function(customer) {
200+
// 定义vm变量，让它指向this,this是当前的Vue实例
201+
var vm = this,
202+
callback = function(data) {
203+
// 删除成功后，重新加载页面数据
204+
vm.getCustomers()
205+
}
206+
// 发送DELETE请求到服务端
207+
ajaxHelper.delete(vm.apiUrl + '/' + customer.customerId, null, callback)
208+
}
209+
}
210+
})
211+
demo.$watch('show', function(newVal, oldVal) {
212+
if (!newVal) {
213+
this.item = {}
214+
}
215+
})
216+
</script>
217+
</body>
218+
219+
</html>

‎03.Ajax/jQuery&Zepto/$.ajax-cors-get.html

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title></title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
10+
<body>
11+
12+
<div id="app">
13+
<div class="container">
14+
<simple-grid :data-list="gridData" :columns="gridColumns">
15+
</simple-grid>
16+
</div>
17+
</div>
18+
19+
<template id="grid-template">
20+
<table>
21+
<thead>
22+
<tr>
23+
<th v-for="col in columns">
24+
{{ col | capitalize}}
25+
</th>
26+
</tr>
27+
</thead>
28+
<tbody>
29+
<tr v-for="(index,entry) in dataList">
30+
<td v-for="col in columns">
31+
{{entry[col]}}
32+
</td>
33+
</tr>
34+
</tbody>
35+
</table>
36+
</template>
37+
38+
<script src="js/vue.js"></script>
39+
<script src="js/zepto.js"></script>
40+
<script src="js/ajax-helper.js"></script>
41+
<script>
42+
Vue.component('simple-grid', {
43+
template: '#grid-template',
44+
props: ['dataList', 'columns']
45+
})
46+
</script>
47+
<script>
48+
var ajaxHelper = new AjaxHelper()
49+
50+
var demo = new Vue({
51+
el: '#app',
52+
data: {
53+
gridColumns: ['customerId', 'companyName', 'contactName', 'phone'],
54+
gridData: [],
55+
apiUrl: 'http://211.149.193.19:8080/api/customers'
56+
},
57+
ready: function() {
58+
this.getCustomers()
59+
},
60+
methods: {
61+
62+
getCustomers: function() {
63+
// 定义vm变量，让它指向this,this是当前的Vue实例
64+
var vm = this,
65+
callback = function(data) {
66+
// 由于函数的作用域，这里不能用this
67+
vm.$set('gridData', data)
68+
}
69+
ajaxHelper.get(vm.apiUrl, null, callback)
70+
}
71+
}
72+
})
73+
</script>
74+
</body>
75+
76+
</html>

0 commit comments

Comments
 (0)