Vue學習筆記之一 - 入門

URL：Introduction - Vue.js

注意

所演示的示例，都是在JS中將Vue實例綁定至HTML中的指定元素，而後再經過Vue實例中data內的屬性或者methods中的方法，來對所綁定元素的子元素進行操做的，而不是對指定ID元素自己進行操做。

<div id="app">
    {{ message }}
</div>

有時候代碼正常，可是Vue會報以下的錯誤，多是由於在HTML頁面中，JS腳本的載入在HTML頁面的渲染以前執行了，解決方法就是把相關的script標籤移動至body標籤內最後的部分。

[Vue warn]: Cannot find element: #element-id

聲明式渲染 - Declarative Rendering

簡單的文本渲染

在HTML的元素內寫上{{ message }}，而後在JS中爲data內的message屬性指定值，便可顯示所指定的文本，這是最基礎的顯示文本的方式。

在JS中，el用於定位HTML元素，Vue實例中的message屬性與HTML中的字段同名，其值則會被渲染在最終的HTML頁面中。

若是在控制檯中手動更改app1.message的值，則可以看到HTML頁面中顯示的文本也會即時更新。

<div id="app1">
    {{ message }}
</div>

var app1 = new Vue({
    el: '#app1',
    data: {
        message: 'Hello Vue!'
    }
})

HTML元素屬性綁定

在HTML中，經過v-bind這個指令來綁定至元素的指定屬性，如v-bind:title就會將Vue實例綁定至HTML元素的title屬性上。

帶v-前綴的指令用於對所渲染的DOM執行響應式操做。

下面的代碼實現的效果是：當鼠標懸浮至span元素所顯示的文本上時，就會顯示JS中message的值，即：

'You loaded this page on ' + new Date()

<div id="app2">
    <span v-bind:title="message">
        Hover your mouse over me for a few seconds to see my dynamically bound title!
    </span>
</div>

var app2 = new Vue({
    el: '#app2',
    data: {
        message: 'You loaded this page on ' + new Date()
    }
})

若是用下面第一行的寫法，那麼最終渲染出來的HTML源代碼則爲第二行中的樣子，而不是指望中的：將innerHTML屬性綁定至message字段便可顯示指定的文本。

<div v-bind:innerHTML="message"></div> // original code
<div innerHTML="Hello Vue"></div> // rendered content

條件判斷與循環

條件判斷

Vue不只能夠將數據綁定至屬性，還可以綁定到DOM的結構上。

經過設置Vue實例中任意屬性值爲true或者false，能夠生成或刪除該元素。

查看最終的HTML源代碼可知，Vue刪除元素並非更改其display屬性，而是直接將整個HTML元素替換爲<!---->這段字符串，這樣更安全，用戶將沒法經過查看源代碼的方式來拿到元素本來的內容。

<div id="app3">
    <p v-if="seen">Now you see me :)</p>
</div>

var app3 = new Vue({
    el: '#app3',
    data: {
        seen: true
    }
})

循環

v-for指令用於循環遍歷數組中的元素。

在下面的示例中，Vue實例的todos屬性包含三個元素，元素字段名爲text，字段值爲字符串。

而在HTML頁面中，在ol以內的li元素只需寫一個。經過v-for指令，可以根據Vue實例中對應屬性裏的元素個數，直接生成指定個li元素，其中不包含HTML原始代碼裏的那個li元素。

對於每一個生成的li元素，設置其文本爲所綁定todos屬性中所對應的text字段的值。即第一個li元素的值，爲todos屬性中第一個text字段的值，第二個li元素的值爲第二個text字段的值，以此類推。

<div id="app-4">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ol>
</div>

var app4 = new Vue({
    el: '#app-4',
    data: {
        todos: [
            { text: 'Learn JavaScript' },
            { text: 'Learn Vue' },
            { text: 'Build something awesome' }
        ]
    }
})

app4.todos.push({ text: 'You made it!'})語句會在app4這個Vue實例的todos屬性的最後再添加一個text字段。

處理用戶輸入

調用函數

v-on指令用於綁定事件監聽至指定的HTML元素上，這樣能夠調用所關聯的Vue實例中的方法。

在下面的示例中，經過Vue實例中的reverseMessage方法，來將message屬性中的文本逆序排列。

<div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">Reverse Message</button>
</div>

var app5 = new Vue({
    el: '#app-5',
    data: {
        message: 'Hello Vue!'
    },
    methods: {
        reverseMessage: function () {
            this.message = this.message.split('').reverse().join('')
        }
    }
})

雙向數據綁定

v-model實現雙向數據綁定的效果。

在下面的示例中，v-model="message"實現對message的雙向綁定。

在input控件中輸入的內容會同步更新至p元素。

可是！p元素的內容被更改以後，input控件中的內容並不會同步更新。（那應該如何理解這個雙向數據綁定呢？）

<div id="app-6">
    <p>{{ message }}</p>
    <input type="text" v-model="message">
</div>

var app6 = new Vue({
    el: '#app-6',
    data: {
        message: 'Hello Vue!'
    }
})

組件系統

在Vue中，組件 - Component，是一個很是重要的概念。

編寫大型應用時，不少地方是通用的，能夠劃分爲若干個體積小的、自包含的（啥意思？）、可重用的組件。好比以列表形式展現內容的模塊，就能夠編寫爲一個大組件，而列表中的每一個內容，又是一個小組件。

本質上，Vue中的組件就是一個帶預約義設置的Vue實例。下面的代碼示範瞭如何註冊一個Vue組件：

Vue.component('todo-item', {
    template: '<li>This is a todo</li>'
})

註冊完組件以後，在HTML中，就能夠用下面的方式建立一個組件的實例：

<ol>
    <todo-item></todo-item>
</ol>

可是以上面的方式來簡單地定義一個組件的話，若是建立多個組件的實例，生成的文本都是相同的。爲了讓各個組件有不一樣的內容，能夠經過props屬性，來將父級域的值，傳遞給子組件。

Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
})

而後就能夠經過v-bind指令，在HTML中將父元素的值傳遞給各個子組件。

下面的代碼，在HTML中遍歷Vue實例中groceryList屬性裏的每一項item，並將每一個item與todo綁定。

而在定義組件的JS代碼中，接收傳入的todo，並在li元素中顯示todo中的字符串。

// 定義Vue組件todo-item
// 組件中經過名爲todo的props屬性
// 來從父級域向子組件中傳遞數據
// 下面的代碼便是將傳遞給todo屬性的text字段渲染至'li'元素中
Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
}

// Vue實例中定義屬性數組groceryList
new Vue({
    ...
    data: {
        groceryList: [
            { text: '...' },
            { text: '...' },
            { text: '...' }
        ]
    }
})

// HTML中建立todo-item組件
// 遍歷屬性數組groceryList中的每一項item
// 並將其與todo綁定
// 如此即可將每一個todo中的數據傳至各個組件中
<todo-item v-for="item in groceryList" v-bind:todo="item">

再總結一下上面的例子：

1. 在Vue實例中定義屬性數組，數組中的元素用於在前端頁面上以有序列表形式顯示；

2. 定義Vue組件，設置好所綁定的props屬性的名稱，以及Vue實例中屬性數組元素的顯示格式；

3. 在前端HTML頁面中，寫一個組件，用v-for遍歷屬性數組，並用v-bind將實例中的數據傳遞給前臺。