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

一個最簡單的Vue的例子

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

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

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

下面是創(chuàng)建Vue的實例，參數(shù)是一個選項對象，可以包含數(shù)據(jù)、模板、掛載元素、方法、聲明周期鉤子等選項。

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

這樣就渲染生成了一個簡單的Vue應用，現(xiàn)在數(shù)據(jù)和DOM已經(jīng)被綁定到了一起，所有元素都是響應式的。

數(shù)據(jù)是可以動態(tài)的修改的，修改之后頁面中的顯示也會隨之渲染。

app.message = '123'

這樣頁面中的Hello Vue就會變?yōu)?23。這是利用的Object.delinedProperty中的getter和setter代理數(shù)據(jù)，監(jiān)控對數(shù)據(jù)的操作。

Vue渲染DOM樹的過程

1. 讀取html模板

2. 用Vue中的渲染函數(shù)，根據(jù)html模板的元素生成標簽的節(jié)點、屬性、子節(jié)點

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

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