Vue.js 學習
阿新 • • 發佈：2020-07-17
一，Vue.js 介紹
-
Vue 是一套用於構建使用者介面的漸進式javascript框架，與其它大型框架不同的是：Vue被設計為可以自底向上逐層應用。Vue的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合，另外一個方面,當Vue與現代化的工具鏈以及各種支援類庫結合使用時，Vue也完全能夠為複雜的單頁應用提供驅動
-
Vue.js是用於構建互動式的Web介面的庫，它提供MVVM資料繫結和一個可組合的元件系統，具有簡單、靈活的API。從技術上講，Vue.js集中在MVVM模式上的檢視模型層(viewModel)，並通過雙向資料繫結連線檢視（view） 和模型（model）。實際的DOM操作和輸出格式被抽象出來成指令和過濾器。相比其他的MVVM框架，Vue.js更容易上手，它讓你通過簡單而靈活的API建立由資料驅動的UI元件
- Vue 的目標是通過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件
二，導包和IDEA設定
匯入相關jar包
IDEA設定
三，Vue 練習
1，Vue01 --- 插值表示式
1-1.程式碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Vue01-插值表示式</title> 6 <!--當網速較慢，Vue初始化未完成時，插值表示式不能被解析，會直接顯示出來，7 載入完畢之後又會被替換成真實結果，造成閃爍，加上[v-cloak]會隱藏未載入完畢的插值表示式--> 8 <style> 9 [v-cloak] { 10 display: none; 11 } 12 </style> 13 </head> 14 <body> 15 <h1>v-cloak、v-text、v-html指令以及插值表示式的學習</h1> 16 <div id="vue"> 17 <p v-cloak>{{msg1}}</p> 18 <p v-text="msg2"></p> 19 <p>{{msg3}}</p> 20 <p v-html="msg3"></p> 21 </div> 22 23 <script src="../lib/vue.js"></script> 24 <script> 25 var vm = new Vue({ 26 el: "#vue", 27 data: { 28 msg1: "hello,vue1", 29 msg2: "hello,vue2", 30 msg3:"<p style='color:red'>我是一個p標籤</p>" 31 } 32 }) 33 </script> 34 </body> 35 </html>
1-2.執行結果
2，Vue02 --- bind+on指令
2-1.程式碼
1 <!DOCTYPE html> 2 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Vue02-bind+on指令</title> 6 <script src="../lib/vue.js" type="text/javascript"></script> 7 </head> 8 <body> 9 <h1>v-bind、v-on指令的學習</h1> 10 <div id="vue"> 11 <!-- v-bind:可以簡寫為: --> 12 <label>使用者名稱：<input type="text" name="username" v-bind:value="msg"/></label> 13 <hr> 14 <label>使用者名稱：<input type="text" name="username" :value="msg"/></label> 15 <hr> 16 <label>使用者名稱：<input type="text" name="username" :value="'你好：'+msg"/></label> 17 <hr> 18 <!-- v-on:等價於@ --> 19 <button v-on:click="show(name)">點選下顯示</button> 20 <hr> 21 <button @click="show(name)">點選下顯示</button> 22 </div> 23 24 <script type="text/javascript"> 25 var vue = new Vue({ 26 el: "#vue", 27 data: { 28 msg: "鋼鐵俠", 29 name: "蜘蛛俠" 30 }, 31 methods: { 32 show: function (name) { 33 alert("皮特帕克：" + name); 34 } 35 } 36 }) 37 </script> 38 </body> 39 </html>
2-2.執行結果
3，Vue03 --- 實現跑馬燈效果
3-1.程式碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Vue</title> 6 <script src="../lib/vue.js" type="text/javascript"></script> 7 </head> 8 <body> 9 <h1>使用Vue實現跑馬燈效果</h1> 10 11 <div id="vue"> 12 <button @click="lang()">開始</button> 13 <button @click="stop()">停止</button> 14 <h3 v-html="info"></h3> 15 </div> 16 17 <script type="text/javascript"> 18 var vue = new Vue({ 19 el: "#vue", 20 data: { 21 info: "猥瑣發育別浪~穩住我們能贏~發起進攻~回防高地~", 22 timer: null //計時器 23 }, 24 methods: { 25 lang: function () { 26 //此時的this就是vm物件（info、lang、stop等都是直接掛在vm身上的） 27 //console.log(this.info); 28 if (this.timer !== null) { 29 return; 30 } 31 this.timer = setInterval(() => { //設定間隔 32 //此時的this代表vm物件 33 //console.log(this); 34 this.info = this.info.substring(1).concat(this.info.charAt(0)); 35 }, 200); 36 }, 37 38 stop() { 39 clearInterval(this.timer); //清除間隔 40 this.timer = null; 41 } 42 } 43 }) 44 </script> 45 </body> 46 </html>
3-2.執行結果
4，Vue04 ---雙向資料繫結和實現計算機
4-1.程式碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Vue04 --- 雙向資料繫結和實現計算機</title> 6 <script src="../lib/vue.js" type="text/javascript"></script> 7 </head> 8 <body> 9 <div class="box"> 10 <h1>Vue中的雙向資料繫結指令v-mode</h1> 11 <label>單價：<input type="text" v-model="price"></label><br/> 12 <label>數量：<input type="text" v-model="num"></label><br/> 13 <button @click="calc1()">點選計算總價</button> 14 <br/> 15 <label>總價：<span style="color:red" v-text="sum"></span></label> 16 <hr/> 17 <h1>使用v-mode雙向資料繫結實現建議計算器</h1> 18 <label>運算元1：<input type="text" v-model="num1"/></label> 19 <select v-model="operator"> 20 <option value="+">+</option> 21 <option value="-">-</option> 22 <option value="*">x</option> 23 <option value="/">/</option> 24 </select> 25 <label>運算元1：<input type="text" v-model="num2"/></label> 26 <button @click="calc2()">=</button> 27 <span style="font-size: 20px;color:blue" v-text="result"></span> 28 </div> 29 30 <script type="text/javascript"> 31 var vue = new Vue({ 32 el: ".box", 33 data: { 34 price: 3, 35 num: 2, 36 sum: 6, 37 num1: '1', 38 num2: '2', 39 operator: '+', 40 result: 3 41 }, 42 methods: { 43 calc1() { 44 this.sum = this.price * this.num; 45 }, 46 calc2() { 47 // JavaScript的eval()方法可以把一個字串當作JavaScript程式碼執行，並返回執行結果 48 //當代碼很複雜或難以控制時可以使用此方法，大多數還是使用標準方法執行JavaScript程式碼 49 this.result = eval("parseInt(this.num1)" + this.operator + "parseInt(this.num2)"); 50 } 51 } 52 }) 53 </script> 54 </body> 55 </html>
4-2.執行結果
5，Vue05 --- for指令
5-1.程式碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Vue05 --- for指令</title> 6 <script src="../lib/vue.js" type="text/javascript"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <h1>Vue中的for指令</h1> 11 12 <!--val in arrays，這個var就是取出來的值--> 13 <!--遍歷普通陣列--> 14 <p v-for="name in names">{{name}}</p> 15 <!--陣列下標從0開始，index是預設的屬性--> 16 <p v-for="name,index in names" v-text="name+'--->'+index"/> 17 <hr> 18 <!--遍歷物件陣列--> 19 <p v-for="user in users">id：{{user.id}}-->名字：{{user.name}}-->年齡：{{user.age}}</p> 20 <hr> 21 <!--遍歷普通物件的鍵和值--> 22 <p v-for="value,key in Shandx">{{key}}---{{value}}</p> 23 <!--for迴圈固定的次數,遍歷的值名不能為var--> 24 <p v-for="num in 3">{{num}}</p> 25 26 <h1>Vue中的for指令實現資料繫結</h1> 27 <label>id：<input type="text" v-model="id"/></label> 28 <label>name：<input type="text" v-model="name"/></label> 29 <label>age：<input type="text" v-model="age"/></label> 30 <label><button @click="add()">新增人員資訊</button></label> 31 <p v-for="user in users" :key="user.id"> 32 <label><input type="checkbox"/>{{user.id}}---{{user.name}}---{{user.age}}</label> 33 </p> 34 </div> 35 36 <script src="../lib/vue.js"></script> 37 <script> 38 var vm = new Vue({ 39 el:"#app", 40 data:{ 41 names:["蜘蛛俠","鋼鐵俠","美國隊長","雷神"], 42 users:[ 43 {id:1,name:"科比",age:39}, 44 {id:2,name:"韋德",age:37}, 45 {id:3,name:"庫裡",age:32} 46 ], 47 Shandx:{id:1,name:"閃電俠",age:3,hobby:"run"} 48 }, 49 methods:{ 50 add(){ 51 //陣列的push()方法用於向陣列末尾加入元素 52 //陣列的unshift()方法用於向陣列最前面加入元素 53 this.users.unshift({id:this.id,name:this.name,age:this.age}); 54 } 55 } 56 }); 57 </script> 58 </body> 59 </html>
5-2.執行結果
6，Vue06 ---if和show指令
6-1.程式碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Vue06 --- if和show指令</title> 6 <script src="../lib/vue.js" type="text/javascript"></script> 7 </head> 8 <body> 9 <h1>使用vue中的v-if和v-show指令實現元素的顯示和隱藏</h1> 10 <div id="app"> 11 <button @click="toggle()">顯示</button> 12 <button @click="flag=!flag">隱藏</button> 13 <!--v-if為true，則顯示--> 14 <p v-if="flag">我是使用v-if控制的p標籤</p> 15 <!--v-show為true，則顯示--> 16 <p v-show="flag">我是使用v-show控制的p標籤</p> 17 </div> 18 <script type="text/javascript"> 19 var vm = new Vue({ 20 el:"#app", 21 data:{ 22 flag:true 23 }, 24 methods:{ 25 toggle(){ 26 this.flag = !this.flag; 27 } 28 } 29 }); 30 </script> 31 </body> 32 </html>
6-2.執行結果
7，Vue07 ---在Vue中自定義過濾器
7-1.程式碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Vue07 --- 在Vue中自定義過濾器</title> 6 <script src="../lib/vue.js" type="text/javascript"></script> 7 </head> 8 <body> 9 <h1>在Vue中自定義過濾器</h1> 10 <div id="app1"> 11 {{msg|show()}} 12 </div> 13 <div id="app2"> 14 {{msg|show()}} 15 </div> 16 17 <!--匯入Vue--> 18 <script> 19 //全域性過濾器 20 Vue.filter("show",function(a){ 21 return a.replace('鋼鐵俠',"*") 22 }); 23 24 var vm1 = new Vue({ 25 el:"#app1", 26 data:{ 27 msg:"我是鋼鐵俠" 28 }, 29 filters:{ 30 show:function(a){ 31 return a.replace('鋼鐵俠',"#") 32 } 33 } 34 }); 35 36 var vm2 = new Vue({ 37 el:"#app2", 38 data:{ 39 msg:"我是鋼鐵俠" 40 }, 41 filters:{ 42 show(a){ 43 return a.replace('鋼鐵俠',"!") 44 } 45 } 46 }); 47 </script> 48 </body> 49 </html>
7-2.執行結果
8，Vue08 --- Vue中自定義指令詳細測試
8-1.程式碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Vue中自定義指令詳細測試</title> 6 <script src="../lib/vue.js" type="text/javascript"></script> 7 </head> 8 <body> 9 10 <div id="app"> 11 <input type="text" v-shandx="'red'" value="閃電俠"/> 12 </div> 13 14 <script> 15 //自定義指令 v-* 16 Vue.directive("shandx",{ 17 bind:function (el,binding) { 18 //el,指代指令作用的元素 19 //binding.value 就是你自定義指令後面的具體指 ， v-shandx="" 20 el.style.color = binding.value; 21 } 22 }); 23 var vm = new Vue({ 24 el:"#app", 25 directives:{} 26 }) 27 </script> 28 </body> 29 </html>
8-2.執行結果