目錄
1、Vue 實例
const vm = new Vue( options )；這句話表示創建一個 Vue 的實例 vm，類似 jQuery 的封裝思想，vm 對象內封裝了對視圖的所有操作，比如：數據的讀寫、事件的綁定、Dom 更新等（但是沒有 Ajax，因爲 Vue 主要是視圖層的操作，不涵蓋網絡層）。
如圖所示，vm 對象中封裝了圖中的藍色區域對象，該對象的所有操作都可以通過 vm 實例的 API 來操作。vm 的構造函數是 Vue，按照 ES6 的說法，vm 所屬的類是 Vue，options 是 new Vue 的參數，一般稱之爲 選項 或 構造選項。
2、構造選項 options
options 是創建 vue 實例時的參數，具體可以查看 選項官方文檔，options 內含 五大類 屬性：
- 數據：data、props、propsData、computed、methods、watch
- DOM：el、template、render、renderError
- 生命週期鉤子：beforeCreate/created、beforeMount/mounted、beforeUpdate/updated、activated/deactivated、beforeDestroy/destroyed、errorCaptured
- 資源：directives、filters、components
- 組合：parent、mixins、extends、provide、inject
紅色代表基礎重要屬性，黃色代表高級重要屬性，紫色代表特殊的重要屬性，其餘的到官網做一些瞭解即可。
3、options 基礎重要屬性
import Demo1 from './demo.vue' //第一種使用組件的方式 - .vue，文件名最好小寫，組件名最好大寫
Vue.component('Demo2',{ //第二種使用組件的方式 - Vue.component，可接收的參數和vue實例的一樣，data、methods等
template: `<div>demo2</div>`
})
new Vue({
el:'#app', //掛載點，等價於$mount('#app')
data:{ //或是函數的形式：data:function(){ return {num:0} }
num: 0
},
methods:{}, //內定義事件處理函數 or 普通函數
components:{ Demo1: Demo1 }, //引用外部組件.vue 文件，內部的組件不用引入。改屬性支持直接寫組件內容template等屬性
template: `<div> <Demo1/> <Demo2/> </div>`, //使用組件佔位符引用組件
props:['message','fun'] //外部屬性/方法，傳入後可在當前vue實例/組件內使用：(this.)message，@click="fun"
})
- el 屬性 - 掛載點：頁面渲染會以 el 屬性上的元素作爲掛載點進行內容替換，與 $mount 有替換關係，二者選其一。
- 補充：new Vue({ el：'#app' }) 等價於 new Vue({}).$mount('#app')、掛在基本上和 append() 概念差不多。
- data 屬性 - 內部數據：內部數據支持對象和函數，優先用函數。data：{ num：0 } 或者 data：function(){return { num：0 }}
- 解釋：vue 官方文檔說明，如果是在 .vue 文件中的 data 只能使用函數。vue 組件其實是一個對象，它會被作爲參數傳遞給 h 函數，相當於 new Vue( 組件對象 )，渲染一次不會有任何問題，但是如果組件複用，需要渲染兩次或多次，則多次 new Vue( 組件對象 ) 的組件對象中的 data 是同一個對象，這樣就會導致一個 data 數據同時被兩個組件使用，如果其中一個組件將 data 改變了，則另一個組件中的 data 必然收到影響。
- 使用 data 函數是爲了組件的複用，new Vue(組件對象) 操作時，如果發現 data 是函數，則會先執行類似這樣的操作：組件對象._data = 組件對象.data()；使得每份組件都可以有一份 data 的拷貝，防止不同組件修改數據時被相互覆蓋，如果 data 是對象話，對象會在這個組件的所有實例中共享，這樣導致數據被多個組件使用，會相互影響。
- methods 屬性 - 方法：內部定義事件處理函數或者是普通函數。
- 說明：頁面每次變化都會執行寫在 template 或 html 中的 {{ function() }}（ function 定義在 methods 屬性中）。
- components 屬性 - 組件：使用 Vue 組件，注意大小寫
- 組件可以是兩種形式，一種是外部引入 .vue 文件，需要引入，在 components 屬性中註冊，並在模板中填寫佔位符。第二種可以是通過 Vue.component 直接聲明，不需要在 components 屬性中註冊即可使用。組件名最好大寫！
- 四個鉤子 - 生命週期：可以通過 debugger 的方式檢測。具體可參看這篇博客：➡ Vue 實例的生命週期圖解
- created()：表示實例出現在內存中，但是沒有被渲染到頁面中。
- mounted()：實例已經被渲染到頁面中。
- updated()：實例更新了，比如點擊按鈕，頁面數字 + 1 操作，可以拿到更新後的數據。
- destroyed()：實例消亡了，從頁面中消失了。可結合 v-if 控制當前模塊在頁面中是否顯示，消失就觸發 destoryed()。
- props 屬性- 外部屬性：
- 在組件佔位符上以賦值的形式向子組件傳值，如：<Demo message = 'hello'/>，如果需要給子組件傳遞當前組件的變量的話，則需要：<Demo v-bind:message = 'this.data'/>，其中 v-bind 可以省略，只留下 ：，如果加上 v-bind：則引號 "" 內的都以 JavaScript 的代碼進行處理。
- 基於上述理論，如下兩種形式是相同的：<Demo :message=" '0' "> or <Demo message="0">，都是傳遞字符串 0。
- 除了傳遞屬性，還可以傳遞方法給子組件。在子組件中，props 以數組的形式接收外部傳遞進來的屬性/方法，當然也可以是以對象的形式，這樣的話就可以設置 傳值類型 和 default 默認值。