玩转Vue的24个小程序---基础篇

Vue 听起来就高大上, 简单的几行代码, 实现了意想不到的功能, 一下子把静态的网页变成了动态, 把JavaScript和XML标签无缝对接到了一起.
其实神秘的操作背后, 是大量使用的观察者的模式. 在XML语言中, 安插了一个个小间谍, 实时把消息通知给了自己的朋友.
下面的24个小程序, 可以直接在网页中浏览. 学习别人的代码, 反复实践, 才是快速成长的王道.
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>玩转Vue的24个小程序 -- 基础篇</title>
  6 <script src="vue.min.js"></script>
  7 </head>
  8 
  9 <style>
 10 .class1{
 11   background: #444;
 12   color: #eee;
 13 }
 14 </style>
 15 
 16 <style>
 17 .active {
 18     width: 100px;
 19     height: 100px;
 20     background: green;
 21 }
 22 .text-danger {
 23     background: red;
 24 }
 25 </style>
 26 
 27 <body>
 28 
 29 <!-- input 中, 绑定 Lazy, number, Trim 属性 -->
 30 <div id="app24">
 31 <input v-model.lazy="msg" placeholder="请输入...">
 32 <p>输入的消息是:{{msg}}</p>
 33 <input v-model.number="age" type="number">
 34 <p>输入的年龄是:{{age}}</p>
 35 <input v-model.trim="msg2" placeholder="请输入...">
 36 <p>输入的消息是:{{msg2}}</p>
 37 </div>
 38 
 39 <script>
 40 new Vue ({
 41     el: '#app24',
 42     data:{
 43         msg: '',
 44         age: 30,
 45         msg2: ''
 46     }
 47 })
 48 
 49 document.write('==========24==============')
 50 </script>
 51 
 52 <!-- select 的使用方法 -->
 53 <div id="app23">
 54   <select v-model="selected" name="fruit">
 55     <option value="">选择一个网站</option>
 56     <option value="www.runoob.com">Runoob</option>
 57     <option value="www.google.com">Google</option>
 58   </select>
 59  
 60   <div id="output">
 61       选择的网站是: {{selected}}
 62   </div>
 63 </div>
 64  
 65 <script>
 66 new Vue({
 67   el: '#app23',
 68   data: {
 69     selected: '' 
 70   }
 71 })
 72 
 73 document.write('==========23==============')
 74 </script>
 75 
 76 <!-- checkbox 单复选框和多复选框 -->
 77 <div id="app22">
 78   <p>单个复选框：</p>
 79   <input type="checkbox" id="checkbox" v-model="checked">
 80   <label for="checkbox">{{ checked }}</label>
 81     
 82   <p>多个复选框：</p>
 83   <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
 84   <label for="runoob">Runoob</label>
 85   <input type="checkbox" id="google" value="Google" v-model="checkedNames">
 86   <label for="google">Google</label>
 87   <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
 88   <label for="taobao">taobao</label>
 89   <br>
 90   <span>选择的值为: {{ checkedNames }}</span>
 91 </div>
 92  
 93 <script>
 94 new Vue({
 95   el: '#app22',
 96   data: {
 97     checked : false,
 98     checkedNames: []
 99   }
100 })
101 
102 document.write('==========22==============')
103 </script>
104 
105 <!-- input , textarea -->
106 <div id="app21">
107   <p>input 元素：</p>
108 
109   <input v-model="message" placeholder="编辑我……">
110         <p>消息是: {{ message }}</p>
111   <p>textarea 元素：</p>
112 
113   <textarea rows = '5' cols = '30' v-model="message2" placeholder="多行文本输入……"></textarea>
114     <p style="white-space: pre">输入的文本是:{{ message2 }}</p>
115 </div>
116  
117 <script>
118 new Vue({
119   el: '#app21',
120   data: {
121     message: 'Runoob',
122     message2: '菜鸟教程
http://www.runoob.com'
123   }
124 })
125 document.write('==========21==============')
126 </script>
127 
128 
129 <!-- css属性更改3 -->
130 <div id="app20">
131   <div v-bind:class="classObject"></div>
132 </div>
133 
134 <script>
135 new Vue({
136   el: '#app20',
137   data: {
138     isActive: true,
139     error: {
140       value: false,
141       type: 'fatal'
142     }
143   },
144   computed: {
145     classObject: function () {
146       return {
147         base: true,
148         'active': this.isActive && !this.error.value,
149         'text-danger': this.error.value && this.error.type === 'fatal',
150       }
151     }
152   }
153 })
154 document.write('==========20==============')
155 </script>
156 
157 <!-- css属性更改2 -->
158 <div id="app19">
159   <div v-bind:class="classObject"></div>
160 </div>
161 
162 <script>
163 new Vue({
164   el: '#app19',
165   data: {
166     classObject: {
167       'active': true,
168       'text-danger': true
169     }
170   }
171 })
172 document.write('==========19==============')
173 </script>
174 
175 <!-- css属性更改1 -->
176 <div id="app18">
177   <div class="static"
178      v-bind:class="{ 'active': isActive, 'text-danger': hasError }">
179   </div>
180 </div>
181 
182 <script>
183 vm = new Vue({
184   el: '#app18',
185   data: {
186     isActive: true,
187     hasError: true
188   }
189 })
190 
191 document.write('==========18==============')
192 </script>
193 
194 
195 <!-v-model 绑定, 相当于 <input :value="kilometers" @input="kilometers = $event.target.value">-->
196 <div id = "app17">
197     千米 : <input type = "text" v-model = "kilometers">
198     米 : <input type = "text" v-model = "meters">
199 </div>
200 <p id="info"></p>
201 <script type = "text/javascript">
202     var vm = new Vue({
203     el: '#app17',
204     data: {
205         kilometers : 0,
206         meters:0
207     },
208     methods: {
209     },
210     computed :{
211     },
212     watch : {
213         kilometers:function(val) {
214             this.kilometers = val;
215             this.meters = this.kilometers * 1000
216         },
217         meters : function (val) {
218             this.kilometers = val/ 1000;
219             this.meters = val;
220         }
221     }
222     });
223     // $watch 是一个实例方法
224     vm.$watch('kilometers', function (newValue, oldValue) {
225     // 这个回调将在 vm.kilometers 改变后调用
226     document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
227 })
228 
229 document.write('==========17==============')
230 </script>
231 
232 <!-- @click 事件响应, 计数器 -->
233 <div id = "app16">
234     <p style = "font-size:25px;">计数器: {{ counter }}</p>
235     <button @click = "counter++" style = "font-size:25px;">点我</button>
236 </div>
237 <script type = "text/javascript">
238 var vm = new Vue({
239     el: '#app16',
240     data: {
241         counter: 1
242     }
243 });
244 vm.$watch('counter', function(nval, oval) {
245     console.log('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
246 });
247 
248 document.write('==========16==============')
249 </script>
250 
251 <!-- @click 事件响应, 超链接跳转 -->
252 <div id="app15">
253     <p @click = "todo" >name : {{name}}</p>
254     <p>url : <a :href = "url" > {{url}}</a> </p>
255     <p>site : {{site}}</p>
256 </div>
257 
258 <script>
259 var vm = new Vue({
260   el: '#app15',
261   data: {
262     name: 'Google',
263     url: 'http://www.google.com'
264   },
265   methods:{
266     todo:function(){
267         window.open(this.url)
268     }
269   },     
270   computed: {
271     site: {
272       // getter
273       get: function () {
274         return this.name + ' ' + this.url
275       },
276       // setter
277       set: function (newValue) {
278         var names = newValue.split(' ')
279         this.name = names[0]
280         this.url = names[names.length - 1]
281       }
282     }
283   }
284 })
285 
286 // 调用 setter， vm.name 和 vm.url 也会被对应更新
287 vm.site = 'Runoob http://www.runoob.com';
288 
289 document.write('==========15==============')
290 </script>
291 
292 <!-- computed methods -->
293 <!--使用 computed属性 或 methods  computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。 ：-->
294 <div id="app14">
295   <p>原始字符串: {{ message }}</p>
296   <p>计算后反转字符串: {{ reversedMessage }}</p>
297   <p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
298 </div>
299  
300 <script>
301 var vm = new Vue({
302   el: '#app14',
303   data: {
304     message: 'Runoob!'
305   },
306   computed: {
307     // 计算属性的 getter
308     reversedMessage: function () {
309       // `this` 指向 vm 实例
310       return this.message.split('').reverse().join('')
311     }
312   },
313   methods: {
314     reversedMessage2: function () {
315       return this.message.split('').reverse().join('')
316     }
317   }
318 })
319 document.write('==========14==============')
320 </script>
321 
322 <!--使用 v-for 迭代器 ：-->
323 <div id="app13">
324   <ul>
325     <li v-for="value in object">
326     {{ value }}
327     </li>
328   </ul>
329 </div>
330  
331 <script>
332 new Vue({
333   el: '#app13',
334   data: {
335     object: {
336       name: '菜鸟教程',
337       url: 'http://www.runoob.com',
338       slogan: '学的不仅是技术，更是梦想！'
339     }
340   }
341 })
342 document.write('==========13=============')
343 </script>
344 
345 <!--使用 v-for ：-->
346 <div id="app12">
347   <ul>
348     <template v-for="site in sites">
349       <li>{{ site.name }}</li>
350     </template>
351   </ul>
352 </div>
353 
354 <script>
355 new Vue({
356   el: '#app12',
357   data: {
358     sites: [
359       { name: 'Runoob' },
360       { name: 'Google' },
361       { name: 'Taobao' }
362     ]
363   }
364 })
365 document.write('==========12==============')
366 </script>
367 
368 <!-- 完整语法 -->
369 <a v-bind:href="url"></a>
370 <!-- 缩写 -->
371 <a :href="url"></a>
372 
373 <!-- 完整语法 -->
374 <a v-on:click="doSomething"></a>
375 <!-- 缩写 -->
376 <a @click="doSomething"></a>
377 
378 <div id="app11">
379     <pre><a :href="url">{{ message }}</a></pre>
380     <button @click="reverseMessage">反转字符串</button>
381 </div>
382     
383 <script>
384 new Vue({
385   el: '#app11',
386   data: {
387     url: 'http://www.runoob.com',
388     message: 'Runoob'
389     },
390     methods: {
391         reverseMessage: function () {
392             this.message = this.message.split('').reverse().join('')
393     }
394   }
395 })
396 document.write('==========11==============')
397 </script>
398 
399 <!-- filters -->
400 <div id="app10">
401   {{ message | capitalize }}
402 </div>
403     
404 <script>
405 new Vue({
406   el: '#app10',
407   data: {
408     message: 'runoob'
409   },
410   filters: {
411     capitalize: function (value) {
412       if (!value) return ''
413       value = value.toString()
414       return value.charAt(0).toUpperCase() + value.slice(1,value.length-1) + value.slice(value.length-1).toUpperCase()
415     }
416   }
417 })
418 
419 document.write('==========10==============')
420 </script>
421 
422 <!-- v-on:click -->
423 <div id="app9">
424     <p>{{ message }}</p>
425     <button v-on:click="reverseMessage">反转字符串</button>
426 </div>
427     
428 <script>
429 new Vue({
430   el: '#app9',
431   data: {
432     message: 'Runoob!'
433   },
434   methods: {
435     reverseMessage: function () {
436       this.message = this.message.split('').reverse().join('')
437     }
438   }
439 })
440 document.write('==========9==============')
441 </script>
442 
443 
444 <!-- v-model 内容绑定 -->
445 <div id="app8">
446     <p>{{ message }}</p>
447     <input v-model="message">
448 </div>
449     
450 <script>
451 new Vue({
452   el: '#app8',
453   data: {
454     message: 'Runoob!'
455   }
456 })
457 
458 document.write('==========8==============')
459 </script>
460 
461 <!-- v-bind 链接绑定 -->
462 <div id="app7">
463     <pre><a v-bind:href="url">菜鸟教程</a></pre>
464 </div>
465     
466 <script>
467 new Vue({
468   el: '#app7',
469   data: {
470     url: 'http://www.runoob.com'
471   }
472 })
473 document.write('==========7==============')
474 </script>
475 
476 <!--指令是带有 v-if v-else 前缀的特殊属性。-->
477 <div id="app6">
478     <p v-if="seen">现在你看到我了</p>
479     <p v-if="disp">我看不到你了</p>
480 </div>
481     
482 <script>
483 new Vue({
484   el: '#app6',
485   data: {
486     seen: false,
487     disp: true
488   }
489 })
490 document.write('===========6=============')
491 </script>
492 
493 
494 <!--Vue.js 都提供了完全的 JavaScript 表达式支持。-->
495 <div id="app5">
496     {{5+5}}<br>
497     {{ ok ? 'YES' : 'NO' }}<br>
498     {{ message.split('').reverse().join(' ') }}
499     <div v-bind:id="'list-' + id">菜鸟教程</div>
500 </div>
501     
502 <script>
503 new Vue({
504   el: '#app5',
505   data: {
506     ok: true,
507     message: 'RUNOOB',
508     id : 1
509   }
510 })
511 document.write('===========5=============')
512 </script>
513 
514 <!-- v-bind 绑定 -->
515 <div id="app4">
516   <label for="r1">修改颜色</label>
517   <input type="checkbox" v-model="use1" id="r1">
518   <input type="checkbox" v-model="use2" id="r2">
519   <br><br>
520   <div v-bind:class="{'class1': use2}">
521     v-bind:class 指令
522   </div>
523 </div>
524 
525 <script>
526 new Vue({
527     el: '#app4',
528   data:{
529       use1: true,
530       use2: false
531   }
532 });
533 document.write('===========4=============')
534 </script>
535 
536 
537 <!--使用 v-html 指令用于输出 html 代码：-->
538 <div id="app3">
539     <div v-html="message"></div>
540 </div>
541 <script>
542     new Vue({
543   el: '#app3',
544   data: {
545     message: '<h5>RUNOOB</h5>'
546   }
547 })
548 
549 document.write('==========3==============')
550 </script>
551 
552 <!-- JSON结构的数据输入 -->
553  <div id="app2">
554     <h3>site : {{site}}</3>
555     <h4>url : {{url}}</h4>
556     <p>{{details()}}</p>
557     <p>Alexa : {{alexa}}</p>
558 </div>
559 
560 <script>
561  var data = { site: "RUNOOB", url: "www.runoob.com", alexa: 10000}
562  var vm = new Vue({
563         el: '#app2',
564         data: data,
565         methods: {
566             details: function() {
567                 return  this.site + " - 学的不仅是技术，更是梦想！";
568             }
569         }
570     })
571 document.write('==========2==============')
572 </script>
573 
574 <div id="app">
575   <p>{{ message }}</p>
576 </div>
577 
578 <!-- 第一个小程序 -->
579 <script>
580 new Vue({
581   el: '#app',
582   data: {
583     message: '<h1>RUNOOB</h1>'
584   }
585 })
586 //<!--传递Data参数：-->
587 
588  document.write('==========1==============')
589  </script>
590 
591 </body>
592 </html>