Skip to content

Commit 84e6285

Browse files
ftconanftconan
committed
add double_binding
1 parent 583ab9d commit 84e6285

File tree

2 files changed

+103
-31
lines changed

2 files changed

+103
-31
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,3 +91,4 @@ JavaScript study notes
9191
2. 开发REST API
9292
6. MVVM
9393
1. 单向绑定
94+
2. 单向绑定

‎js_notes/hello-koa/static/index.html‎

Lines changed: 102 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -13,35 +13,65 @@
1313
<title>Vue</title>
1414
<link rel="stylesheet" href="/static/css/bootstrap.css">
1515
<script src="/static/js/jquery.min.js"></script>
16+
<script src="/static/js/bootstrap.min.js"></script>
1617
<script src="/static/js/vue.js"></script>
1718
<script>
1819

1920
$(function () {
20-
const vm = new Vue({
21+
var vm = new Vue({
2122
el: '#vm',
2223
data: {
23-
name: 'Robot',
24-
age: 15
24+
email: '',
25+
password: '',
26+
birth: '',
27+
gender: 's',
28+
language: ['zh'],
29+
city: 'bj',
30+
introduction: '',
31+
subscribe: true
32+
},
33+
methods: {
34+
register: function () {
35+
$('#modal-data').text(JSON.stringify(this.$data, null, ' '));
36+
$('#modal').modal();
37+
// TODO: post JSON data to server...
38+
}
2539
}
2640
});
2741
window.vm = vm;
2842
});
2943

3044
function executeJs() {
3145
try {
32-
const code = $('#code').val();
33-
const fn = new Function('var vm = window.vm;\n' + code);
46+
var code = $('#code').val();
47+
var fn = new Function('var vm = window.vm;\n' + code);
3448
fn();
3549
} catch (e) {}
3650
return false;
3751
}
3852

39-
40-
4153
</script>
4254
</head>
4355

4456
<body>
57+
<div class="modal" id="modal" role="dialog">
58+
<div class="modal-dialog">
59+
<div class="modal-content">
60+
<div class="modal-header">
61+
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
62+
<h4 class="modal-title">Handle Register Form</h4>
63+
</div>
64+
<div class="modal-body">
65+
<p>Post JSON data:</p>
66+
<pre id="modal-data"></pre>
67+
</div>
68+
<div class="modal-footer">
69+
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
70+
</div>
71+
</div>
72+
</div>
73+
</div>
74+
4575
<header class="navbar navbar-static-top">
4676
<div class="container">
4777
<div class="navbar-header">
@@ -72,39 +102,80 @@ <h3 class="panel-title"><span class="glyphicon glyphicon-th-list"></span> MVVM</
72102
</div>
73103
<div class="panel-body">
74104
<div id="vm">
75-
<p>Hello, {{ name }}!</p>
76-
<p>You are {{ age }} years old!</p>
105+
<h3>Register Vue Course</h3>
106+
<form name="register" action="#" v-on:submit.prevent="register">
107+
<div class="form-group">
108+
<label>Email address:</label>
109+
<input type="email" v-model="email" class="form-control" placeholder="Enter email">
110+
</div>
111+
<div class="form-group">
112+
<label>Password:</label>
113+
<input type="password" v-model="password" class="form-control" placeholder="Password">
114+
</div>
115+
<div class="form-group">
116+
<label>Birth:</label>
117+
<input type="date" v-model="birth" class="form-control" placeholder="Birth">
118+
</div>
119+
<div class="form-group">
120+
<label>Gender:</label>
121+
<div class="radio">
122+
<label><input type="radio" name="gender" value="m" v-model="gender"> Male</label>
123+
</div>
124+
<div class="radio">
125+
<label><input type="radio" name="gender" value="f" v-model="gender"> Female</label>
126+
</div>
127+
<div class="radio">
128+
<label><input type="radio" name="gender" value="s" v-model="gender"> Keep Secret</label>
129+
</div>
130+
</div>
131+
<div class="form-group">
132+
<label>Language:</label>
133+
<div>
134+
<label class="checkbox-inline"><input type="checkbox" v-model="language" value="zh"> Chinese</label>
135+
<label class="checkbox-inline"><input type="checkbox" v-model="language" value="en"> English</label>
136+
<label class="checkbox-inline"><input type="checkbox" v-model="language" value="fr"> French</label>
137+
</div>
138+
</div>
139+
<div class="form-group">
140+
<label>City:</label>
141+
<select v-model="city" class="form-control">
142+
<option value="bj">Beijing</option>
143+
<option value="sh">Shanghai</option>
144+
<option value="gz">Guangzhou</option>
145+
</select>
146+
</div>
147+
<div class="form-group">
148+
<label>Introduce Yourself:</label>
149+
<textarea v-model="introduction" class="form-control" rows="3" style="resize: none;" placeholder="Your background, interests, etc."></textarea>
150+
</div>
151+
<div class="form-group">
152+
<label>Subscribe:</label>
153+
<div>
154+
<label class="checkbox-inline"><input type="checkbox" v-model="subscribe"> Send me information of new courses</label>
155+
</div>
156+
</div>
157+
<button type="submit" class="btn btn-primary">Register</button>
158+
</form>
77159
</div>
78-
<hr>
79-
<h3>Try change the name or age</h3>
80-
<form action="#" onsubmit="return executeJs()">
81-
<div class="form-group">
82-
<textarea id="code" class="form-control" style="font-family: Menlo,Monaco,Consolas,'Courier New',monospace; resize:none;" rows="5">vm.name = 'Bob';</textarea>
83-
</div>
84-
<button type="submit" class="btn btn-primary">Execute</button>
85-
</form>
86160
</div>
87161
</div>
88162
</div>
89163
<div class="col-md-6">
90164
<div class="panel panel-default">
91165
<div class="panel-heading">
92-
<h3 class="panel-title"><span class="glyphicon glyphicon-eye-open"></span> Code</h3>
166+
<h3 class="panel-title"><span class="glyphicon glyphicon-eye-open"></span> Model</h3>
93167
</div>
94168
<div class="panel-body">
95-
<p>HTML:</p>
96-
<pre>&lt;div id="vm"&gt;
97-
&lt;p&gt;Hello, {{ name }}!&lt;/p&gt;
98-
&lt;p&gt;You are {{ age }} years old!&lt;/p&gt;
99-
&lt;/div&gt;</pre>
100-
<p>JavaScript:</p>
101-
<pre>var vm = new Vue({
102-
el: '#vm',
103-
data: {
104-
name: 'Robot',
105-
age: 15
106-
}
107-
});</pre>
169+
<h3>Try change the model</h3>
170+
<form action="#" onsubmit="return executeJs()">
171+
<div class="form-group">
172+
<textarea id="code" class="form-control" style="font-family: Menlo,Monaco,Consolas,'Courier New',monospace; resize:none;" rows="5">vm.email = '[email protected]';
173+
vm.birth = '1990-01-21';
174+
vm.gender = 'f';
175+
</textarea>
176+
</div>
177+
<button type="submit" class="btn btn-primary">Execute</button>
178+
</form>
108179
</div>
109180
</div>
110181
</div>

0 commit comments

Comments
 (0)