- A+
所属分类：Web前端
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>
