[2017.03.16]
安裝vue：nmp install vue;
在頁面中引入vue.js：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
入門小例子：
<body>
<div id="box">
{{msg}}
</div>
</body>
<script type="text/[JavaScript](http://lib.csdn.net/base/javascript)">
window.onload = function(){
var c = new Vue({
el:'#box', //選擇器
data:{
msg:'Welcome'
}
});
};
</script>
data里的數據：
字符串，數字，數組，json，bool；
常用指令：
v-model（產生數據）：
<div id="box">
<input type="text" v-model="msg">
</div>
ps：其中數據雙向綁定，msg修改時同步的；
v-for(循環):(自帶index)--對于json數據還帶有key
要輸出json數據&數組時需要循環輸出：
對于數組：
arr:["apple", "pear","orange"]
<ul>
<li v-for="(value,index) in arr">
{{value}} {{index}}
</li> </ul>
對于json：
<li v-for="(value,index,key) in json">
{{value}} {{index}} {{key}}
</li>
v-for="(k,v) in json"
{{k}} {{v}}
v-show: 隱藏消失
v-show="false"時消失；
<input type="button" value="disappear" v-on:click="showornot=true"><br>
<div v-show="showornot">
我要出現辣！
</div>
基本事件：
v-on:click --點擊事件
事件方法放在methods里，methods與data同級；
一定要注意它所在的選擇器要對應上才可以，否則事件設置時無效的；
<input type="button" value="show" v-on:click="show()">
<br>
<input type="button" value="add" v-on:click="add()">
<br>
methods:{
show:function(){
alert(1);//輸出數據
},
add:function(){
this.arr.push("banana");//對該選擇器下的數組進行動態添加
}
}
v-on:mouseover, mouseout, mousedown, dblclick(雙擊);
簡易留言板(bootstrap + vue.js)：
bootstrap：css框架 ---只需要給元素賦class，角色；
一些樣式無需自己定義；
<link rel="stylesheet">
<script src="https://code.[jQuery](http://lib.csdn.net/base/jquery).com/jquery.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
布局：
兩個信息輸入框，添加按鈕，重置按鈕，信息展示框（框內每條記錄有三個字段和一個操作），有刪除全部按鈕；
樣式：
輸入框--class="form-control"，placehold 底部默認提示；
組合--class="form-group"；
按鈕--class="btn btn-primary"（藍色普遍按鈕），class="btn btn-danger"（紅色警示按鈕）；
表格--class="table table-bordered table-hover"（細邊框，鼠標滑過每條記錄時的加深效果）；
表格列--colspan="4" class="text-center"（合并一列）；
其他--class="text-info text-center"（字體加粗以及居中）；
模態框--role="dialog" class="modal fade bs-example-modal-sm" id="layer"（role角色就是模態框，fade由上滑下，bs-example-modal-sm型號small），模態框內層有content，content內層分header和body，header可以放置關閉x和標題，body內可以放置其他提示以及一些關鍵確認按鈕；
功能：
添加記錄，重置輸入框，刪除記錄，清除記錄；
① 添加紀錄：就是讀取輸入框內信息，對數組進行push內容
v-on:click="add()"
add:function(){this.mydata.push({name:this.username,age:this.age});}
其中username和age是這個vue的內部數據變量；
② 重置輸入框：采用v-model屬性，尤其是它的數據雙向綁定
在輸入框加載時就將username和age作為默認值；
v-on:click="reset()"
reset:function(){this.username = "";this.age = "";}
③ 刪除記錄以及清除記錄：在刪除時我們想要它能跳出一個確認提示框--采用模態框
刪除按鈕需要和模態框進行綁定；
data-toggle="modal" data-target="#layer"（layer時模態框的id）；
在刪除時需要獲得當前需被刪除的記錄索引，所以在按下刪除按鈕時就須獲得當前的索引值index（現在的index時不需要$符號的）；
v-on:click="nowIndex=index"
然后在確認提示框的確認按鈕下對記錄進行刪除/清除；（函數名不能采用delete）
v-on:click="deleteMsg(nowIndex)"
deleteMsg:function(n){if(n == -2){this.mydata = [];}elsethis.mydata.splice(n,1);}
效果：
初始：
添加記錄：
[圖片上傳中。。。（2）]
確認提示框：
刪除第一條記錄：
清除所有記錄：
完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言板</title>
<link rel="stylesheet">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
window.onload = function(){
new Vue({
el:"#box",
data:{
mydata:[
{name:'Tom', age:'13'},
{name:'Amy', age:'19'},
{name:'Tony', age:'54'}
],
username:'',
age:'',
nowIndex:-100
},
methods:{
add:function(){
this.mydata.push({
name:this.username,
age:this.age
});
},
reset:function(){
this.username = "";
this.age = "";
},
deleteMsg:function(n){
if(n == -2){
this.mydata = [];
}
else
this.mydata.splice(n,1);
}
}
});
}
</script>
</head>
<body>
<div class="container" id="box">
<form role="form">
<div class="form-group">
<label for="username">username</label>
<input type="text" id="username" class="form-control" placeholder="enter username" v-model="username">
</div>
<div class="form-group">
<label for="age">age</label>
<input type="text" id="age" class="form-control" placeholder="enter age" v-model="age">
</div>
<div class="form-group">
<input type="button" id="add" value="add" class="btn btn-primary" v-on:click="add()">
<input type="button" id="submit" value="reset" class="btn btn-danger" v-on:click="reset()">
</div>
</form>
<hr>
<table class="table table-bordered table-hover">
<caption class="h3 text-info text-center">Message</caption>
<!-- text-info 加粗 -->
<tr class="text-info text-center">
<th class="text-center">NO</th>
<th class="text-center">name</th>
<th class="text-center">age</th>
<th class="text-center">operate</th>
</tr>
<tr class="text-center" v-for="(item,index) in mydata">
<td>{{index}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>
<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=index">delete</button>
</td>
</tr>
<!-- 合并四個單元格 -->
<tr v-show="mydata.length != 0">
<td colspan="4" class="text-center">
<button class="btn btn-danger" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=-2">delete all</button>
</td>
</tr>
<tr v-show="mydata.length == 0">
<td colspan="4" class="text-center text-info text-muted">
<p>暫無數據...</p>
</td>
</tr>
</table>
<!-- 模態框 彈出框 -->
<div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
<h3 class="modal-title">確認刪除嗎？</h3>
</div>
<div class="modal-body text-right">
<button class="btn btn-primary btn-sm" data-dismiss="modal">取消</button>
<button class="btn btn-danger btn-sm" data-dismiss="modal" v-on:click="deleteMsg(nowIndex)">確認</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
簡約版留言板：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>practice01</title>
<link rel="stylesheet">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- my data source -->
<script>
window.onload = function(){
new Vue({
el:"#box",
data:{
myMsg:[
],
username:'',
msg:'',
nowIndex:-100
},
methods:{
add:function(){
this.myMsg.push({
name:this.username,
msg:this.msg
});
}
}
});
}
</script>
</head>
<body>
<div id="box">
<!-- {{msg}} -->
<form class="form">
<div class="form-group">
<label>username</label>
<input type="text" name="username" placeholder="username" class="form-control" v-model="username">
</div>
<div class="form-group">
<label>Message</label>
<textarea type="text" name="msg" placeholder="message" class="form-control" v-model="msg"></textarea>
</div>
<div class="form-group">
<input type="button" value="add" class="btn btn-primary float-right" v-on:click="add()">
</div>
</form>
<p v-show="myMsg.length==0" class="text-center">暫無留言</p>
<div class="form-group" v-for="(item,index) in myMsg">
<label>{{item.name}}</label>
<div class="text-center">{{item.msg}}</div>
<hr>
</div>
</div>
</body>
</html>
