@@ -26,25 +26,18 @@ new Vue({
26
26
```
27
27
28
28
{% raw %}
29
-
30
-
31
-
32
- <div id =" app " class =" demo " >
29
+ <div id =" app11 " class =" demo " >
33
30
{{ message }}
34
31
</div >
35
-
36
-
37
-
38
32
<script >
39
33
new Vue ({
40
- el: & # 39 ;#app & # 39 ; ,
34
+ el: ' #app11 ' ,
41
35
data: {
42
- message: & # 39 ; Hello Vue! & # 39 ;
36
+ message: ' Hello Vue!'
43
37
}
44
38
})
45
39
</script >
46
-
47
- {% endraw %}
40
+ {% endraw %}
48
41
49
42
# 双向绑定
50
43
@@ -65,26 +58,20 @@ new Vue({
65
58
```
66
59
67
60
{% raw %}
68
-
69
-
70
-
71
- <div id =" app2 " class =" demo " >
61
+ <div id =" app12 " >
72
62
<p >{{ message }}</p >
73
63
<input v-model =" message " >
74
64
</div >
75
-
76
-
77
-
78
65
<script >
79
66
new Vue ({
80
- el: & # 39 ;#app2 & # 39 ; ,
67
+ el: ' #app12 ' ,
81
68
data: {
82
- message: & # 39 ; Hello Vue! & # 39 ;
69
+ message: ' Hello Vue!'
83
70
}
84
71
})
85
72
</script >
73
+ {% endraw %}
86
74
87
- {% endraw %}
88
75
89
76
# 渲染列表
90
77
@@ -112,33 +99,26 @@ new Vue({
112
99
```
113
100
114
101
{% raw %}
115
-
116
-
117
-
118
- <div id =" app3 " class =" demo " >
119
- <ul >
120
- <li v-for =" todo in todos " >
102
+ <div id =" app13 " class =" demo " >
103
+ <ol >
104
+ <li v-for="todo in todos">
121
105
{{ todo.text }}
122
106
</li>
123
- </ ul >
107
+ </ ol >
124
108
</div >
125
-
126
-
127
-
128
109
<script >
129
110
new Vue ({
130
- el: & # 39 ;#app3 & # 39 ; ,
111
+ el: ' #app13 ' ,
131
112
data: {
132
113
todos: [
133
- { text: & # 39 ; Learn JavaScript& # 39 ; },
134
- { text: & # 39 ; Learn Vue& # 39 ; },
135
- { text: & # 39 ; Build something awesome& # 39 ; }
114
+ { text: ' Learn JavaScript' },
115
+ { text: ' Learn Vue' },
116
+ { text: ' Build something awesome' }
136
117
]
137
118
}
138
119
})
139
120
</script >
140
-
141
- {% endraw %}
121
+ {% endraw %}
142
122
143
123
# 处理用户输入
144
124
@@ -164,25 +144,19 @@ new Vue({
164
144
```
165
145
166
146
{% raw %}
167
-
168
-
169
-
170
- <div id =" app4 " class =" demo " >
147
+ <div id =" app14 " class =" demo " >
171
148
<p >{{ message }}</p >
172
149
<button v-on:click =" reverseMessage " >Reverse Message</button >
173
150
</div >
174
-
175
-
176
-
177
151
<script >
178
152
new Vue ({
179
- el: & # 39 ;#app4 & # 39 ; ,
153
+ el: ' #app14 ' ,
180
154
data: {
181
- message: & # 39 ; Hello Vue .js ! & # 39 ;
155
+ message: ' Hello Vue.js!'
182
156
},
183
157
methods: {
184
158
reverseMessage : function () {
185
- this .message = this .message .split (& # 39 ; & # 39 ; ).reverse ().join (& # 39 ; & # 39 ; )
159
+ this .message = this .message .split (' ' ).reverse ().join (' ' )
186
160
}
187
161
}
188
162
})
@@ -229,7 +203,7 @@ new Vue({
229
203
```
230
204
231
205
{% raw %}
232
- <div id =" app5 " class =" demo " >
206
+ <div id =" app15 " class =" demo " >
233
207
<input v-model =" newTodo " v-on:keyup.enter =" addTodo " >
234
208
<ul >
235
209
<li v-for="(todo, index) in todos">
@@ -240,7 +214,7 @@ new Vue({
240
214
</div >
241
215
<script >
242
216
new Vue ({
243
- el: ' #app5 ' ,
217
+ el: ' #app15 ' ,
244
218
data: {
245
219
newTodo: ' ' ,
246
220
todos: [
0 commit comments