我的最新博客在：Secret_wu's coding note
目標：快速上手Vue框架（2.x版本）
方法：通過看Vue的官方手冊（Vue官方網站）
內容：本博客記錄一些學習Vue官方文檔中的心得，便於日后啟發。（基礎篇）
再次學習vue的心得記錄：（這是偏大致閱讀了官方文檔后，再次仔細學習Vue的心得記錄）
注：遇到一些不懂的函數等，可以看官網的API參考。
正文：
一、介紹
1、Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。最基本核心功能有：聲明式渲染，條件與循環，處理用戶輸入，組件化應用構建。
2、聲明式渲染。Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統。指令帶有前綴v-，以表示它們是 Vue 提供的特殊特性。
3、條件與循環。條件：v-if，v-else-if，v-else，v-show。用於控制條件選擇去渲染對應的元素。注意只有被選中了的部分才會渲染在網頁上（網頁代碼只顯示了符合條件的元素），而v-show總是會渲染到頁面，只是通過css的display屬性控制顯示與否。循環：v-for。
4、處理用戶輸入。包括表單處理。v-on指令添加一個事件監聽器，通過它調用在 Vue 實例中定義的方法。Vue 還提供了v-model指令，它能輕松實現表單輸入和應用狀態之間的雙向綁定。
5、組件化應用構建。組件系統是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通常可復用的組件構建大型應用，以使開發更易管理。在 Vue 里，一個組件本質上是一個擁有預定義選項的一個 Vue 實例。Vue.component（名稱，對象）
二、Vue實例
1、創建Vue實例。一個 Vue 應用由一個通過new Vue 創建的根 Vue 實例，以及可選的嵌套的、可復用的組件樹組成。所有的 Vue 組件都是 Vue 實例，並且接受相同的選項對象 (一些根實例特有的選項除外)。
2、數據與方法。當一個Vue實例被創建時，它將data對象中的所有的屬性加入到Vue的響應系統中。只有當實例被創建時就已經存在於data中的屬性才是響應式的。除了數據屬性，Vue 實例還暴露了一些有用的實例屬性與方法。它們都有前綴$，以便與用戶定義的屬性區分開來。
3、實例生命周期鈎子。每個 Vue 實例在被創建時都要經過一系列的初始化過程——例如，需要設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等（tips:掛載（mounting）是指由操作系統使一個存儲設備（諸如硬盤、CD-ROM或共享資源）上的計算機文件和目錄可供用戶通過計算機的文件系統訪問的一個過程）。注意：不要在選項屬性或回調上使用箭頭函數，因為它沒this，會導致一些指向其他作用域而導致異常（原來的this指向Vue實例）。同時在這個過程中也會運行一些叫做生命周期鈎子的函數，這給了用戶在不同階段添加自己的代碼的機會。生命周期具體可以看官方的生命周期圖示。
三、模板語法
Vue.js 使用了基於 HTML 的模板語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規范的瀏覽器和 HTML 解析器解析。在底層的實現上，Vue 將模板編譯成虛擬 DOM 渲染函數（tips:虛擬DOM可以看作是一個使用javascript模擬了DOM結構的樹形結構，這個樹結構包含整個DOM結構的信息;我們要盡量減少對DOM的操作，這是優化前端性能的必要手段，虛擬DOM就是將DOM的對比放在了js層，通過對比不同之處來選擇新渲染DOM節點，從而提高渲染效率）。結合響應系統，Vue 能夠智能地計算出最少需要重新渲染多少組件，並把 DOM 操作次數減到最少。注意：如果在某些場景無法使用模板來創建我們的HTML，可以用JS寫渲染函數或者是JSX（其是JS的擴展，運用於React架構中，其格式比較像是模版語言）。
1、插值
1.1 文本：數據綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值。通過使用 v-once 指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新。
1.2 原始HTML：雙大括號會將數據解釋為普通文本，而非 HTML 代碼。為了輸出真正的 HTML，需要使用v-html指令。注意：站點上動態渲染的任意 HTML 可能會非常危險，因為它很容易導致 XSS 攻擊（Cross Site Scripting，攻擊全稱跨站腳本攻擊）。請只對可信內容使用 HTML 插值，絕不要對用戶提供的內容使用插值。
1.3 特性：Mustache 語法不能作用在 HTML 特性上，遇到這種情況應該使用 v-bind 指令。
1.4 JavaScript表達式：表達式會在所屬 Vue 實例的數據作用域下作為 JavaScript 被解析。有個限制就是，每個綁定都只能包含單個表達式，不能是語句和流控制（用三元表達式替代）。模板表達式都被放在沙盒中，只能訪問全局變量的一個白名單，如Math和Date ，不應該在模板表達式中試圖訪問用戶定義的全局變量。（tips: 沙箱就是js中一塊完全獨立的區域,使用的都是自己獨立的屬性和方法）
2、指令
指令 (Directives) 是帶有v- 前綴的特殊特性。指令特性的值預期是單個 JavaScript 表達式 (v-for是例外情況)。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用於 DOM。
2.1 參數：一些指令能夠接收一個“參數”，在指令名稱之后以冒號表示（注意不要留空格），例如v-bind指令可以用於響應式地更新 HTML 特，,v-on指令用於監聽 DOM 事件。
2.2 動態參數：從 版本2.6.0 開始，可以用方括號括起來的 JavaScript 表達式作為一個指令的參數，其會被作為一個 JavaScript 表達式進行動態求值，求得的值將會作為最終的參數來使用。注意：參數表達式的寫法存在一些約束（動態參數預期會求出一個字符串，異常情況下值為null。這個特殊的null 值可以被顯性地用於移除綁定。任何其它非字符串類型的值都將會觸發一個警告），如對動態參數的值的約束和對動態參數的表達式的約束（動態參數表達式有一些語法約束，因為某些字符，如空格和引號，放在 HTML attribute 名里是無效的；在 DOM 中使用模板時 (直接在一個 HTML 文件里撰寫模板)，還需要避免使用大寫字符來命名鍵名，因為瀏覽器會把 attribute 名全部強制轉為小寫）。
2.3 修飾符：修飾符 (modifier) 是以半角句號 . 指明的特殊后綴，用於指出一個指令應該以特殊方式綁定。
3、縮寫
v-前綴作為一種視覺提示，用來識別模板中 Vue 特定的特性。當在使用 Vue.js 為現有標簽添加動態行為 (dynamic behavior) 時，v-前綴很有幫助，然而，對於一些頻繁用到的指令來說，就會感到使用繁瑣。同時，在構建由 Vue 管理所有模板的單頁面應用程序 (SPA - single page application) 時，v-前綴也變得沒那么重要了。因此，Vue 為 v-bind：屬性 和v-on:屬性 這兩個最常用的指令，提供了特定簡寫分別為，：屬性和@屬性。
四、計算屬性和偵聽器
1、計算屬性
模板內的表達式非常便利，但是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。所以，對於任何復雜邏輯，都應當使用計算屬性。
1.1 例子：先聲明了一個計算屬性xx。然后在Vue實例定義中（computed:下面）提供的函數將用作屬性xx的 getter 函數，從而實現一些復雜的邏輯，如某些依賴關系。當然，我們可以像綁定普通屬性一樣在模板中綁定計算屬性。
1.2 計算屬性緩存 vs 方法：我們可以通過定義Vue實例中方法（methods:下面）來實現上述例子的方法。然而，不同的是計算屬性是基於它們的響應式依賴進行緩存的。只在相關響應式依賴發生改變時它們才會重新求值。相比之下，每當觸發重新渲染時，調用方法將總會再次執行函數。
1.3 計算屬性 vs 偵聽屬性：Vue 提供了一種更通用的方式來觀察和響應 Vue 實例上的數據變動：偵聽屬性。當有一些數據需要隨着其它數據變動而變動時，很容易濫用watch——特別是如果之前使用過 AngularJS。然而，通常更好的做法是使用計算屬性而不是命令式的watch回調。
1.4 計算屬性的setter：計算屬性默認只有 getter ，不過在需要時也可以提供一個 setter。
2、偵聽器
雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器。這就是為什么 Vue 通過watch 選項提供了一個更通用的方法，來響應數據的變化。當需要在數據變化時執行異步或開銷較大的操作時，這個方式是最有用的。除了watch選項之外，還可以使用命令式的 vm.$watch API。
五、Class與Style綁定
操作元素的 class 列表和內聯樣式是數據綁定的一個常見需求。因為它們都是屬性，所以我們可以用v-bind處理它們：只需要通過表達式計算出字符串結果即可。不過，字符串拼接麻煩且易錯。因此，在將v-bind用於class和style時，Vue.js 做了專門的增強。表達式結果的類型除了字符串之外，還可以是對象或數組。
1、綁定HTML Class
1.1 對象語法：我們可以傳給v-bind:class 一個對象，以動態地切換 class。可以在對象中傳入更多屬性來動態切換多個 class。此外，v-bind:class指令也可以與普通的 class 屬性共存。綁定的數據對象不必內聯定義在模板里，也可以在這里綁定一個返回對象的計算屬性。
1.2 數組語法：我們可以把一個數組傳給v-bind:class，以應用一個 class 列表。如果你也想根據條件切換列表中的 class，可以用三元表達式，不過，當有多個條件 class 時這樣寫有些繁瑣。所以在數組語法中也可以使用對象語法。
1.3 用在組件上：當在一個自定義組件上使用class屬性時，這些 class 將被添加到該組件的根元素上面。這個元素上已經存在的 class 不會被覆蓋。
2、綁定內聯樣式
2.1 對象語法：v-bind:style的對象語法十分直觀——看着非常像 CSS，但其實是一個 JavaScript 對象。CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號括起來) 來命名。同樣的，對象語法常常結合返回對象的計算屬性使用。
2.2 數組語法：v-bind:style的數組語法可以將多個樣式對象應用到同一個元素上。
2.3 自動添加前綴：當v-bind:style使用需要添加瀏覽器引擎前綴的 CSS 屬性時，如transform，Vue.js 會自動偵測並添加相應的前綴。（tips：Vendor prefix—瀏覽器引擎前綴，是一些放在CSS屬性前的小字符串，用來確保這種屬性只在特定的瀏覽器渲染引擎下才能識別和生效。例如 -moz- /* 火狐等使用Mozilla瀏覽器引擎的瀏覽器 */；-webkit- /* Safari, 谷歌瀏覽器等使用Webkit引擎的瀏覽器 */；-o- /* Opera瀏覽器(早期) */ -ms- /* Internet Explorer */）
2.4 多重值：從版本 2.3.0 起你可以為style 綁定中的屬性提供一個包含多個值的數組，常用於提供多個帶前綴的值，這樣寫只會渲染數組中最后一個被瀏覽器支持的值。
六、條件渲染
1、v-if
v-if指令用於條件性地渲染一塊內容。這塊內容只會在指令的表達式返回 truthy 值的時候被渲染，還可以配合v-else使用。
1.1 在<template>元素上使用v-if條件渲染分組：因為v-if是一個指令，所以必須將它添加到一個元素上。但是如果想切換多個元素呢？此時可以把一個<template> 元素當做不可見的包裹元素，並在上面使用v-if。最終的渲染結果將不包含 <template> 元素。
1.2 v-else：可以使用v-else 指令來表示v-if 的“else 塊”。注意，v-else元素必須緊跟在帶v-if或者v-else-if 的元素的后面，否則它將不會被識別。
1.3 v-else-if：顧名思義，充當v-if的“else-if 塊”，可以連續使用。類似於v-else，v-else-if也必須緊跟在帶v-if或者v-else-if 的元素的后面。
1.4 用key管理可復用的元素：Vue 會盡可能高效地渲染元素，通常會復用已有元素而不是從頭開始渲染。這么做除了使 Vue 變得非常快之外，還有其它一些好處。Vue 提供了一種方式來表達“這兩個元素是完全獨立的，不要復用它們”。只需添加一個具有唯一值的key屬性即可。
2、v-show。另一個用於根據條件展示元素的選項是v-show指令。不同的是帶有v-show 的元素始終會被渲染並保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性display。注意，v-show 不支持<template> 元素，也不支持v-else。
3、v-if vs v-show。v-if是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。v-if也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。相比之下，v-show就簡單得多——不管初始條件是什么，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。一般來說，v-if 有更高的切換開銷，而v-show有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用v-show較好；如果在運行時條件很少改變，則使用v-if較好。
4、v-if 與v-for一起使用。官網不推薦同時使用v-if 和v-for。當v-if 與v-for 一起使用時，v-for具有比v-if更高的優先級。這意味着 v-if 將分別重復運行於每個 v-for 循環中。當你只想為部分項渲染節點時，這種優先級的機制會十分有用。
七、列表渲染
1、v-for。用v-for把一個數組對應為一組元素。我們可以用v-for指令基於一個數組來渲染一個列表。v-for指令需要使用item in items形式的特殊語法，其中items 是源數據數組，而item則是被迭代的數組元素的別名。在v-for塊中，我們可以訪問所有父作用域的屬性。v-for還支持一個可選的第二個參數，即當前項的索引。也可以用of 替代in作為分隔符，因為它更接近 JavaScript 迭代器的語法。我們還可以在v-for里面使用對象，可以遍歷對象的屬性。也可以提供第二個的參數為 property 名稱 （也就是鍵名），還可以用第三個參數作為索引。注意：在遍歷對象時，會按object.keys() 的結果遍歷，但是不能保證它的結果在不同的 JavaScript 引擎下都一致。
2、維護狀態。當 Vue 正在更新使用v-for 渲染的元素列表時，它默認使用“就地更新”的策略。如果數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序，而是就地更新每個元素，並且確保它們在每個索引位置正確渲染。這個默認的模式是高效的，但是只適用於不依賴子組件狀態或臨時 DOM 狀態 (例如：表單輸入值) 的列表渲染輸出。為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一key屬性。建議盡可能在使用v-for 時提供keyattribute，除非遍歷輸出的 DOM 內容非常簡單，或者是刻意依賴默認行為以獲取性能上的提升。因為它是 Vue 識別節點的一個通用機制，key並不僅與v-for 特別關聯，還有別的用途。注意，不要使用對象或數組之類的非基本類型值作為v-for的key。請用字符串或數值類型的值。
3、數組檢測更新。變異方法（mutation method），Vue 將被偵聽的數組的變異方法進行了包裹，所以它們也將會觸發視圖更新。這些被包裹過的方法包括：push(),pop(),shift(),unshift(),splice(),sort(),reverse()。變異方法，顧名思義，會改變調用了這些方法的原始數組。相比之下，也有非變異 (non-mutating method) 方法，例如filte()、concat() 和slice() 。它們不會改變原始數組，而總是返回一個新數組。當使用非變異方法時，可以用新數組替換舊數組，你可能認為這將導致 Vue 丟棄現有 DOM 並重新渲染整個列表。幸運的是，事實並非如此。Vue 為了使得 DOM 元素得到最大范圍的重用而實現了一些智能的啟發式方法，所以用一個含有相同元素的數組去替換原來的數組是非常高效的操作。由於 JavaScript 的限制，Vue 不能檢測以下數組的變動：利用索引直接設置一個數組項時和修改數組的長度時（兩種情況都是非響應性的）。對應第一種情況，我們可以用Vue.set(vm.items, indexOfItem, newValue)/vm.$set實例方法和vm.items.splice(indexOfItem, 1, newValue)；第二種情況可以使用splice:vm.items.splice(newLength)。
4、對象變更檢測注意事項。還是由於 JavaScript 的限制，Vue 不能檢測對象屬性的添加或刪除。對於已經創建的實例，Vue 不允許動態添加根級別的響應式屬性。但是，可以使用方法Vue.set(object, propertyName, value)或vm.$set實例方法向嵌套對象添加響應式屬性。有時你可能需要為已有對象賦值多個新屬性，比如使用Object.assign() 或 _.extend()。在這種情況下，你應該用兩個對象的屬性創建一個新的對象（對象的合並），如Object.assign({}, vm1.userProfile, {XX}}。
5、顯示過濾/排序后的結果。有時，我們想要顯示一個數組經過過濾或排序后的版本，而不實際改變或重置原始數據。在這種情況下，可以創建一個計算屬性，來返回過濾或排序后的數組。
6、在v-for里使用值范圍。v-for也可以接受整數。在這種情況下，它會把模板重復對應次數。
7、在<template>上使用v-for。類似於v-if，你也可以利用帶有v-for 的 <template>來循環渲染一段包含多個元素的內容。
8、v-for與v-if一同使用。官網不推薦同時使用v-if 和v-for。當v-if 與v-for 一起使用時，v-for具有比v-if更高的優先級。這意味着 v-if 將分別重復運行於每個 v-for 循環中。當你只想為部分項渲染節點時，這種優先級的機制會十分有用。
9、在組件上使用v-for。在自定義組件上，你可以像在任何普通元素上一樣使用 v-for，注意，2.2.0+ 的版本里，當在組件上使用 v-for 時，key 現在是必須的。然而，任何數據都不會被自動傳遞到組件里，因為組件有自己獨立的作用域。為了把迭代數據傳遞到組件里，我們要使用 prop，不自動將 item 注入到組件里的原因是，這會使得組件與 v-for 的運作緊密耦合。明確組件數據的來源能夠使組件在其他場合重復使用。
八、事件處理
1、監聽事件。可以用v-on指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼。
2、事件處理方法。然而許多事件處理邏輯會更為復雜，所以直接把 JavaScript 代碼寫在 v-on 指令中是不可行的。因此 v-on 還可以接收一個需要調用的方法名稱。
3、內聯處理器中的方法。除了直接綁定到一個方法，也可以在內聯 JavaScript 語句中調用方法。有時也需要在內聯語句處理器中訪問原始的 DOM 事件。可以用特殊變量 $event 把它傳入方法。
4、事件修飾符。在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。盡管我們可以在方法中輕松實現這點，但更好的方式是：方法只有純粹的數據邏輯，而不是去處理 DOM 事件細節。 為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符。之前提過，修飾符是由點開頭的指令后綴來表示的：.stop ，.prevent ，.capture，.self， .once， .passive。注意：使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生。版本2.1.4新增了.once修飾符，不像其它只能對原生的 DOM 事件起作用的修飾符，.once 修飾符還能被用到自定義的組件事件上。版本2.3.0新增 .passive 修飾符（Vue 對應 addEventListener 中的 passive 選項提供的）。.passive 修飾符尤其能夠提升移動端的性能。注意，不要把 .passive 和 .prevent 一起使用，因為 .prevent 將會被忽略，同時瀏覽器可能會向你展示一個警告。請記住，.passive 會告訴瀏覽器你不想阻止事件的默認行為。
5、按鍵修飾符。在監聽鍵盤事件時，我們經常需要檢查詳細的按鍵。Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符。為了在必要的情況下支持舊瀏覽器，Vue 提供了絕大多數常用的按鍵碼的別名：.enter .tab .delete (捕獲“刪除”和“退格”鍵) .esc .space .up .down .left .right。還可以通過全局 config.keyCodes 對象自定義按鍵修飾符別名。
6、系統修飾符。版本2.1.0新增：可以用如下修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器：.ctrl .alt .shift .meta。2.5.0新增：.exact 修飾符允許你控制由精確的系統修飾符組合觸發的事件。版本2.2.0新增一些鼠標按鍵修飾符：.left .right .middle。 這些修飾符會限制處理函數僅響應特定的鼠標按鈕。
7、為什么在HTML中監聽事件。你可能注意到這種事件監聽的方式違背了關注點分離 (separation of concern) 這個長期以來的優良傳統。但不必擔心，因為所有的 Vue.js 事件處理方法和表達式都嚴格綁定在當前視圖的 ViewModel 上，它不會導致任何維護上的困難。實際上，使用 v-on 有幾個好處： 掃一眼 HTML 模板便能輕松定位在 JavaScript 代碼里對應的方法。 因為你無須在 JavaScript 里手動綁定事件，你的 ViewModel 代碼可以是非常純粹的邏輯，和 DOM 完全解耦，更易於測試。 當一個 ViewModel 被銷毀時，所有的事件處理器都會自動被刪除。你無須擔心如何清理它們。（tips:關注點分離原則，也叫正交原則，HTML CSS JS 分離 互不影響）
九、表單輸入綁定
1、基礎用法
可以用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。盡管有些神奇，但 v-model 本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。注意，v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 實例的數據作為數據來源。你應該通過 JavaScript 在組件的 data 選項中聲明初始值。v-model 在內部為不同的輸入元素使用不同的屬性並拋出不同的事件： text 和 textarea 元素使用 value 屬性和 input 事件； checkbox 和 radio 使用 checked 屬性和 change 事件； select 字段將 value 作為 prop 並將 change 作為事件。基礎用法包括：文本，多行文本，復選框，單選按鈕，選擇框。（在文本區域插值 (<textarea>{{text}}</textarea>) 並不會生效，應用 v-model 來代替。如果 v-model 表達式的初始值未能匹配任何選項，<select> 元素將被渲染為“未選中”狀態。在 iOS 中，這會使用戶無法選擇第一個選項。因為這樣的情況下，iOS 不會觸發 change 事件。因此，推薦提供一個值為空的禁用選項。）
2、值綁定
對於單選按鈕，復選框及選擇框的選項，v-model 綁定的值通常是靜態字符串 (對於復選框也可以是布爾值)。但是有時我們可能想把值綁定到 Vue 實例的一個動態屬性上，這時可以用 v-bind 實現，並且這個屬性的值可以不是字符串。
3、修飾符
修飾符有：.lazy,.number,.trim。.lazy：在默認情況下，v-model 在每次 input 事件觸發后將輸入框的值與數據進行同步。你可以添加 lazy 修飾符，從而轉變為使用 change 事件進行同步。.number：如果想自動將用戶的輸入值轉為數值類型，可以給 v-model 添加 number 修飾符。.trim：如果要自動過濾用戶輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符。
4、在組件上使用v-model
HTML 原生的輸入元素類型並不總能滿足需求。幸好，Vue 的組件系統允許你創建具有完全自定義行為且可復用的輸入組件。這些輸入組件甚至可以和 v-model 一起使用。
十、組件基礎
1、創建組件
通過Vue.component（），我們可以創建一個組件。組件是可復用的 Vue 實例，且帶有一個名字。我們可以在一個通過 new Vue 創建的 Vue 根實例中，把這個組件作為自定義元素來使用。注意，因為組件是可復用的 Vue 實例，所以它們與 new Vue 接收相同的選項，例如 data、computed、watch、methods 以及生命周期鈎子等。僅有的例外是像 el 這樣根實例特有的選項。
2、組件的復用
我們可以將組件進行任意次數的復用，每個組件都會獨立維護自己的元素，因為每次使用一次組件，相當於一個它的新實例被創建。注意，一個組件的 data 選項必須是一個函數，因此每個實例可以維護一份被返回對象的獨立的拷貝，這樣就不會再各個組件實例間相互影響。
3、組件的組織
為了能在模板中使用，這些組件必須先注冊以便 Vue 能夠識別。這里有兩種組件的注冊類型：全局注冊和局部注冊。全局注冊的組件可以用在其被注冊之后的任何 (通過new Vue) 新創建的 Vue 根實例，也包括其組件樹中的所有子組件的模板中。
4、通過Prop向子組件傳遞數據
Prop 是你可以在組件上注冊的一些自定義特性（props選項）。當一個值傳遞給一個 prop 特性的時候，它就變成了那個組件實例的一個屬性。一個組件默認可以擁有任意數量的 prop，任何值都可以傳遞給任何 prop。
5、單個根元素
當使用組件時，出現every component must have a single root element (每個組件必須只有一個根元素)的問題時，我們可以將模板的內容包裹在一個父元素內，來修復這個問題。當組件變得越來越復雜的時候，為每個相關的信息定義一個 prop 會變得很麻煩，因而我們要重構這個組件讓它變成接受一個單獨的XX屬性的 prop，在template里面添加關於XX屬性的定義說明即可。
6、監聽子組件事件
在我們開發某些組件時，它的一些功能可能要求我們和父級組件進行溝通。父級組件可以像處理 native DOM 事件一樣通過v-on監聽子組件實例的任意事件，同時子組件可以通過調用內建的 $emit 方法 並傳入事件名稱來觸發一個事件。有的時候用一個事件來拋出一個特定的值是非常有用的：可以使用 $emit 的第二個參數來提供這個值，然后當在父級組件監聽這個事件的時候，我們可以通過 $event 訪問到被拋出的這個值，或者，如果這個事件處理函數是一個方法，那么這個值將會作為第一個參數傳入這個方法。自定義事件也可以用於創建支持v-model 的自定義輸入組件。
7、通過插槽分發內容
和 HTML 元素一樣，我們經常需要向一個組件傳遞內容，Vue 自定義的<slot> 元素讓這變得非常簡單。
8、動態組件
有的時候，在不同組件之間進行動態切換是非常有用的。可以通過 Vue 的<component> 元素加一個特殊的is 特性來實現。
9、解析DOM模板時的注意事項
有些 HTML 元素，諸如 <ul>、<ol>、<table> 和 <select>，對於哪些元素可以出現在其內部是有嚴格限制的。而有些元素，諸如 <li>、<tr> 和 <option>，只能出現在其它某些特定的元素內部。這會導致我們使用這些有約束條件的元素時遇到一些問題。幸好這個特殊的is 特性給了我們一個變通的辦法。
（上述就是關於Vue框架的基礎，其它深入的用法心得也在我的其他博客下，歡迎一起學習：)）