vue實現簡易留言板（todolist）

vue.js入門demo，希望能夠給初學者一點幫助！

爲了美觀考慮，代碼嘗試使用了bootstrap佈局，適合移動端演示。

一、首先創建目錄，結構一目瞭然。

二、佈局頁面樣式，簡單佈局，貼出效果，圖省事，直接bootstrap

三、接下來便是主要邏輯代碼了，vue的簡單實用，不囉嗦，直接源碼！

<script>
	window.onload = function(){
		new Vue({
			el: ".container",
			data: {
				username:'',
				age:'',
				nowIndex: -100,
				myData: [
					
				]
			},
			methods: {
				add: function(){
					this.myData.push({
						name: this.username,
						age: this.age
					});

					this.username = '';
					this.age = '';
				},
				deleteMsg: function(n){
					if(n==-1){
						this.myData = [];
					}else{
						this.myData.splice(n,1);
					}
				}
			}
		})
	}
</script>

四、最後添加了一個彈出的模態框

<!-- 模態框 彈出框 -->
<div role="dialog" class="modal fade" id="layer">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span>×</span>
				</button>
				<h4 class="modal-title">確認刪除嗎？</h4>
			</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>

效果如下：

本實例爲vue.js入門demo，僅供大家學習參考。

源碼地址：http://git.oschina.net/Mrzhangy/todolist