① Vue基礎篇
內容簡介：
1）Vue指令
2）computed和watch
3）生命周期鉤子
4）組件間的傳參
5）插槽
6）修飾符
7）nextTick()
前端三大框架：
Vue：尤雨溪開發
React：Facebook主導開發
Angular：谷歌主導開發
為什麼選擇Vue?
1.國內Vue的市場份額佔比多
2.簡單易上手，非常適合前端開發初學者學習
前置知識：
1.HTML、CSS和js基礎
2.了解Node和npm
3.webpack（可選，vue-cli已經封裝了打包功能）
使用Vue的吵或兩種方式：
1.直接script標簽引入vue.js文件
2.基於Node環境創建Vue項目（使用vue-cli初始化一個Vue項目）
前端框架與庫的區別
• jquery 庫 -> DOM(操作DOM) + 動畫+ ajax請求
• 框架 -> 全方位功能
一、指令
指令（Directives）是帶有 v- 前綴的特殊屬性。
插值表達式和v-text指令被直接解析為字元串；元素綁定 v-html 指令後，解析了msg 變數值裡面的html標簽，輸出真正的html元素。
v-model也可用在自定義組件上。
5.v-for（列表渲染）
使用v-for時應綁定key屬性，key屬性可以用來提升v-for渲染的效率
Vue 將被偵聽的數組的變更方法進行了包裹，所以它們也將會觸發視圖更新。這些被包裹過的方法包括：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
由於 JavaScript 的限制，Vue 不能檢測數組、對象的以下變化：1. 利用索引直接設置數組的某一項 2. 對象屬性的添加或刪除
二、computed和watch
三、生命周期鉤子
什麼是Vue生命周期？
Vue 實例從創建到銷毀的過程，就是生命周期。也就是從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程。
總共分為8個階段：創建前/後，掛載空褲前/後，更新前/後，銷毀前/後。
1）beforeCreate
此時實例上只有一些生命周期函數和默認的事件，此時data computed watch methods上的方法和數據均不能訪問。
2）created
此時可以讀取data的值，並可以對其進行操作，把方法、計算屬性也都掛載到了實例。但是依舊不能訪問el，不能獲取到DOM元素。
在這個鉤子函數中，我們可以進行http請求，把請求到的數據儲存在data中。
3）模板編譯，把data裡面的數據和vue語法寫的模板編譯成HTML
4）beforeMount
將編譯完成的HTML掛載到對應虛擬DOM，此時還未掛載到頁面上
5）mounted
編譯好的HTML已掛載到頁面上
6）beforeUpdate和updated
數據更新時調用，通常使用計算屬性或偵聽器取而代之
7）beforeDestroy
銷毀所有觀察者、組件及事件監聽
8）destroyed
組件已經完全銷毀，組件中的數據、方法、計算屬性、過濾器等都已不可用。
四、組件間的通信
1.父子組件間的通信
父子組件通信可以總結為props向下傳遞，事件向上傳遞。
單向數據流：父級 prop 的更新升虧伍會向下流動到子組件中，但反過來不行。
每個Vue實例都實現了事件介面：子組件使用 this.$emit(eventName,optionalPayload) 觸發自定義事件。父組件在使用子組件的地方直接用v-on來監聽子組件觸發的事件。
父組件通過ref直接調用子組件中的方法。
子組件調用父組件中的方法：
1）子組件中通過 this.$parent.fatherMethod() 來調用父組件的方法
2）子組件用$emit向父組件觸發一個事件，父組件監聽這個事件
3）父組件通過props把方法傳入子組件中（type: Function），在子組件里直接調用這個方法
2.兄弟組件間的通信
其中一種方法是讓父組件充當兩個子組件之間的中間件（中繼）；
另一種就是使用EventBus（事件匯流排），它允許兩個組件之間直接通信，而不需要涉及父組件：
Vue原型上的方法：
五、插槽
3）作用域插槽
使用場景：
在使用ElementUI組件庫的el-table組件時，表格的編輯和刪除操作要用到作用域插槽。因為el-table組件，就是當前組件的子組件。通過作用域插槽很容易拿到當前表格行的索引和內容，這樣就可以很方便地進行編輯、刪除的操作。v-slot指令是Vue2.6之後，作用域插槽的新語法，舊語法（slot-scope）現在還保留，但3.0之後會移除。
六、修飾符
2.事件修飾符
vue提倡的是在方法中只有純粹的數據邏輯，而不是去處理 DOM 事件細節，所以提供了事件修飾符用於DOM的事件處理。
3.按鍵修飾符
七、nextTick()
定義：在下次 DOM 更新循環結束之後執行延遲回調。在修改數據之後立即使用這個方法，獲取更新後的 DOM。（當數據更新了，在dom中渲染後，自動執行nextTick的回調）
應用場景：需要在視圖更新之後，基於新的視圖進行操作。
② vue初始化項目找不到文件/dist/build.js
剛初始化的項目是沒有dist目錄的。dist目錄是你打包輸出的目錄，項目完成打包時生成的。
build.js是在 /build/build.js
③ webpack 創建一個VUE項目
一、創建並初始化VUE項目
1.安裝完VUE和nodejs後在指定文件夾根目錄生成項目文件夾
在命令行衡畢內進入當前文仿粗件夾
輸入
其他選項默認
生成的文件備攔鎮夾
3.安裝完畢運行
yarn start
未安裝yarn的可直接運行
npm run dev
3.刪除初始化多餘項目
3.1刪除components文件夾下的helloworld文件
3.2在app.vue中刪除以下內容(如果報錯請檢查是否存在空格未刪除)
4.讓項目先跑起來
npm run dev
*注在開發測試環境使用-D/--seve-dev；生產環境使用-S/--seve
④ vue 已經掛載的組件怎麼初始化裡面的data
vue將數據綁定到組件的原理如下： 1、當實例化一個Vue構造函數，會執行 Vue 的 init 方法，在 init 方法中主要執行三部分內容，一是初始化環境變數，而是處理 Vue 組件數據，三是解析掛載組件。以上三部分內容構成了 Vue 的整個執行過程。