##js框架 vue
1. 職責劃分-MVVM
Model 模型 - 數據
View 視圖 - html 標籤，樣式
ViewModel 用來結合模型和視圖 - 決定數據展示在哪個標籤上
2. 入門例子
vue中的數據和頁面上標籤內容是'綁定'在一起的，模型數據發生了變動，頁面視圖也會相應變化。這種特性稱之爲響應式框架。
例如：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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>
</html>注意：
- 綁定時，要把一個統一的父標籤與Vue對象進行綁定
- 不要把Vue對象和html或body標籤綁定，建議和一個div標籤綁定
3.計算屬性
{{}} 中的表達式可以進行簡單的運算，例如：
<p>{{name.split("").reverse().join("")}}</p>
<p>{{age+1}}</p>爲了不要直接在視圖執行這些過於複雜的計算，可以把這些計算的邏輯通過計算屬性來表示
例如：
<!-- 視圖, 是由兩個{{}}佔位，到模型中找相應的數據進行展示, 匹配的是模型數據的屬性名稱 -->
<div id="app">
<p>{{nameReverse}}</p>
<p>{{age+1}}</p>
<div>
<span>{{sex}}</span>
</div>
</div>
<script>
// 每個頁面要創建一個Vue對象（實例）
var vue = new Vue({
// 模型數據存儲於data之中，其中多個屬性，可以配合{{}}進行顯示
data: {
name: "hello, world",
age: 18,
sex: "男"
},
// el 對應的dom元素，把數據和視圖結合在一起
el:"#app",
computed: {
/* 計算屬性，對應一個函數，由普通屬性計算而來 */
nameReverse : function(){
// this 代表vue對象
return this.name.split("").reverse().join("");
}
}
});
</script>4. v-for 指令
<div id="app">
<!-- 指令 循環指令 v-for -->
<p v-for="p in list"> {{p.name}} , {{p.price}}, {{p.img}}</p>
</div>
<script>
/*
[
{name:"商品1", price:3000.00, img:"圖片名1.jpg"},
{name:"商品2", price:4000.00, img:"圖片名2.jpg"},
{name:"商品3", price:2000.00, img:"圖片名3.jpg"}
]
*/
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>5. v-if 指令
條件成立，在視圖上就顯示此標籤，否則視圖上不會有這個標籤
<div id="app">
<!-- 指令 循環指令 v-for -->
<p v-for="p in list"> {{p.name}} , {{p.price}}, {{p.img}}</p>
<table border="1" width="100%" v-if="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>{{p.img}}</td>
</tr>
</tbody>
</table>
<span v-else>暫無商品</span>
</div>v-show 指令 根據條件決定表示是否顯示，
與v-if的區別在於，條件不成立時，標籤根本不會出現
v-show是條件不成立時，隱藏了標籤
v-show不能配合v-else 使用
6. v-bind 綁定屬性
要實現標籤屬性的綁定，必須使用v-bind 指令
<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>
<!-- {{}} 語法只能用來佔位內容，不能作爲標籤的屬性(特性)
要綁定標籤的屬性，需要使用 v-bind:屬性名="變量"
簡化寫法(省略了v-bind)：
:屬性名="變量"
-->
<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>7. 事件處理
<div id="app">
<!-- 格式： v-on:事件名
簡化寫法： @事件名
還可以實現參數傳遞
-->
<input type="button" value="點我" v-on:click="abc(50)">
<input type="button" value="點我" @click="abc(100)">
</div>
<script>
var vue = new Vue({
el:"#app",
data: {
},
methods: {
abc: function(i){
console.log("點擊了按鈕", i);
}
}
});
</script>8. 雙向綁定
v-bind:屬性名 只能實現單向的綁定：模型的修改能夠立刻反應到視圖，但視圖的修改不能影響模型
v-model:屬性名 能夠實現雙向綁定：不僅有v-bind的功能，而且視圖的修改也能影響模型了