前端Vue知識小白
- 2019 年 10 月 20 日
- 筆記
感覺是已好久沒寫博文了。今日難得有時間，便寫一篇文章。此文章是關於前端知識的，我本身是後端，因工作或其他需要，便學習了前端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">Google</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部分知識點，後續呢我也會學習下面的知識，讓我們一起進步，當然我這邊只是我學習完之後的總結。具體想看詳細的話，可看官方文檔，便於自己學習。
目標就像船艦上的指南針，有指南針才知去何方。而那些沒有指南針的船艦隻能跟隨它去遠方，做一個小目標吧，讓告訴你究竟想要幹什麼！
