Vue.js 數據綁定與示例

1、實例與數據

        Vue.js 應用的建立很簡單，經過構造函數 Vue 就能夠建立一個 Vue 的根實例，並啓動 Vue 應用：

var app = new Vue ({
    //選項
})

        變量 app 就表明了這個 Vue 實例。事實上，幾乎全部的代碼都是一個對象，寫入 Vue 實例的選項內的。首先，必不可少的一個選項就是 el 。el 用於指定一個頁面已存在的 DOM 元素來掛載 Vue 實例，它能夠是 HTMLElement ，也能夠是 CSS 選擇器，好比：

<div id="app"></div>

var app = new Vue({
    el: document.getElementById('app')      // 或者 el：'#app'
})

        掛載成功後，能夠經過 app.$el 來訪問該元素。Vue 提供了不少經常使用的實例屬性與方法，都以 $ 開頭，好比 $el 。

<div id="app">
        <input type="text" v-model="name" placeholder="請輸入你的名字">
        <h1>Vue.js 最核心功能：數據的雙向綁定 —— {{ name }}</h1>
    </div>

    <script>
        var app = new Vue ({
            el: '#app',
            data: {
                name: ''
            }
        })
    </script>

        上述代碼，在 input 標籤上，有一個 v-model 的指令，它的值對應於建立的 Vue 實例的 data 選項中的 name 字段，這就是 Vue 的數據綁定。經過 Vue 實例的 data 選項，能夠聲明應用內須要雙向綁定的數據。建議全部會用到的數據都預先在 data 內聲明，這樣不至於將數據散落在業務邏輯中，難以維護。

        Vue 實例自己也代理了 data 對象裏的全部屬性，故能夠這樣訪問：

var app = new Vue({
        el: "#app",
        data: {
            a: 1
        }
    })

    sonsole.log(app.a);         //1

        除了顯式地聲明數據外，也能夠指向一個已有的變量，而且它們之間默認創建了雙向綁定，當修改其中任意一個時，另外一個也會一塊兒變化：

var myData = {
        a: 1
    }

    var app = new Vue({
        el: "#app",
        data: {
            a: myData
        }
    })

    sonsole.log(app.a);         // 1

    // 修改屬性，原數據也會隨之修改
    app.a = 2;
    console.log(myData.a);      // 2

    // 反之，修改原數據，Vue 屬性也會修改
    myData.a = 3;
    console.log(app.a);         // 3

2、生命週期

        每一個 Vue 實例建立時，都會經歷一系列的初始化過程，同時也會調用相應的生命週期鉤子，咱們能夠利用這些鉤子，在合適的時機執行咱們的業務邏輯。若是你使用過 jQuery ,必定知道它的 ready() 方法，好比：

$(document).ready(function() {
        // DOM 加載完後，會執行這裏的代碼
    });

        Vue 的生命週期鉤子與之相似，比較經常使用的有：

• created : 實例建立完成後調用，此階段完成了數據的觀測等，但還沒有掛載，$el 還不可用。須要初始化處理一些數據時會比較有用。
• mounted  : el 掛載到實例上後調用，通常咱們的第一個業務邏輯會在這裏開始。
• beforeDestroy : 實例銷燬以前調用。主要解綁一些使用 addEventListener 監聽的事件等。

        這些鉤子與 el 和 data 相似，也是做爲選項寫入 Vue 實例內，而且鉤子的 this 指向的是調用它的 Vue 實例：

var app - new Vue({
        el: '#app',
        data: {
            a: 2
        },
        created: function () {
            console.log(this.a);    // 2
        }
        mounted: function () {
            console.log(this.$el);  // <div id="app"></div>
        }
    })

 

3、插值與表達式

        使用雙大括號（ Mustache 語法 ）「 {{ }} 」 是最基本的文本插值方法，它會自動將咱們雙向綁定的數據實時顯示出來，例如實時顯示當前時間，每秒更新：

<script>
        var app = new Vue ({
            el: '#app',
            data: {
                date: new Date()
            },
            mounted: function () {
                var _this = this;       // 聲明一個變量指向 Vue 實例 this, 保證做用域一致
                this.timer = setInterval(function() {
                    _this.date = new Date();    // 修改數據 date
                }, 1000);                       // 1秒
            },
            beforeDestroy: function () {
                if (this.timer) {
                    clearInterval(this.timer);  // 在 Vue 實例銷燬前，清除咱們的定時器
                }
            }
        })
    </script>

        雙大括號裏的內容會被替換爲 data 選項中 date 的值，經過任何方法修改數據 data 選項中 date 的值，雙大括號的內容都會被實時替換。這裏的 {{ date }} 輸出的是瀏覽器默認的時間格式，並不是格式化的時間（ 2018-10-07 10:05:59 ），因此須要注意時區。有多種方法能夠對時間格式化，好比賦值前先使用自定義的函數處理。固然，Vue 的過濾器 （ filter ）或計算屬性 （ computed ）也能夠實現。

        若是有時候就是想輸出 HTML，而不是將數據解釋後的純文本，可使用 v-html：

<div id="app">
        <span v-html="link"></span>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                link: '<a href="https://www.baidu.com/">百度</a>'
            }
        })
    </script>

        link 的內容將會被渲染爲一個具備點擊功能的 a 標籤，而不是純文本。可是要注意，若是將用戶產生的內容使用 v-html 輸出後，有可能致使 XSS 攻擊（跨站腳本攻擊），因此要在服務端對用戶提交的內容進行處理，通常可將尖括號 「<>」 轉義。

        若是想顯示 {{ }}標籤，而不進行替換，使用 v-pre 便可跳過這個元素和它的子元素的編譯過程，例如：

<span v-pre>{{ 這裏會顯示雙花括號，內容不會被編譯 }}</span>

        在 {{ }} 中，除了簡單的綁定屬性值外，還可使用 JavaScript 表達式進行簡單的運算、三元運算等，例如：

<div id="app">
        {{ num / 100 }}
        {{ areYouOK ? '肯定' : '取消' }}
        {{ text.split(',').reverse().join(',') }}
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                num: 100,
                areYouOK：false,
                text: '123,456'

            }
        })
    </script>

        顯示結果依次爲：一、取消、456,123 。

        Vue.js 只支持單個表達式，不支持語句和流控制。另外，在表達式中，不能使用用戶自定義的全局變量，只能使用 Vue 白名單內的全局變量，例如 Math 和 Date 。如下是一些無效的示例：

<!-- 這是語句，不是表達式 -->
    {{ var text = '123,456' }}
    <!-- 不能使用流控制，要使用三目運算 -->
    {{ if (areYouOK) return msg }}

 

4、過濾器

        Vue.js 支持在 {{ }}  插值的尾部添加一個管道符「 （ | ） 」 對數據進行過濾，常常用於格式化文本，好比字母所有大寫、貨幣千位使用逗號分隔等。過濾的規則是自定義的，經過給 Vue 實例添加選項 filters 來設置，例如能夠對時間進行格式化處理，實時顯示當前時間：

<div id="app">
        {{ date | formatDate }}
    </div>

    <script>
        
        // 在月份、日期、小時等小於 10 時前面補 0
        var padDate = function(value) {
            return value < 10 ? '0' + value : value;
        };

        var app = new Vue({
            el: "#app",
            data: {
                date: new Date()
            },
            filters: {
                formatDate: function (value) {      // 這裏的 value 就是須要過濾的數據
                    var date = new Date(value);
                    var yaer = date.getFullYear();
                    var month = padDate(date.getMonth() + 1);
                    var day = padDate(date.getDate());
                    var hours = padDate(date.getHours());
                    var minutes = padDate(date.getMinutes());
                    var seconds = padDate(date.getSeconds());
                    // 整理返回格式化後的日期
                    return yaer + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
                }
            },
            mounted: function () {
                var _this = this;   // 聲明一個變量指向 Vue 實例 this , 保證做用域一致
                this.timer = setInterval({
                    _this.date = new Date();       // 修改數據 date
                }, 1000);
            },
            beforeDestroy: function() {
                if (this.timer) {
                    clearInterval(this.timer);     // 在 Vue 實例銷燬前，清除咱們的定時器
                }
            }
        })

    </script>

        過濾器也能夠串聯，並且能夠接收參數，例如：

<!-- 串聯 -->
    {{ message | filterA | filterB }}

    <!-- 接收參數 -->
    {{ message | filterA('arg1', 'arg2') }}

        過濾器應當用於處理簡單的文本轉換，若是要實現更爲複雜的數據變換，應該使用計算屬性。