2022-10-27 一、Vue的列表渲染 （1）關鍵字：v-for （2）用法：v-for:"臨時變數名 in 列表名"。“列表”的說明是寫在script中的Vue中的data中。 （3）擴展：在列表渲染中，渲染就是在前端能看見的。需要用到索引的用法。v-for:"(臨時變數名,index) in ...
2022-10-27
一、Vue的列表渲染
（1）關鍵字：v-for
（2）用法：v-for:"臨時變數名 in 列表名"。“列表”的說明是寫在script中的Vue中的data中。
（3）擴展：在列表渲染中，渲染就是在前端能看見的。需要用到索引的用法。v-for:"(臨時變數名,index) in 列表名"
使用實例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <ul> 11 <li v-for="hobby in hobbys">{{hobby}}</li> 12 </ul> 13 <input type="button" value="按鈕" @click="addHobby"> 14 <table> 15 <tr> 16 <th>索引</th> 17 <th>編號</th> 18 <th>品牌</th> 19 <th>價錢</th> 20 </tr> 21 <tr v-for="(computer,index) in computers"> 22 <!-- <td>{{computer.id}}</td>--> 23 <td>{{index}}</td> 24 <td>{{computer.id}}</td> 25 <td>{{computer.brand}}</td> 26 <td>{{computer.price}}</td> 27 </tr> 28 </table> 29 </div> 30 <script> 31 new Vue({ 32 el:"#app", 33 data:{ 34 hobbys:['java',"大數據","前端","UI"], 35 computers:[ 36 { 37 id:101, 38 brand:"聯想", 39 price:5000, 40 }, 41 { 42 id:102, 43 brand:"外星人", 44 price:15000, 45 }, 46 { 47 id:103, 48 brand:"諾基亞", 49 price:6000, 50 } 51 ] 52 }, 53 methods:{ 54 addHobby:function(){ 55 this.hobbys.push("讀書") 56 } 57 } 58 }) 59 </script> 60 </body> 61 </html>
說明：
①"th"與“td”的區別，它們都是表示列。th代表頁眉(粗體居中顯示)也必須放在tr標記內,代表列。
②列表中的增加使用的是“push”.
③第35行中的“computers”表示的是對象數組。
運行的結果：
————————————————————————————————————————
二、Vue的事件綁定
（1）關鍵字：v-on
（2）用法：v-on:事件類型=“函數調用”
（3）簡寫形式：@事件類型=“函數調用”
------------
使用實例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <!-- <input type="button" value="按鈕" v-on:click="clickText" /><br>--> 11 <!-- 簡寫--> 12 <input type="button" value="按鈕" @click="clickTest(10,'java',true)"/><br> 13 <!-- <input type="text" v-on：change="changTest">--> 14 <!-- 簡寫--> 15 <input type="text" @change="changeTest"> 16 </div> 17 <script> 18 new Vue({ 19 el:"#app", 20 data:{}, 21 methods:{ 22 clickTest:function(a,b,c){ 23 alert("點擊事件綁定成功"+a+b+c) 24 }, 25 changeTest:function(){ 26 alert("值改變事件綁定成功") 27 } 28 } 29 }) 30 </script> 31 </body> 32 </html>
說明：在第12行中，增加@時，後面要緊跟“click”,要不然運行時不會出現結果。
----------------------
三、取消控制項的預設行為
（1）適用控制項（超鏈接、表單）
（2）使用的語句：
event.preventDefault();
如果超鏈接使用之後，就不會進行跳轉到指定的頁面；表單中如果是提交，那麼就不會提交到指定位置。
----------------
使用的實例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <a href="http://baidu.com" @click="clickTest">點擊跳轉至百度</a> <form action="01_HelloWorld.html" method="" > <input type="text" name="username"> <input type="submit"> </form> </div> <script> new Vue({ el:"#app", data:{}, methods:{ clickTest:function(){ alert("點擊了超鏈接"); //如果不想讓超鏈接進行跳轉 event.preventDefault();//取消控制項的預設行為 }, subitTest:function(){ alert("表單即將被提交") event.preventDefault();//取消控制項的預設行為 } } }) </script> </body> </html>
四、阻止事件冒泡
（1）含義：例如:一個大框套一個小框，點擊大框時，彈出“點擊了大框”；如果點擊小框時，彈出“點擊了小框”。而不會點擊小框時，先彈出“點擊了小框”，後彈出“點擊了大框”。
（2）使用的語句：
event.stopPropagation();
使用實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <style> #div1{ border: 1px solid red; width: 300px; height: 300px; } #div2{ border: 1px solid blue; width: 100px; height: 100px; } </style> </head> <body> <div id="app"> <div id="div1" @click="div1Test"> <div id="div2" @click="div2Test"></div> </div> </div> <script> new Vue({ el:"#app", data:{}, methods:{ div1Test:function(){ alert("點擊了大框"); }, div2Test:function(){ alert("點擊了小框"); event.stopPropagation();//阻止事件冒泡 } } }) </script> </body> </html>
五、屬性偵聽
（1）作用：當數據模型的值發生變化時，被Vue監聽到，然後執行一個函數。
（2）用法：在Vue中的methods後面設置了一個“watch：”，在這裡面設置它的函數變換。
使用實例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <p>尊姓：{{firstName}}</p> <p>大名：{{lastName}}</p> <input type="text" v-model="firstName"><br> <input type="text" v-model="lastName"><br> <p>全名：{{pullName}}</p> </div> <script> new Vue({ el:"#app", data:{ firstName:"詹姆斯", lastName:"哈登", pullName:"詹姆斯.哈登" }, methods:{ }, watch:{ firstName:function () { this.FullName = this.firstName +"."+ this.lastName }, lastName:function () { this.FullName = this.firstName +"."+ this.lastName }, } }) </script> </body> </html>
