Vue(一) 數據綁定和第一個Vue應用

學習 Vue.js 最有效的方法是查看官網文檔html

數據綁定和第一個Vue應用

先從一段簡單的 HTML 代碼開始，感覺 Vue.js 最核心的功能。vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="name" placeholder="你的名字">
        <h1>你好,{{ name }}</h1>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                name: ''
            }
        })
    </script>
</body>
</html>

這是一段很是簡單的代碼，可是體現了 Vue 最核心的功能：雙向綁定。在輸入框輸入的內容會實時顯示在頁面的 h1 標籤內。npm

Vue實例與數據綁定

實例與數據

經過構造函數 Vue 就能夠建立一個 Vue 的根實例，並啓動 Vue 應用：瀏覽器

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

變量 app 就表明了這個 Vue 實例。app

首先，必不可少的一個選項就是 el 。el 用於指定一個頁面已存在的 DOM 元素來掛載 Vue 實例，它能夠是 HTMLElement，也能夠是 CSS 選擇器，好比：函數

<div id="app"><div>

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

掛載成功後可使用 app.$el 來訪問該元素。學習

經過 Vue 實例的 data 選項，能夠聲明應用內須要雙向綁定的數據。this

var app = new Vue({
    el: '#app',
	data: {
        a: 2
	}
})

console.log(app.a);	// 2

除了顯示聲明數據外，也能夠指向一個已有的變量，而且他們之間默認創建了雙向綁定，當修改其中一個，另外一個也會一塊兒變化。url

var myDate = {
    a: 1
}

var app = new Vue({
    el: '#app',
    data: myDate
})

生命週期

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

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

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

created：實例建立完成後調用，此階段完成了數據的觀測等，但還沒有掛載，$el 還不可用，須要初始化處理一些數據時會比較有用。
mounted：el 掛載到實例上後調用，通常咱們的第一個業務會在這裏開始。
beforeDestory：實例銷燬以前調用，主要解綁一些使用 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>
    }
})

插值與表達式

使用雙大括號（Mustache 語法）"{{}}" 是最基本的文本插值方法，它會將咱們雙向綁定的數據實時顯示出來，例如：

<div id="app">
    <h1>{{ name }}</h1>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            name: 'Vue.js'
        }
    })
</script>

大括號裏的內容會被替換爲 Vue.js，經過任何方式修改數據 name，大括號裏的內容都會被實時替換，好比下面的示例，實時顯示當前的時間，每秒更新：

<div id="app">
    <p>時間：{{ date }}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            date: new Date()
        },
        mounted: function () {
            this.timer = setInterval(() => {
                this.date = new Date();
            }, 1000)
        },
        beforeDestory: function () {
            if(this.timer) {
                clearInterval(this.timer);
            }
        }
    })
</script>

這裏的 {{ date }} 輸出的是瀏覽器默認的時間格式，好比 2017-01-02T14:04:49.470Z，並不是格式化的時間（2017-01-02 22:04:49）,因此須要注意時區，有多種方法能夠對時間格式化，好比賦值時先使用自定義的函數處理。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="#">這是一個連接</a>'
        }
    })
</script>

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

<span v-pre>{{ 這裏的內容不會被編譯 }}</span>

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

<div id="app">
    {{ number /10 }}
    {{ isOK ? '肯定' : '取消' }}
    {{ text.split(',').reverse().join(',') }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            number: 100,
            isOK: false,
            text: '123, 456'
        }
    })
</script>

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

<!-- 這是語句，不是表達式-->
{{ var book = 'Vue.js'}}
<!-- 不能使用流控制，要使用三元運算 -->
{{ if(ok) return msg}}

過濾器

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

<div id="app">
    <p>時間：{{ date | formatDate }}</p>
</div>
<script>
    var padDate = function (value) {
        return value < 10 ? '0' + value : value;
    };
    var app = new Vue({
        el: '#app',
        data: {
            date: new Date()
        },
        methods: {
        },
        filters: {
            formatDate: function (value) {
                var date = new Date(value);
                var year = date.getFullYear();
                var month = padDate(date.getMonth() + 1);
                var day = padDate(date.getDate());
                var hour = padDate(date.getHours());
                var minutes = padDate(date.getMinutes());
                var second = padDate(date.getSeconds());
                return year + '-' + month + '-' + day + '-' + hour + '-' + minutes + '-' + second;
            }
        },
        mounted: function () {
            this.timer = setInterval(() => {
                this.date = new Date();
            }, 1000)
        },
        beforeDestory: function () {
            if(this.timer) {
                clearInterval(this.timer);	//在 Vue 實例銷燬前，清除咱們的定時器
            }
        }
    })
</script>

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

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

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

這裏的字符串 arg1 和 arg2 將分別傳給過濾器的第二個和第三個參數，由於第一個參數是數據自己。

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

指令與事件

指令是 Vue.js 模板中最經常使用的功能，它帶有前綴 v-，指令的主要職責就是當其表達式的值改變時，相應地將某些行爲應用到 DOM 上。

Vue.js 內置了不少指令，如今只需瞭解 v-bind 和 v-on 指令。

v-bind

v-bind 的基本用途是動態更新 HTML 的屬性，好比 id，class，例如：

<div id="app">
    <a v-bind:href="url">百度一下</a>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            url: 'https://www.baidu.com'
        }
    })
</script>

此時示例中的連接地址與 url 進行了綁定，當經過某種方法改變 url 時，連接就會更新。

v-on

v-on 用來綁定事件監聽器，這樣就能夠作一些交互了，例如：

<div id="app">
    <p v-if="show">這是一段文本</p>
    <button v-on:click="change">點我切換</button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
            change: function () {
                this.show = !this.show
            }
        }
    })
</script>

在 button 按鈕上，使用 v-on:click 給該元素綁定一個點擊事件，在普通的元素上，v-on 能夠監聽原生的 DOM 事件，除了 click 外，還有 dbclick，keyup，mousemove 等。表達式能夠是一個方法名，這些方法都寫在 Vue 實例的 methods 屬性內，而且都是函數的形式，函數內的 this 指向當前 Vue 實例自己，所以你可使用 this.xxx 的形式訪問或修改數據。

表達式除了方法名，也能夠直接是一個內聯語句，上例可改成：

<div id="app">
    <p v-if="show">這是一段文本</p>
    <button v-on:click="show = !show">點我切換</button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            show: true
        }
    })
</script>

語法糖

語法糖是指在不影響功能的狀況下，添加某種方法實現一樣的效果，從而方便程序開發。

Vue.js 的 v-bind 和 v-on 指令，都提供了語法糖，也能夠說是縮寫。

v-bind 能夠直接寫成一個「:」：

<a v-bind:href="url">百度一下</a>
<!-- 縮寫爲 -->
<a :href="url">百度一下</a>

v-on 能夠直接用「@」來縮寫：

<button v-on:click="change">點我切換</button>
<!-- 縮寫爲 -->
<button @:click="change">點我切換</button>

使用語法糖能夠簡化代碼的書寫。