vue案例分析學習
阿新 • • 發佈：2018-11-03
vue是一款國產的開源的前端框架。
vue中的資料和頁面上標籤內容是'繫結'在一起的，模型資料發生了變動，頁面檢視也會相應變化。這種特性稱之為`響應式`框架。
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--vue的加包--> <script src="js/vue.js"></script> </head> <body> <div id="app">{{name}}</div> <script> // 每個頁面要建立一個Vue物件（例項） var vue = new Vue({ // 模型資料儲存於data之中，其中多個屬性，可以配合{{}}進行顯示 data: { name: "hello, world" }, // el 對應的dom元素，把資料和檢視結合在一起 el:"#app" }); </script> </body>
vue實際上就是建立一個vue物件，通過給這個物件賦予屬性，並在網頁中呼叫建立的vue的屬性值來實現展示的目的，當然vue中也可以儲存方法，通過在methods：{}加入方法來實現網頁的響應式。
vue中包含的很多v-函式：
1）v-for指令
v-for指令基本等同於java中的for迴圈，可以用來實現較多檔案的儲存，減輕檔案的重複性。
<div id="app"> <!-- 指令 迴圈指令 v-for --> <p v-for="p in list"> {{p.name}} , {{p.age}}, {{p.sex}}</p> </div> <script> var vue = new Vue({ el:"#app", data:{ list:[ {name:"張三", age:12,sex:"男"}, {name:"李四", age:14,sex:"女"}, {name:"王五", age:21,sex:"男"}, ] } }); </script>
2）v-if指令
v-if指令同樣，也與java中的if指令類似可以配合v-else使用，與v-if相似的還有v-show，但是v-show不能配合v-else來使用
3） v-bind 繫結屬性，要實現標籤屬性的繫結，必須使用v-bind 指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <!-- 指令 迴圈指令 v-for --> <p v-for="p in list"> {{p.name}} , {{p.price}}, {{p.img}}</p> <table border="1" width="100%" v-show="list.length>0"> <tbody> <!-- p代表陣列中第i個元素，i是下標值--> <tr v-for="(p,i) in list"> <td>{{i+1}}</td> <td>{{p.name}}</td> <td>{{p.price}}</td> <td><img width="110" v-bind:src=" 'images/' + p.img" :title="p.title"></td> <td><img width="110" :src=" 'images/' + p.img"></td> </tr> </tbody> </table> </div> <script> var vue = new Vue({ el:"#app", data:{ list:[ {name:"商品1", price:3000.00, img:"5a0cf6bfN92a5a597.jpg",title:"提示1!!!!!!!!!!!!!!"}, {name:"商品2", price:4000.00, img:"5a0cf672N3c785b7a.jpg",title:"提示2!!!!!!!!!!!!!!"}, {name:"商品3", price:2000.00, img:"5a1f5ed3Nfa577958.jpg",title:"提示3!!!!!!!!!!!!!!"} ] } }); </script> </body> </html>