Vue知識點精簡彙總
一、 元件component
1. 什麼是元件？
元件（Component）是 Vue.js 最強大的功能之一。元件可以擴充套件 HTML 元素，封裝可重用的程式碼
元件是自定義元素（物件）
2. 定義元件的方式
方式1：先建立元件構造器，然後由元件構造器建立元件
方式2：直接建立元件
3. 元件的分類
分類：全域性元件、區域性元件
4. 引用模板
將元件內容放到模板<template>中並引用
5. 動態元件
<component :is="">元件
多個元件使用同一個掛載點，然後動態的在它們之間切換
<keep-alive>元件
二、 元件間資料傳遞
1. 父子元件
在一個元件內部定義另一個元件，稱為父子元件
子元件只能在父元件內部使用
預設情況下，子元件無法訪問父元件中的資料，每個元件例項的作用域是獨立的
2. 元件間資料傳遞 （通訊）
2.1 子元件訪問父元件的資料
a)在呼叫子元件時，繫結想要獲取的父元件中的資料
b)在子元件內部，使用props選項宣告獲取的資料，即接收來自父元件的資料
總結：父元件通過props向下傳遞資料給子元件
注：元件中的資料共有三種形式：data、props、computed
2.2 父元件訪問子元件的資料
a)在子元件中使用vm.$emit(事件名,資料)觸發一個自定義事件，事件名自定義
b)父元件在使用子元件的地方監聽子元件觸發的事件，並在父元件中定義方法，用來獲取資料
總結：子元件通過events給父元件傳送訊息，實際上就是子元件把自己的資料傳送到父元件
3. 單向資料流
props是單向繫結的，當父元件的屬性變化時，將傳導給子元件，但是不會反過來
而且不允許子元件直接修改父元件中的資料，報錯
解決方式：
方式1：如果子元件想把它作為區域性資料來使用，可以將資料存入另一個變數中再操作，不影響父元件中的資料
方式2：如果子元件想修改資料並且同步更新到父元件，兩個方法：
a.使用.sync（1.0版本中支援，2.0版本中不支援，2.3版本又開始支援）
需要顯式地觸發一個更新事件
b.可以將父元件中的資料包裝成物件，然後在子元件中修改物件的屬性(因為物件是引用型別，指向同一個記憶體空間)，推薦
4. 非父子元件間的通訊
非父子元件間的通訊，可以通過一個空的Vue例項作為中央事件匯流排（事件中心），用它來觸發事件和監聽事件
var Event=new Vue();
Event.$emit(事件名,資料);
Event.$on(事件名,data => {});
三、 slot內容分發
本意：位置、槽
作用：用來獲取元件中的原內容，類似angular中的transclude指令
四、 vue-router路由
1. 簡介
使用Vue.js開發SPA（Single Page Application）單頁面應用
根據不同url地址，顯示不同的內容，但顯示在同一個頁面中，稱為單頁面應用
bower info vue-router
cnpm install vue-router -S
2. 基本用法
a.佈局
b.配置路由
3. 路由巢狀和引數傳遞
傳參的兩種形式：
a.查詢字串：login?name=tom&pwd=123
{{$route.query}}
b.rest風格url：regist/alice/456
{{$route.params}}
4. 路由例項的方法
router.push() 新增路由，功能上與<route-link>相同
router.replace() 替換路由，不產生歷史記錄
5. 路由結合動畫
五、 單檔案元件
1. .vue檔案
.vue檔案，稱為單檔案元件，是Vue.js自定義的一種檔案格式，一個.vue檔案就是一個單獨的元件，在檔案內封裝了元件相關的程式碼：html、css、js
.vue檔案由三部分組成：<template>、<style>、<script>
<template>
html
</template>
<style>
css
</style>
<script>
js
</script>
2. vue-loader
瀏覽器本身並不認為.vue檔案，所以必須對.vue檔案進行載入解析，此時需要vue-loader
類似的loader還有許多，如：html-loader、css-loader、style-loader、babel-loader等
需要注意的是vue-loader是基於webpack的
3. webpack
webpack是一個前端資源模板化載入器和打包工具，它能夠把各種資源都作為模組來使用和處理
實際上，webpack是通過不同的loader將這些資源載入後打包，然後輸出打包後文件
簡單來說，webpack就是一個模組載入器，所有資源都可以作為模組來載入，最後打包輸出
官網
webpack版本：v1.x v2.x
webpack有一個核心配置檔案：webpack.config.js，必須放在專案根目錄下
4. 示例，步驟：
4.1 建立專案，目錄結構 如下：
webpack-demo
|-index.html
|-main.js 入口檔案
|-App.vue vue檔案
|-package.json 工程檔案
|-webpack.config.js webpack配置檔案
|-.babelrc Babel配置檔案
4.2 編寫App.vue
4.3 安裝相關模板
cnpm install vue -S
cnpm install webpack -D
cnpm install webpack-dev-server -D
cnpm install vue-loader -D
cnpm install vue-html-loader -D
cnpm install css-loader -D
cnpm install vue-style-loader -D
cnpm install file-loader -D
cnpm install babel-loader -D
cnpm install babel-core -D
cnpm install babel-preset-env -D //根據配置的執行環境自動啟用需要的babel外掛
cnpm install vue-template-compiler -D //預編譯模板
合併：cnpm install -D webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env vue-template-compiler
4.4 編寫main.js
4.5 編寫webpack.config.js
4.6 編寫.babelrc
4.7 編寫package.json
4.8 執行測試
npm run dev
六、 vue-cli腳手架
1. 簡介
vue-cli是一個vue腳手架，可以快速構造專案結構
vue-cli本身集成了多種專案模板：
simple 很少簡單
webpack 包含ESLint程式碼規範檢查和unit單元測試等
webpack-simple 沒有程式碼規範檢查和單元測試
browserify 使用的也比較多
browserify-simple
2. 示例，步驟：
2.1 安裝vue-cli，配置vue命令環境
cnpm install vue-cli -g
vue --version
vue list
2.2 初始化專案，生成專案模板
語法：vue init 模板名 專案名
2.3 進入生成的專案目錄，安裝模組包
cd vue-cli-demo
cnpm install
2.4 執行
npm run dev //啟動測試服務
npm run build //將專案打包輸出dist目錄，專案上線的話要將dist目錄拷貝到伺服器上
3. 使用webpack模板
vue init webpack vue-cli-demo2
ESLint是用來統一程式碼規範和風格的工具，如縮排、空格、符號等，要求比較嚴格
問題Bug：如果版本升級到node 8.0 和 npm 5.0，控制檯會報錯：
GET http://localhost:8080/__webpack_hmrnet::ERR_INCOMPLETE_CHUNKED_ENCODING
解決方法：
a)降低Node版本到7.9或以下
b)修改build/dev-server.js檔案，如下：
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: () => {},
heartbeat:2000 //新增此行
})
參考：https://github.com/vuejs-templates/webpack/issues/731
一、模組化開發
1. vue-router模組化
cnpm install vue-router -S
1.1 編輯main.js
1.2 編輯App.vue
1.3 編輯router.config.js
2. axios模組化
cnpm install axios -S
使用axios的兩種方式：
方式1：在每個元件中引入axios
方式2：在main.js中全域性引入axios並新增到Vue原型中
3. 為自定義元件新增事件
二、 Elment UI
1. 簡介
Element UI是餓了麼團隊提供的一套基於Vue2.0的元件庫，可以快速搭建網站，提高開發效率
ElementUI PC端
MintUI 移動端
2. 快速上手
2.1 安裝elment ui
cnpm install element-ui -S
2.2 在main.js中引入並使用元件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css' //該樣式檔案需要單獨引入
Vue.use(ElementUI); // 這種方式引入了ElementUI中所有的元件
2.3 在webpack.config.js中新增loader
CSS樣式和字型圖示都需要由相應的loader來載入，所以需要style-loader、css-loader
預設並沒有style-loader模組，所以需要單獨安裝
cnpm install style-loader --save-dev
2.4 使用元件
2.5 使用less
安裝loader，需要兩個：less、less-loader
在webpack.config.js中新增loader
cnpm install less less-loader -D
3. 按需引入組
3.1 安裝babel-plugin-component
cnpm install babel-plugin-component -D
3.2 配置.babelrc檔案
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]]]
3.3 只引入需要的外掛
三、 自定義全域性元件（外掛）
全域性元件（外掛）：就是指可以在main.js中使用Vue.use()進行全域性引入，然後在其他元件中就都可以使用了，如vue-router
import VueRouter from 'vue-router'
Vue.use(VueRouter);
普通元件（外掛）：每次使用時都要引入，如axios
import axios from 'axios'
四、 Vuex
1. 簡介
Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
簡單來說，用來集中管理資料，類似於React中的Redux，都是基於Flux的前端狀態管理框架
2. 基本用法
2.1 安裝vuex
cnpm install vuex -S
2.2 建立store.js檔案，在main.js中匯入並配置store.選項
2.3 編輯store.js檔案
Vuex的核心是Store(倉庫)，相當於是一個容器，一個store例項中包含以下屬性的方法：
state 定義屬性（狀態、資料）
getters 用來獲取屬性
actions 定義方法（動作）
commit 提交變化，修改資料的唯一方式就是顯式的提交mutations
mutations 定義變化
注：不能直接修改資料，必須顯式提交變化，目的是為了追蹤到狀態的變化
2.4 編輯App.vue
在子元件中訪問store物件的兩種方式：
方式1：通過this.$store訪問
方式2：通過mapState、mapGetters、mapActions訪問，vuex提供了兩個方法：
mapState 獲取state
mapGetters 獲取getters
mapActions 獲取actions
3. 分模組組織Vuex
|-src
|-store
|-index.js
|-getters.js
|-actions.js
|-mutations.js
|-modules //分為多個模組，每個模組都可以擁有自己的state、getters、actions、mutations
|-user.js
|-cart.js
|-goods.js
|....一、 元件component
1. 什麼是元件？
元件（Component）是 Vue.js 最強大的功能之一。元件可以擴充套件 HTML 元素，封裝可重用的程式碼
元件是自定義元素（物件）
2. 定義元件的方式
方式1：先建立元件構造器，然後由元件構造器建立元件
方式2：直接建立元件
3. 元件的分類
分類：全域性元件、區域性元件
4. 引用模板
將元件內容放到模板<template>中並引用
5. 動態元件
<component :is="">元件
多個元件使用同一個掛載點，然後動態的在它們之間切換
<keep-alive>元件
二、 元件間資料傳遞
1. 父子元件
在一個元件內部定義另一個元件，稱為父子元件
子元件只能在父元件內部使用
預設情況下，子元件無法訪問父元件中的資料，每個元件例項的作用域是獨立的
2. 元件間資料傳遞 （通訊）
2.1 子元件訪問父元件的資料
a)在呼叫子元件時，繫結想要獲取的父元件中的資料
b)在子元件內部，使用props選項宣告獲取的資料，即接收來自父元件的資料
總結：父元件通過props向下傳遞資料給子元件
注：元件中的資料共有三種形式：data、props、computed
2.2 父元件訪問子元件的資料
a)在子元件中使用vm.$emit(事件名,資料)觸發一個自定義事件，事件名自定義
b)父元件在使用子元件的地方監聽子元件觸發的事件，並在父元件中定義方法，用來獲取資料
總結：子元件通過events給父元件傳送訊息，實際上就是子元件把自己的資料傳送到父元件
3. 單向資料流
props是單向繫結的，當父元件的屬性變化時，將傳導給子元件，但是不會反過來
而且不允許子元件直接修改父元件中的資料，報錯
解決方式：
方式1：如果子元件想把它作為區域性資料來使用，可以將資料存入另一個變數中再操作，不影響父元件中的資料
方式2：如果子元件想修改資料並且同步更新到父元件，兩個方法：
a.使用.sync（1.0版本中支援，2.0版本中不支援，2.3版本又開始支援）
需要顯式地觸發一個更新事件
b.可以將父元件中的資料包裝成物件，然後在子元件中修改物件的屬性(因為物件是引用型別，指向同一個記憶體空間)，推薦
4. 非父子元件間的通訊
非父子元件間的通訊，可以通過一個空的Vue例項作為中央事件匯流排（事件中心），用它來觸發事件和監聽事件
var Event=new Vue();
Event.$emit(事件名,資料);
Event.$on(事件名,data => {});
三、 slot內容分發
本意：位置、槽
作用：用來獲取元件中的原內容，類似angular中的transclude指令
四、 vue-router路由
1. 簡介
使用Vue.js開發SPA（Single Page Application）單頁面應用
根據不同url地址，顯示不同的內容，但顯示在同一個頁面中，稱為單頁面應用
bower info vue-router
cnpm install vue-router -S
2. 基本用法
a.佈局
b.配置路由
3. 路由巢狀和引數傳遞
傳參的兩種形式：
a.查詢字串：login?name=tom&pwd=123
{{$route.query}}
b.rest風格url：regist/alice/456
{{$route.params}}
4. 路由例項的方法
router.push() 新增路由，功能上與<route-link>相同
router.replace() 替換路由，不產生歷史記錄
5. 路由結合動畫
五、 單檔案元件
1. .vue檔案
.vue檔案，稱為單檔案元件，是Vue.js自定義的一種檔案格式，一個.vue檔案就是一個單獨的元件，在檔案內封裝了元件相關的程式碼：html、css、js
.vue檔案由三部分組成：<template>、<style>、<script>
<template>
html
</template>
<style>
css
</style>
<script>
js
</script>
2. vue-loader
瀏覽器本身並不認為.vue檔案，所以必須對.vue檔案進行載入解析，此時需要vue-loader
類似的loader還有許多，如：html-loader、css-loader、style-loader、babel-loader等
需要注意的是vue-loader是基於webpack的
3. webpack
webpack是一個前端資源模板化載入器和打包工具，它能夠把各種資源都作為模組來使用和處理
實際上，webpack是通過不同的loader將這些資源載入後打包，然後輸出打包後文件
簡單來說，webpack就是一個模組載入器，所有資源都可以作為模組來載入，最後打包輸出
官網
webpack版本：v1.x v2.x
webpack有一個核心配置檔案：webpack.config.js，必須放在專案根目錄下
4. 示例，步驟：
4.1 建立專案，目錄結構 如下：
webpack-demo
|-index.html
|-main.js 入口檔案
|-App.vue vue檔案
|-package.json 工程檔案
|-webpack.config.js webpack配置檔案
|-.babelrc Babel配置檔案
4.2 編寫App.vue
4.3 安裝相關模板
cnpm install vue -S
cnpm install webpack -D
cnpm install webpack-dev-server -D
cnpm install vue-loader -D
cnpm install vue-html-loader -D
cnpm install css-loader -D
cnpm install vue-style-loader -D
cnpm install file-loader -D
cnpm install babel-loader -D
cnpm install babel-core -D
cnpm install babel-preset-env -D //根據配置的執行環境自動啟用需要的babel外掛
cnpm install vue-template-compiler -D //預編譯模板
合併：cnpm install -D webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env vue-template-compiler