1、創建Vue實例

---

title: 1、創建Vue實例
date: 2017-07-25 09:10:40
tags: vue筆記(妙味)

---

一個最簡單的Vue的例子

Vue的核心是：允許採用簡潔的模板語法、聲明式的將數據渲染進DOM(與聲明式相對應的是命令式)。

首先要創建一個模板，這是html模板(最簡單的一種模板)

<div id="app">
    <p v-on:click="clickHandle">{{ message }}</p>
</div>

下面是創建Vue的實例，參數是一個選項對象，可以包含數據、模板、掛載元素、方法、聲明週期鉤子等選項。

var app = new Vue({
    el: '#app',     // 掛載元素
    data: {        // 代理數據,這裏所有數據都具有響應的功能，新添加的就沒有響應功能。
    message: 'Hello Vue'
    },
    methods: {      // 定義方法，用於執行函數，key:fun的格式
    // 可以把事件處理函數都放在這裏
    clickHandle: function(){
        alert('click')
    }
    }
})

這樣就渲染生成了一個簡單的Vue應用，現在數據和DOM已經被綁定到了一起，所有元素都是響應式的。

數據是可以動態的修改的，修改之後頁面中的顯示也會隨之渲染。

app.message = '123'

這樣頁面中的Hello Vue就會變爲123。這是利用的Object.delinedProperty中的getter和setter代理數據，監控對數據的操作。

Vue渲染DOM樹的過程

1. 讀取html模板

2. 用Vue中的渲染函數，根據html模板的元素生成標籤的節點、屬性、子節點

3. 根據渲染函數生成一個虛擬的DOM樹對象。

4. 將虛擬的DOM樹編譯爲html中的DOM結構，在整個html的DOM結構中，只會改變虛擬DOM樹對應的部分，DOM樹的其他部分不受影響，但是如果是通過原生js修改的話，會導致整個DOM樹重新加載。