A. 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的回調）
應用場景：需要在視圖更新之後，基於新的視圖進行操作。
B. vue.js 官方demo怎麼編譯
在項目中，我是這樣使用組件的:
定義一個組件
// title.vue
<template>
{{title.title}}
</template>
<script>
export default {
props: {
title: {
title: ''
}
}
</script>
在另一個組件里用
// index.vue
<template>
<nav-title :title="title"></nav-title>
</template>
<script>
import navTitle form 'title.vue'
export default {
el: '#app',
data: {
title: {
title: '標題'
}
C. 前端Vue代碼打包自動編譯發布
在mac上打開terminal。更改目錄到~/.ssh目錄。list當前目錄可以看到所有公私鑰文件。擁有.pub結尾的文件是公鑰文件，無.pub的是私鑰文件。
這步適用於上一步ls觀察之後當前文件夾不存在公私鑰對的情況。
這一步從本地將公鑰文件上傳到伺服器指定目錄。
注意: ssh--id 將key寫到遠程機器的 ~/ .ssh/authorized_key.文件中
好一般別的系統到第三步就可以免密登陸了，但是mac並不這樣。還要調用ssh-add。
我的Mac在配置免密登錄時，沒有用到第五步，配置到第三步，直接檢測及可以登錄。