学习笔记——Vue条件渲染
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 >