前端Vue知识小白

感觉是已好久没写博文了。今日难得有时间，便写一篇文章。此文章是关于前端知识的，我本身是后端，因工作或其他需要，便学习了前端Vue。此文章是在菜鸟教程上学习的。那么下面进入正文！
首先，Vue.js是一套构建用户界面的渐进式框架。只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue 学习起来非常简单,不过因人而异，有人学的比较快，有人学的较慢。只要有心，有目标，肯定会有收获的。
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
  6     <script src="js/vue.js"></script>
  7 </head>
  8 <style type="text/css">
  9     .class1{background: #444;color: #eee;}
 10     .active{width: 100px;height: 100px;background: green;}
 11     .text-danger{background: red;}
 12 </style>
 13 <body>   
 14     <!-- 指令是带有 v- 前缀的特殊属性 -->
 15     <!-- 完整语法 -->
 16     <a v-bind:href="url"></a>
 17     <!-- 缩写 -->
 18     <a :href="url"></a>
 19     <!-- 完整语法 -->
 20     <a v-on:click="doSomething"></a>
 21     <!-- 缩写 -->
 22     <a @click="doSomething"></a>
 23 
 24     <div id="demo1">
 25         <h2>site : {{ site }}</h2>
 26         <h2>url : {{ url }}</h2>
 27         <h2>zys : {{ zys }}</h2>
 28         <h2>{{ findUser() }}</h2>
 29         <div v-html="message"></div>
 30     </div>
 31     <script type="text/javascript">
 32         var vue = new Vue({
 33             el: '#demo1',
 34             data: {
 35                 site: "123456",
 36                 url: "http://baidu.com",
 37                 zys: "zys",
 38                 message: "<h1>菜鸟教程</h1>"
 39             },
 40             methods: {
 41                 findUser: function(){
 42                     return this.zys + ",有梦想,加油！！！"
 43                 }
 44             }
 45         });
 46     </script>
 47     <div id="demo2">
 48         <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
 49         <br><br>
 50         <div v-bind:class="{'class1':use}">
 51             v-bind:class 指令
 52         </div>
 53     </div>
 54     <script type="text/javascript">
 55         new Vue({
 56             el: '#demo2',
 57             data: {
 58                 use: false
 59             }
 60         });
 61     </script>
 62     <div id="demo3">
 63         <h2>{{ 5 + 5}}</h2><br>
 64         {{ok ? "YES" : "NO"}}<br>
 65         {{message.split('').reverse().join('')}}
 66         <div v-bind:id="'list-' + id">菜鸟教程</div>
 67     </div>
 68     <script type="text/javascript">
 69         new Vue({
 70             el: '#demo3',
 71             data: {
 72                 ok: true,
 73                 message: 'RUNOOB',
 74                 id: 2
 75             }
 76         });
 77     </script>
 78     <div id="demo4">
 79         <h2 v-if="see1">现在你可以看到我</h2>
 80         <template v-if="ok">
 81             <h3>Hello World!!!</h3>
 82         </template>
 83     </div>
 84     <script type="text/javascript">
 85         new Vue({
 86             el: '#demo4',
 87             data: {
 88                 see1: true,
 89                 ok: true
 90             }
 91         });
 92     </script>
 93 
 94     <div id="demo5">
 95         <a v-bind:href="url">百度</a>
 96     </div>
 97     <script type="text/javascript">
 98         new Vue({
 99             el: '#demo5',
100             data: {
101                 url: "http://baidu.com"
102             }
103         });
104     </script>
105 
106     <div id="demo6"><!-- 使用 v-model 指令来实现双向数据绑定 -->
107         {{ msg }}
108         <input v-model="msg">
109     </div>
110     <script type="text/javascript">
111         new Vue({
112             el: '#demo6',
113             data: {
114                 msg: "你好"
115             }
116         });
117     </script>
118 
119     <div id="demo7"><!-- 使用 v-on 监听事件 -->
120         {{ msg }}
121         <button v-on:click="reverseMsg">反转字符串</button>
122     </div>
123     <script type="text/javascript">
124         new Vue({
125             el: '#demo7',
126             data: {
127                 msg : "Runoob!"
128             },
129             methods: {
130                 reverseMsg: function (){
131                     this.msg = this.msg.split('').reverse().join('');
132                 }
133             }
134         });
135     </script>
136     <div id="demo8">
137           {{ message | capitalize }}
138     </div>
139     <script>
140         new Vue({
141           el: '#demo8',
142           data: {
143             message: 'runoob'
144           },
145           filters: {
146             capitalize: function (value) {
147               if (!value) return ''
148               value = value.toString()
149               return value.charAt(0).toUpperCase() + value.slice(1)
150             }
151           }
152         })
153     </script>
154     <div id="demo9">
155           <div v-if="Math.random() > 0.5">
156               Sorry
157           </div>
158           <div v-else>
159               Not Sorry
160           </div>
161     </div>
162     <script>
163         new Vue({
164           el: '#demo9'
165         })
166     </script>
167     <div id="demo10">
168           <div v-if="type=='A'">
169               A
170           </div>
171           <div v-else-if="type=='B'">
172               B
173           </div>
174           <div v-else-if="type=='C'">
175               C
176           </div>
177           <div v-else>
178               Not ABC
179           </div>
180     </div>
181     <script>
182         new Vue({
183           el: '#demo10',
184           data: {
185               type: 'A'
186           }
187         })
188     </script>
189 
190     <div id="demo11"><!-- v-for 可以绑定数据到数组来渲染一个列表 -->
191           <ol><!-- v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 -->
192               <li v-for="site in sites">
193                   {{ site.name }}
194               </li>
195           </ol>
196     </div>
197     <script>
198         new Vue({
199           el: '#demo11',
200           data: {
201               sites: [
202                   { name : 'A'},
203                   { name : 'B'},
204                   { name : 'C'}
205               ]
206           }
207         })
208     </script>
209     <div id="demo12"><!-- v-for 可以通过一个对象的属性来迭代数据 -->
210           <ol>
211               <li v-for="value in object">
212                   {{ value }}
213               </li>
214           </ol>
215     </div>
216     <script>
217         new Vue({
218           el: '#demo12',
219           data: {
220               object: {
221                   name: "菜鸟教程",
222                   url: "http://baidu.com",
223                   explain: "说明描述等等",
224               }
225           }
226         })
227     </script>
228     <div id="demo13"><!-- v-for 也可以循环整数 -->
229               <li v-for="n in 10">
230                   {{ n }}
231               </li>
232     </div>
233     <script>
234         new Vue({
235           el: '#demo13'
236         })
237     </script>
238 
239     <div id="demo14"><!-- 计算属性关键词: computed -->
240                <p>原始字符串: {{ message }}</p>
241               <p>计算后反转字符串: {{ reversedMessage }}</p>
242     </div>
243     <script>
244         new Vue({
245           el: '#demo14',
246           data: {
247             message: 'Runoob!'
248           },
249           computed: {
250             // 计算属性的 getter
251             reversedMessage: function () {
252               // `this` 指向 vm 实例
253               return this.message.split('').reverse().join('')
254             }
255           }
256         })
257     </script>
258     <div id="demo15"><!-- 通过 watch 来响应数据的变化 -->
259                <p style="font-size: 25px;">计数器: {{ counter }}</p>
260                <button @click="counter++" style="font-size: 25px;">点击</button>
261     </div>
262     <script>
263         var vm = new Vue({
264           el: '#demo15',
265           data: {
266             counter: 1
267           }
268         });
269         vm.$watch('counter',function(nval,oval){
270             alert("计数器值的变化：" + oval + "变为" + nval + "!");
271         });
272     </script>
273     <div id="demo16"><!-- 千米与米之间的换算 -->
274            千米：<input type="text" v-model="kilometers">
275            米：<input type="text" v-model="meters">
276            <p id="info"></p>
277     </div>
278     <script>
279         var vm = new Vue({
280           el: '#demo16',
281           data: {
282             kilometers: 0,
283             meters: 0
284           },
285           methods: {
286 
287           },
288           watch: {
289               kilometers:function(val){
290                   this.kilometers = val;
291                   this.meters = this.kilometers*1000;
292               },
293               meters:function(val){
294                   this.kilometers = val/1000;
295                   this.meters = val;
296               }
297           }
298         });
299         vm.$watch('kilometers',function(newValue,oldValue){
300             // 这个回调将在 vm.kilometers 改变后调用
301             document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
302         });
303     </script>
304 
305     <div id="demo17"><!-- 样式绑定 -->
306         <!-- <div class="active"></div> -->
307            <div :class="{active: isActive}"></div>
308     </div>
309     <script>
310         new Vue({
311           el: '#demo17',
312           data: {
313             isActive: true
314           }
315         });
316     </script>
317     <div id="demo18"><!-- 可以在对象中传入更多属性用来动态切换多个 class  -->
318             <!-- <div class="static active text-danger"></div> -->
319            <div class="static" :class="{active: isActive,'text-danger': hasError}"></div>
320     </div>
321     <script>
322         new Vue({
323           el: '#demo18',
324           data: {
325             isActive: true,
326             hasError: true
327           }
328         });
329     </script>
330     <div id="demo19"><!-- 可以把一个数组传给 v-bind:class  -->
331           <div :class="[activeClass, errorClass]"></div>
332     </div>
333     <script>
334         new Vue({
335           el: '#demo19',
336           data: {
337             activeClass: 'active',
338             errorClass: 'text-danger'
339           }
340         });
341     </script>
342     <div id="demo20"><!-- 可以把一个数组传给 v-bind:class  -->
343           <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
344     </div>
345     <script>
346         new Vue({
347           el: '#demo20',
348           data: {
349             activeColor: 'green',
350             fontSize: 30
351           }
352         });
353     </script>
354     <div id="demo21"><!-- 可以把一个数组传给 v-bind:class  -->
355           <div :style="styleObject">菜鸟教程</div>
356     </div>
357     <script>
358         new Vue({
359           el: '#demo21',
360           data: {
361             styleObject: {
362               color: 'orange',
363               fontSize: '30px'
364             }
365           }
366         });
367     </script>
368 
369     <div id="demo22"><!-- Vue.js 事件处理器  -->
370           <button @click="counter += 1">增加1</button>
371           <p>这个按钮被点击了{{ counter }}次！</p>
372     </div>
373     <script>
374         new Vue({
375           el: '#demo22',
376           data: {
377                    counter: 0
378           }
379         });
380     </script>
381     <div id="demo23"><!-- Vue.js 事件处理器  -->
382           <button @click="greet">Greet</button>
383     </div>
384     <script>
385         new Vue({
386           el: '#demo23',
387           data: {
388                    name: 'Vue.js'
389           },
390           methods:{
391               greet: function(event){
392                   // `this` 在方法里指当前 Vue 实例
393                   alert('Hello ' + this.name + '!')
394                   // `event` 是原生 DOM 事件
395                   if(event){
396                       alert(event.target.tagName)
397                   }
398               }
399           }
400         });
401     </script>
402     <div id="demo24"><!-- 可以用内联 JavaScript   -->
403           <button @click="say('hi')">Say hi</button>
404           <button @click="say('what')">Say what</button>
405     </div>
406     <script>
407         new Vue({
408           el: '#demo24',
409           methods:{
410               say: function(msg){
411                   alert(msg)
412               }
413           }
414         });
415     </script>
416     <!-- 事件修饰符 -->
417     <!-- 阻止单击事件冒泡 -->
418     <a v-on:click.stop="doThis"></a>
419     <!-- 提交事件不再重载页面 -->
420     <form v-on:submit.prevent="onSubmit"></form>
421     <!-- 修饰符可以串联  -->
422     <a v-on:click.stop.prevent="doThat"></a>
423     <!-- 只有修饰符 -->
424     <form v-on:submit.prevent></form>
425     <!-- 添加事件侦听器时使用事件捕获模式 -->
426     <div v-on:click.capture="doThis">...</div>
427     <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
428     <div v-on:click.self="doThat">...</div>
429     <!-- click 事件只能点击一次，2.1.4版本新增 -->
430     <a v-on:click.once="doThis"></a>
431 
432     <!-- 表单 -->
433     <div id="demo25"><!-- 可以用 v-model 指令在表单控件元素上创建双向数据绑定   -->
434           <input v-model="message" placeholder="编辑input">
435           <p>input消息是{{ message }}</p>
436           <textarea v-model="message2" placeholder="编辑textarea"></textarea>
437           <p>textarea消息是{{ message2 }}</p>
438     </div>
439     <script>
440         new Vue({
441           el: '#demo25',
442           data: {
443               message: 123,
444               message2: 456
445           }
446         });
447     </script>
448     <div id="demo26"><!-- 复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组   -->
449           <p>单个复选框</p>
450           <input type="checkbox" name="checkbox" v-model="checked">
451           <label>{{ checked }}</label>
452           <p>多个复选框</p>
453           <input type="checkbox" id="runoob" value="runoob" v-model="checkedNames"><label>Runoob</label>
454           <input type="checkbox" id="google" value="google" v-model="checkedNames"><label>Google</label>
455           <input type="checkbox" id="taobao" value="taobao" v-model="checkedNames"><label>Taobao</label>
456           <span>选择的值为: {{ checkedNames }}</span>
457     </div>
458     <script>
459         new Vue({
460           el: '#demo26',
461           data: {
462               checked: false,
463               checkedNames: []
464           }
465         });
466     </script>
467     <div id="demo27"><!-- 单选按钮的双向数据绑定  -->
468           <input type="radio" id="google" value="google" v-model="picked"><label>Google</label>
469           <input type="radio" id="runoob" value="runoob" v-model="picked"><label>Runoob</label>
470           <span>选择的值为: {{ picked }}</span>
471     </div>
472     <script>
473         new Vue({
474           el: '#demo27',
475           data: {
476               picked: 'google'
477           }
478         });
479     </script>
480     <div id="demo28"><!-- 下拉列表的双向数据绑定  -->
481           <select v-model="selected" >
482               <option value="">选择一个网站</option>
483               <option value="http://google.com">谷歌</option>
484               <option value="http://baidu.com">百度</option>
485           </select>
486           <div>选择的网站：{{ selected }}</div>
487     </div>
488     <script>
489         new Vue({
490           el: '#demo28',
491           data: {
492               selected: ''
493           }
494         });
495     </script>
496 
497     <!-- 组件 -->
498     <!-- 注册一个全局组件语法格式  Vue.component(tagName, options) -->
499     <!-- tagName 为组件名，options 为配置选项  <tagName></tagName> -->
500 
501     <!-- 全局组件 -->
502     <div id="demo29">
503         <runoob></runoob>
504     </div>
505     <script>
506         /*注册*/
507         Vue.component('runoob',{
508             template: '<h1>自定义组件1！</h1>'
509         })
510         /*创建根实例*/
511         new Vue({
512             el: '#demo29'
513         })
514     </script>
515     <!-- 局部组件 -->
516     <div id="demo30">
517         <runoob></runoob>
518     </div>
519     <script>
520         /*注册*/
521         var Chlid = {
522             template: '<h1>自定义组件2！</h1>'
523         }
524         /*创建根实例*/
525         new Vue({
526             el: '#demo30',
527             components:{
528                 // <runoob> 将只在父模板可用
529                 'runoob': Chlid
530             }
531         })
532     </script>
533     <!-- prop 是父组件用来传递数据的一个自定义属性 -->
534     <div id="demo31">
535         <chlid message="hello!"></chlid>
536     </div>
537     <script>
538         Vue.component('chlid',{
539             // 声明 props
540             props: ['message'],
541             // 同样也可以在 vm 实例中像 “this.message” 这样使用
542             template: '<span>{{ message }}</span>'
543         })
544         /*创建根实例*/
545         new Vue({
546             el: '#demo31'
547         })
548     </script>
549 </body>
550 </html>
以上这些Demo呢，是Vue部分知识点，后续呢我也会学习下面的知识，让我们一起进步，当然我这边只是我学习完之后的总结。具体想看详细的话，可看官方文档，便于自己学习。
目标就像船舰上的指南针，有指南针才知去何方。而那些没有指南针的船舰只能跟随它去远方，做一个小目标吧，让告诉你究竟想要干什么！
秒客网

前端Vue知识小白

相关文章
