Web前端之javascript框架vue
阿新 • • 發佈：2018-12-20
vue框架-----"響應式"框架。
檢視
1.由{{}}佔位， 匹配的是模型資料(儲存於data:{})的屬性名稱
2.每個頁面要建立一個Vue例項
3.el對應的dom元素，把資料和檢視結合在一起
4.計算屬性computed，對應一個函式
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="app">{{nameReverse}}</div> <script> var vue = new Vue({ data: { name: "hello, world" }, el:"#app", computed: { nameReverse : function(){ return this.name.split("").reverse().join(""); } }); </script> </body> </html>
v-for 迴圈指令
<div id="app"> <p v-for="p in list"> {{p.name}} , {{p.price}}, {{p.img}}</p> <p v-for="(p,i) in list"> {{p.name}} , {{p.price}}, {{p.img}}</p> </div> <script> var vue = new Vue({ el:"#app", data:{ list:[ {name:"商品1", price:3000.00, img:"圖片名1.jpg"}, {name:"商品2", price:4000.00, img:"圖片名2.jpg"}, {name:"商品3", price:2000.00, img:"圖片名3.jpg"} ] } }); </script>
v-if 條件指令：條件不成立檢視上不會有這個標籤
<div id="app"> <table border="1" width="100%" v-if="list.length>0"> <tbody> <tr v-for="(p,i) in list"> <td>{{i+1}}</td> <td>{{p.name}}</td> <td>{{p.price}}</td> <td>{{p.img}}</td> </tr> </tbody> </table> <span v-else>物品已售罄</span> </div> <script> var vue = new Vue({ el:"#app", data:{ list:[ {name:"商品1", price:3000.00, img:"圖片名1.jpg"}, {name:"商品2", price:4000.00, img:"圖片名2.jpg"}, {name:"商品3", price:2000.00, img:"圖片名3.jpg"} ] } }); </script>
v-show 指令：條件不成立時，標籤根本不會出現，隱藏了標籤
繫結屬性
1.v-bind:單向繫結：檢視的修改不影響模型
格式：v-bind:屬性名="變數"
簡化寫法：:屬性名="變數"
2.v-model:雙向繫結：檢視的修改影響模型
7. 事件處理
格式：v-on:事件名
簡化寫法：@事件名