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>

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

相關文章
相關標籤/搜索