vue.js簡介和生命週期

本文詳情:http://www.zymseo.com/vue/
一、Vue.js框架是什麼，爲何學習它？
世界上最好的MVVM框架：

MVVM能夠拆分紅：View --- ViewModel --- Model三部分

中間的監控着負責監控兩側的數據，相對應的實現數據互通，不須要手動的去操做DOM.
Vue.js的兩大核心：數據驅動和組件化

2.最簡單的數據雙向綁定

<div id="app">
        <input type="text" v-model="name" />
        {{name}}
 </div>
<script type="text/javascript">
    var app = new Vue({
        el : '#app',
        data : {
            name : '趙一鳴VueJs學習筆記'
        }
    });

3.VueJs的watch屬性監測數據變化

watch是一個json，每個json的鍵名就是監測的data中的數據，鍵值是一個function，第一個參數是新數據，第二個參數是舊數據。

4.VueJs實例的生命週期

一.beforeCreate
此階段爲實例初始化，此時的數據觀察個時間配置都沒準備好，實例中的data和el仍是undefined

2、created
beforeCreate以後緊接着的鉤子韓式就是created,此時咱們能夠讀取到data的值，可是DOM尚未生成，多以el屬性還不存在，$data爲一個object對象，而$el的值爲underfined

3、beforeMount
此階段即將掛載，DOM生成，$el成功獲取關聯到節點，可是{{name}}尚未成功的被渲染出來達成咱們data裏面的數據

4、mounted
mounted也就是掛載完畢階段，此時數據會被成功的渲染出來，咱們編寫這個鉤子，{{name}}被成功的渲染出來。

5、beforeUpdate
當修改vue實例的data時，vue就會自動幫咱們更新渲染視圖，在這個過程當中，vue提供beforeUpdata的鉤子函數，在檢測咱們要修改數據的時候，更新渲染視圖以前就會觸發鉤子函數beforeUpdate。
此時咱們 即將更新 data裏面的數據，可是並未更新成功

6、updated
此時 咱們data的數據已經更新完畢

7、beforeDestroy
調用$destriy()方法能夠銷燬當前組件，在銷燬前，會觸發beforeDestroy鉤子

8、destroyed

銷燬以前，修改name的值，能夠成功修改視圖顯示，一旦調用實例$destroy()方法以後，實例與視圖的關係解綁，在修改name的值，視圖也不會在更新了，說明實例已經被銷燬了。