vue第一天

最近看了看vue，寫寫心得筆記。
vue的雛形 todolist形式

爲了讓表現形式好看一點，此次選用bootstrap：
一、引入bootstrap.min.css主要是讓頁面樣式好看，直接調用bootstrap裏面封裝好的類
二、引入bootstrap依賴jq類庫，因此須要引入jquery-1.11.0.min.js。
三、bootstrap.js主要是調用封裝好的模態框還有彈窗等組件
四、最後引入這個mvvm框架－vue.js

<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/vue.js"></script>

在寫以前先介紹一下bootstrap經常使用的類：

－－－－－－－－－－－－－－－－－－－用到的樣式－－－－－－－－－－－－－－－－－－－－－

container：兩邊留白非全屏，固定寬度並支持響應式佈局的容器
form-group:把表單和標籤放在一個類釐米獲取最佳間距
form-control:向全部的文本元素 <input>、<textarea> 和 <select> 添加這個類
table-bordered: 爲全部表格的單元格添加邊框
table: 爲任意 <table> 添加基本樣式 (只有橫向分隔線)
table-hover: 在 <tbody> 內的任一行啓用鼠標懸停狀態
text-center:居中對齊文本
btn: 爲按鈕添加基本樣式
btn-primary: 原始按鈕樣式（未被操做）
btn-sm:製做一個小按鈕

－－－－－－－－－－－－－－－－－－－用到的組件－－－－－－－－－－－－－－－－－－－－－

modal：黑色遮罩
fade：動畫形式
modal-dialog：這個是對話框，對話框裏面放內容
modal-content：這個是對話框內容通常有三塊：modal-header、modal-body、modal-footer
modal-header
close：點擊關閉按鈕 data-dismiss="modal">   關閉按鈕符號`×`
data-toggle="modal" data-target="#layer" 開關

－－－－－－－－－－－－－－－－－－vue用到的指令－－－－－－－－－－－－－－－－－－－－

v-model="usename" 雙向綁定
v-for="item in myData" 遍歷數組
v-on:click="add()" 點擊事件
v-show="myData.length==0" 判斷數組長度等於0顯示的條件
數組添加：

this.myData.push({
                    name: this.usename,
                    age: this.useage
                 })

數組中刪除：

this.myData.splice(n, 1);

建立一個 Vue 實例或 "ViewModel"，它鏈接 View 與 Model

new Vue({
            el: '#app',//說白了是做用範圍
            data: exampleData//結構中用到的參數
            methods: {//這裏面寫方法
                    add: function () {｝
                    ｝
        })

分析：

經過bootstrap把結構搭建完了，創建一個空數組mydata，在呈現的結構中循環遍歷v-for="item in myData"；呈現數據用{{item}}
經過v-show="mydata.length==0"判斷數據爲空時候顯示隱藏；
在輸入框中經過v-model進行數據雙向綁定；
經過v-on:click＝「add()」綁定添加方法，將數據push到mydata裏面，同理刪除mydata數據用splice；
刪除當前是經過下標$index 例如：v-on:click="noIndex=$index"

<div class="container" id="box">
    <form role=form>
        <div class="form-group">
            <label for="username">用戶名：</label>
            <input type="text" placeholder="請輸入用戶名" id="usename" class="form-control" v-model="usename">
        </div>
        <div class="form-group">
            <label for="username">年齡：</label>
            <input type="text" placeholder="請輸入年齡" id="useage" class="form-control" v-model="useage">
        </div>
        <div class="form-group">
            <input class="btn btn-primary" type="button" value="添加" v-on:click="add()"/>
            <input class="btn btn-danger" value="重置" type="reset">
        </div>
    </form>
    <table class="table-bordered table table-hover text-center">
        <caption>用戶信息表</caption>
        <tr>
            <th class="text-center">序號</th>
            <th class="text-center">用戶名</th>
            <th class="text-center">年齡</th>
            <th class="text-center">操做</th>
        </tr>
        <tr v-for="item in myData">
            <td>{{$index+1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>
                <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer"
                        v-on:click="noIndex=$index">刪除
                </button>
            </td>
        </tr>
        <tr class="text-right" v-show="myData.length!=0">
            <td colspan="4">
                <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" v-on:click="noIndex=-2">
                    所有刪除
                </button>
            </td>
        </tr>
        <tr v-show="myData.length==0">
            <td colspan="4"><p class="h5 text-info">暫無消息...</p></td>
        </tr>
    </table>
    <!--彈出框-->
    <div role="dialog" class="modal fade" id="layer">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="close" data-dismiss="modal"><span>&times;</span></div>
                    <div class="modal-title">確認要刪除麼？</div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer"
                            v-on:click="del(noIndex)">確認
                    </button>
                    <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer">刪除</button>
                </div>
            </div>
        </div>
    </div>
</div>

開始寫vue:

<script>
        window.onload = function () {
            var vm = new Vue({
                el: "#box",
                data: {
                    myData: [],
                    usename: '',
                    useage: '',
                    noIndex: -100
                },
                methods: {
                    add: function () {
                        this.myData.push({
                            name: this.usename,
                            age: this.useage
                        })
                        this.usename = '';
                        this.useage = '';
                    },
                    del: function (n) {
                        if (n == -2) {
                            this.myData = [];
                        } else {
                            this.myData.splice(n, 1);
                        }

                    }
                }
            })
        }
    </script>