一，VUE的核心
1.數據驅動（mvvm模型，只要改變model的數據，視圖層就會自動更新）
Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統：
//HTML中 <div id="app"> {{ message }} </div> //JavaScript中 var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
注：Object.freeze()，這會阻止修改現有的 property，也意味着響應系統無法再追蹤變化。
2.視圖組件： 把整一個網頁的拆分成一個個區塊，每個區塊我們可以看作成一個組件。網頁由多個組件拼接或者嵌套組成。
組件系統是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通常可復用的組件構建大型應用。仔細想想，幾乎任意類型的應用界面都可以抽象為一個組件樹：
Vue實例中可以通過以下對象對頁面進行相應的設置
var vm = new Vue({
el: '#app', // 控制區域
data: { }, // 定義數據
methods: { }, // 定義事件方法
filters: { }, // 定義私有的過濾器
directives: { }, // 定義私有的指令
components: { }, // 定義實例內部私有的組件
watch:{ }, // 偵聽器，監聽值的變化，然后執行相對應的函數（或者步驟）
computed：{ } //計算屬性，只有數據變化了才進行計算
//以下是Vue生命周期函數
beforeCreate(){ }, // 實例剛在內存中被創建出來，還沒初始化好 data 和 methods 屬性之前調用此函數
created(){ }, // 實例已經在內存中創建完成，此時 data 和 methods 屬性初始化完成，頁面（HTML）加載完成之前（未開始編譯模板）調用此函數。執行順序：父組件 -> 子組件
beforeMount(){ }, // 此時已經完成了模板的編譯，但是還沒有掛載到頁面中，在掛載開始之前調用此函數
mounted(){ }, // 此時已經將編譯好的模板，掛載到了頁面指定的容器中顯示。頁面（HTML）加載完成之后調用此函數。執行順序：子組件 -> 父組件
beforeUpdate(){ }, // 狀態更新之前調用此函數，此時 data 中的狀態值是最新的，但是界面上顯示的數據還是舊的，因為此時還沒有開始重新渲染 DOM 節點
updated(){ }, // 狀態更新完成之后調用此函數，此時 data 中的狀態值和界面上顯示的數據，都已經完成了更新，界面已經被重新渲染好了
beforeDestroy() { }, // 實例銷毀之前調用此函數。在這一步，實例仍然完全可用
destroyed(){ }, // 實例銷毀后調用此函數。該鈎子被調用后，對應 Vue 實例的所有指令都被解綁，所有的事件監聽器被移除，所有的子實例也都被銷毀
})
在 API 參考中查閱到完整的實例 property 和方法的列表
實例屬性 el:
數據屬性 data:
方法屬性 methods:
組件屬性 components:
過濾器屬性 filters：
指令屬性 directives :
生命周期屬性：
站在巨人的肩膀上看世界會比較容易，我也在不斷的進步學習，在網上參考了以下圖文進行匯總、整理，感謝這些優秀的博主及小伙伴。我會不斷地進行更新和優化，使學習更系統、更快捷、更易理解、更易用。
參考文章：