簡介
Vue是一個構建用戶界面的UI框架。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。通過簡單的api實現響應式的數據綁定和組合視圖組件，Vue的核心是一個數據綁定系統。Vue的特性如下：
- 輕量級的框架（壓縮後只有幾十kb）
- 指令
- 雙向數據綁定
- 可複用性（組件）
- 解耦數據與視圖（數據驅動視圖）
- 虛擬Dom（通過Dom Diff算法提升性能）
- 前端路由
- 狀態管理
Vue基礎語法
指令
v-text 等同於雙大括號，用於文本插值。
v-html 輸出真正的html，更新元素的innerHTML。
v-show/if 顯示或隱藏元素，v-show 是通過display屬性實現，v-if則是每次都新建或刪除。
v-for 對數組或對象進行循環操作，可用template進行分組。
v-bind 用於屬性動態綁定到表達式。
v-on 用於綁定事件監聽器，支持事件修飾符 。
v-model 用於input、select、text、checkbox等表單控件元素上實現雙向數據綁定。
v-once 使用了此指令的元素或組件及其所有的子節點，都只會渲染一次。
v-slot 具名插槽和作用域插槽。
自定義指令： 通過Vue.directive可以自定義指令。
計算屬性、偵聽器與過濾器
-
計算屬性computed
vue模板內的表達式支持簡單的運算，但表達式複雜時，會難以維護。計算屬性可以解決這個問題，在一個計算屬性裏可以進行復雜的邏輯運算，函數調用等，最終只需返回一個結果。
每個計算屬性都包含一個getter和setter。在需要時，可以設置setter函數，當手動修改計算屬性時，會觸發setter函數。 -
偵聽器watch
Vue 提供了一種通用的方式來觀察和響應 Vue 實例上的數據變動：偵聽屬性watch ，在watch對象中，鍵是偵聽的變量，值是變量變化時調用的函數，函數接收兩個參數，第一個是變化前的值，第二個是變化後的值。 -
過濾器filter
Vue提供過濾器用於一些常見的文本格式化，過濾器可以用在兩個地方：雙花括號插值和 v-bind 表達式。過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符號指示，在組件中通過filter選項可以創建自定義的過濾器。
組件
- Vue的可複用性體現在組件上，組件可以擴展 HTML 元素，封裝可重用的代碼。
- 組件註冊後纔可以使用。
- 註冊全局組件 Vue.component(tagName, options)。
- 註冊局部組件 在Vue實例通過components選項註冊局部組件。
- 組件中data必須是一個函數。
- 組件的模板只能有一個根元素。
- 一個組件可以分爲數據和視圖，數據更新時，視圖也會自動更新。在視圖中可以綁定事件，根據用戶的操作觸發methods中定義的方法，從而改變數據、更新視圖。
組件通信
Vue支持多種方式進行組件通信，父子組件的通信，兄弟組件的通信，跨級組件的通信等。
- props：父組件向子組件傳遞數據，子組件在父組件作爲標籤引入，通過設置標籤的屬性傳遞數據，在子組件用props接受。
- 發佈訂閱模式：子組件向父組件傳遞數據，父組件on綁定一個事件，子組件emit觸發這個事件。
- 時間總線bus：使用一個空Vue實例作爲中央事件總線(bus)，通過bus.$on監聽和bus.$emit觸發來進行數據傳遞，這種通信方式可以進行任何組件間的通信，包括父子組件，兄弟組件，跨級組件。
- 依賴注入：Vue提供了依賴注入的方式允許跨級向後代組件傳遞數據 。provide選項指定需要傳遞的數據 ，在後代組件中通過inject選項接受。
生命週期
Vue實例從創建到銷燬有一個完整的生命週期。每一個組件都會有開始創建、模板編譯、掛載Dom、渲染前→更新→渲染後、銷燬等一系列過程。Vue共提供8個響應的鉤子函數，便於我們在相應時期進行操作。
- beforeCreate函數 dom還沒有掛載，無法訪問到數據和真實的dom。
- created函數 dom還沒有掛載，數據已經初始化。
- beforeMount函數 虛擬dom已經創建完成，馬上就要渲染。
- mounted函數 dom已經掛載，組件出現在頁面中。
- beforeUpdate函數 數據更改之後，diff算法尚未進行。
- updated函數 數據已經更改完成，dom也重新render完成，可以操作更新後的虛擬dom。
- beforeDestroy函數 調用$destroy方法後。
- destroyed函數 組件的數據綁定、監聽等已經被銷燬。
vue-router
vue-router 是官方維護的路由管理器，與Vue高度集成，使構建單頁應用變得更簡單。
vue-router的原理是不同的頁面加載不同的組件，程序運行時會根據當前路由動態渲染不同的組件，路由切換時，切換的是掛載的組件，其他的內容不會變化。
基本用法
npm install vue-router --save
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
//路由配置
})
new Vue({
el:'#app',
router:router,
render:h=>{return h(app)}
})
動態路由：某種模式匹配的所有路由，映射到同一個組件。
嵌套路由：對應多層嵌套的。
命令路由：給路由命名，用來鏈接路由或執行跳轉。
編程式導航：除了使用進行導航，還可以使用router的實例方法進行跳轉。
重定向和別名：在路由中配置redirect和alias實現重定向和別名的效果。
命名視圖：用於同級展示多個視圖。
History模式：美化頁面中的url，需後臺配置支持。
vuex
在組件通信時，有bus、prop和依賴注入等方式，也可以使用vue的狀態管理插件vuex。
基本用法
npm install vuex --save 安裝
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new store({
//vuex配置
})
new Vue({
el:'#app',
store:store,
render:h=>{return h(app)}
})
store保存了應用的數據狀態和操作過程，只要組件使用store的數據，store數據變化時，對應的組件也會立即更新。store提供了state，mutations等選項用來配置我們需要的操作。
store的state選項保存數據，通過$store.state獲取數據。
store的mutations選項用來直接修改state裏的數據，通過$store.commit方法執行mutations。
store的getters選項用來封裝數據提取後的複雜操作，通過$store.store.getters獲取數據。
store的actions選項用來異步修改state的數據，通過$store.dispatch觸發。
store的modules選項用來將store分割成不同的模塊。當項目非常複雜時，store裏的選項中數據會非常多，難以維護，使用modules可以分成不同的文件，每個modules都有自己的state、mutations、actions、getters。
構建應用
基於vue-cli快速構建vue應用
-
安裝
npm install -g vue-cli -
初始化項目
vue init webpack project 進行選項配置
cd project 打開工程
npm install 安裝npm包
npm run dev 啓動項目
即可快速構建一個Vue項目 -
vue引入element組件庫
npm install element-ui 安裝element
import ElementUI from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’
Vue.use(ElementUI) -
vue引入iview組件庫
npm install iview --save 安裝iview
import iView from ‘iview’;
import ‘iview/dist/styles/iview.css’;
Vue.use(iView); -
vue-cli3 可以使用 TypeScript 生成新工程
安裝vue-cli3
npm install --global @vue/cli
創建一個新工程
vue create my-project-name
選擇 Manually select features選項配置