【序号】表示後期插入的知識點~
1、Hello World
2、雙向綁定
文法：v-model
簡介：v-model 是一個模闆指令 input裡面value的内容輸入什麼，下面content的内容就會顯示出來。
3、資料綁定
文法：{{}}
【1】、屬性綁定
文法：v-bind ~ :
簡介：title='title' 後面的title不是個字元串 而是js的表達式 (new 執行個體下面的title）。
4、MVP & MVVM
4.1、MVP
4.2、MVVM
Ps：VM層屬于Vue層（資料自動綁定），面向資料開發；而傳統的MVP中的P層主要是面向DOM開發；用MVVM模式可以減少30%的代碼量甚至可以達到70%。
5、元件
5.0、Vue元件 & Vue執行個體
在Vue裡 ，每一個Vue元件，都是一個Vue執行個體。
Vue執行個體有的功能，Vue元件都同樣擁有。
如果一個vue執行個體裡面沒有定義template，那麼這個執行個體會把它對應的挂載點下的所有内容當作模闆。
5.1、全局元件（注釋部分） & 局部元件
5.2、元件即執行個體（new Vue({})）
5.3、元件定義的新标簽，有時不能直接使用，比如：<table>裡面認識<tr>，若我們寫個它識别不出的，哪怕我們還是寫在table裡面，但解析的時候仍有BUG，是以這時直接寫個我們想要渲染後的效果的标簽，配合“is”屬性。
5.4、data必須是函數，不能是對象。
5.5、模仿DOM操作，需要配合“ref”屬性。
5.6、父子元件之間的傳資料
Ps：一般情況下，父元件可以傳遞資料到子元件（單向），子元件不能修改從父元件而來的變量，不過可以通過data臨時變量來傳遞到父元件。
【4、父子元件通信過程】
（1）父元件通過prop向子元件傳值，子元件獲得父元件傳來的内容和索引。
（2）子元件通過$emit向父元件抛出觸發事件名稱（delete）和觸發事件的list索引值。
（3）父元件通過監聽對應事件名稱（@delete）觸發函數handleDelete。函數通過子元件抛出的索引值對應删除list。
5.7、元件參數檢驗 + props + 非props 特性
props：不僅可以用數組來接收，也可以用對象來接收；渲染後不會顯示content=”xxx”。
非props：可以直接操作要顯示的資料，渲染後會顯示content=”xxx”。一般非props不常用。
5.8、元件綁定原生事件
傳統方式：
Ps：emit針對自定義事件；而在元件内部 @click 屬于原生事件。
簡寫方式：
5.9、非父子元件通信
5.10、内容插槽
5.11、作用域插槽
Ps：在這裡的<template>和slot-scope是固定寫法。
5.12、動态元件 & v-once 指令
Ps：注釋的代碼性能更好，因為不需要每次都删除再增貼。
5.13、template 屬性
Ps：挂載點：指的是el标記的。
模闆：既可以寫在挂載點内部，也可以寫在js的template裡面。
挂載點裡面的内容稱之為模闆。
6、生命周期
Ps：橢圓白底矩形的方法是不用寫在methods裡面的，與methods同層次級别。
7、計算屬性（一）
文法：computed:{}
提示：
7.1、支援緩存，隻要跟他的相關值改變才會更新，否則一直使用緩存。
7.2、若一個業務邏輯可以用watch、methods、computed實作的話，優先選擇computed，因為代碼少，而且性能最好。
7、計算屬性（二）
文法：computed:{
xxx:{
set: function(){},
get: function(){}
}
}
提示：
7.1、支援緩存，隻要跟他的相關值改變才會更新，否則一直使用緩存。
7.2、set函數裡面需要自己split來分割分别指派。
8、監聽器
文法：watch:{}
提示：
8.1、支援緩存，隻要跟他監聽的變量改變才會更新。
【2】計算屬性 & 監聽器
9、樣式綁定
9.1、:style
9.2、:class
Ps：value用數組或{}（對象）來表示，用對象時，注意用駝峰命名法，比如：font-size => fontSize。
10、條件渲染
10.1、v-show
提示：
10.1.1、如果為false，相當于display:none; 和v-if一樣會整個DOM都消失了；從性能上來看v-show性能更好。
10.2、v-if / v-else-if / v-else
提示：
10.2.1、中間不能有其他與if/else不相關的元素，if/else必須緊接着一起。
10.3、key
提示：
10.3.1、因為Vue會盡可能的用已加載好的結構來提高性能，但是有時也會出現BUG，比如：input元素，此時，就要用key來區分，避免亂用别人的DOM（髒資料）。
【3、v-if & v-show】
- v-if 為false時，DOM元素在HTML裡不存在（原來存在的話，現在就被删除），自然而然在流結構上面不存在。
- v-show 為false時，DOM元素在HTML裡存在，但是 display:none 而且在流結構上面仍然屬于不存在。
11、清單渲染
文法：v-for=”(item, index, key) of list”
文法：:key=”item.id”（不推薦使用”index”，因為性能不好）
提示：
11.1、使用下标改資料，資料成功改變，但不會實時渲染；隻有調用上面注釋的API(變異方法)改變資料或者改變引用位址（指派新的對象或數組）才會實時渲染。
11.2、<template>相當于小程式中的<block>可節省一個<div>。
11.3、Vue.set 或 vm.$set 也可以實作實時渲染
【4、for of & for in】
ES6 - for of & for in 差別
12、CSS動畫原理
Ps1：如果<transition>屬性name=”xxx”，則class為“.xxx-enter-active”其他類似，預設為“.v-…”。
Ps2：leave：準備離開時調用；enter：準備出現時調用。
13、Animate.css庫
Ps：支援自定義動畫。
Ps：支援自定義class。
Ps：必須使用自定義的模式，如“enter-active-class”來使用；并且加上“animated”，剩下的效果自己選擇。其實Animate.css庫隻是@keyframes的封裝罷了。
14、Animate.css & 自定義同時使用
Ps1：appear 出場時調用。
Ps2：type 選擇以自定義的時間為基準。
Ps3：:duration 固定出現和消失的基準時間，若一樣，則可以“:duration=‘毫秒’”。
15、結合動畫Velocity.js使用
傳統方式：
Ps：leave類似。
Velocity.js方式：
16、多個元素或元件的過渡
方法一：
方法二：
17、清單過渡
Ps：高亮選中的為<transition-group>的原理部分。
18、動畫封裝
19、項目初始化
Ps：項目更新到碼雲上。
20、單頁應用 & 多頁應用
Ps：單頁應用，把目前頁DOM删除掉，再把需要的渲染出來。
21、axios
URL代理
22、keep-alive
22.1、多了一個 activated 生命周期
22.2、多了一個 deactivated 生命周期
22.3、exclude 屬性
實戰：每個地方的首頁是不一樣的，如果我第一次選A地，發送一次請求；如果第二次還選A地，不發送請求；如果選非A地，發送一次請求。
23、Vue + Vue-Cli + Webpack + npm
build 目錄下放置的是項目的webpack配置檔案，可以不動
config 是針對線上環境和開發環境的配置檔案，也可以不動
node_modules 指的是項目的依賴
src 指的是源代碼放置的目錄
static 放置的是靜态的資源
src中的main.js檔案是整個項目的入口檔案
vue-cli 提供了一種新的vue的編碼文法：單檔案元件（一個.vue檔案中包含了一個元件裡必須的所有内容）
vue-cli 的優勢：
23.1、可以使用es6。
23.2、一個元件是一個.vue的檔案所定義的，實作了元件的封裝。
（在安裝該工具之前需要安裝npm和node）
24、單檔案元件開發模式
- template下面隻能有一個最外層根标簽。
- 在v-cli腳手架中，data不再是一個對象，而是一個函數。