尚硅谷前端研究院

第 1 章：Vue 核心

• Vue 簡介官網英文官網: https://vuejs.org/中文官網: https://cn.vuejs.org/

介紹與描述

• • • 動態構建用戶界面的漸進式 JAVAScript 框架
    • 作者: 尤雨溪

Vue 的特點

• • • 遵循 MVVM 模式
    • 編碼簡潔, 體積小, 運行效率高, 適合移動/PC 端開發
    • 它本身只關注UI, 也可以引入其它第三方庫開發項目

與其它 JS 框架的關聯

• • • 借鑒Angular 的模板和數據綁定技術
    • 借鑒React 的組件化和虛擬DOM 技術

Vue 周邊庫

• • • vue-cli: vue 腳手架
    • vue-resource
    • axIOS
    • vue-router: 路由
    • vuex: 狀態管理
    • element-ui: 基于vue 的UI 組件庫(PC 端)

……

初識 Vue

 

• 模板語法

效果

 

• • 模板的理解

html 中包含了一些JS 語法代碼，語法分為兩種，分別為：

• • • 插值語法（雙大括號表達式）
    • 指令（以v-開頭）

插值語法

• • • 功能: 用于解析標簽體內容
    • 語法: {{xxx}} ，xxxx 會作為js 表達式解析

指令語法

• • • 功能: 解析標簽屬性、解析標簽體內容、綁定事件
    • 舉例：v-bind:href = 'xxxx' ，xxxx 會作為js 表達式被解析
    • 說明：Vue 中有有很多的指令，此處只是用v-bind 舉個例子

數據綁定

效果

 

• • 單向數據綁定語法：v-bind:href ="xxx" 或簡寫為 :href特點：數據只能從data 流向頁面

雙向數據綁定

• • • 語法：v-mode:value="xxx" 或簡寫為 v-model="xxx"
    • 特點：數據不僅能從data 流向頁面，還能從頁面流向 data

MVVM 模型

1. M：模型(Model) ：對應data 中的數據
2. V：視圖(View) ：模板
3. VM：視圖模型(ViewModel) ： Vue 實例對象

事件處理

效果

 

• • 綁定監聽v-on:xxx="fun"@xxx="fun"@xxx="fun(參數)"默認事件形參: event隱含屬性對象: $event

事件修飾符

• • • .prevent : 阻止事件的默認行為 event.preventDefault()
    • .stop : 停止事件冒泡 event.stopPropagation()

按鍵修飾符

• • • keycode : 操作的是某個keycode 值得鍵
    • .keyName : 操作的某個按鍵名的鍵(少部分)

計算屬性與監視

效果

 

• • 計算屬性-computed要顯示的數據不存在，要通過計算得來。在computed 對象中定義計算屬性。在頁面中使用{{方法名}}來顯示計算的結果。

監視屬性-watch

 

• • • 通過通過vm 對象的$watch()或watch 配置來監視指定的屬性
    • 當屬性變化時, 回調函數自動調用, 在函數內部進行計算

class 與 style 綁定

理解

• • • 在應用界面中, 某個(些)元素的樣式是變化的
    • class/style 綁定就是專門用來實現動態樣式效果的技術

class 綁定

• • • :class='xxx'
    • 表達式是字符串: 'classA'
    • 表達式是對象: {classA:isA, classB: isB}
    • 表達式是數組: ['classA', 'classB']

style 綁定

• • • :style="{ color: activeColor, fontSize: fontSize + 'px' }"
    • 其中activeColor/fontSize 是data 屬性

條件渲染

條件渲染指令

• • • v-if 與v-else
    • v-show

比較v-if 與v-show

• • • 如果需要頻繁切換 v-show 較好
    • 當條件不成立時, v-if 的所有子節點不會解析(項目中使用)

列表渲染

效果

 

 

 

• • 列表顯示指令

遍歷數組: v-for / index 遍歷對象: v-for / key

收集表單數據

 

• 過濾器

效果

 

• • 理解過濾器

1. 功能: 對要顯示的數據進行特定格式化后再顯示
2. 注意: 并沒有改變原本的數據, 是產生新的對應的數據

內置指令與自定義指令

常用內置指令

1. v-text : 更新元素的 textContent
2. v-html : 更新元素的 innerHTML
3. v-if : 如果為true, 當前標簽才會輸出到頁面
4. v-else: 如果為false, 當前標簽才會輸出到頁面
5. v-show : 通過控制display 樣式來控制顯示/隱藏
6. v-for : 遍歷數組/對象
7. v-on : 綁定事件監聽, 一般簡寫為@
8. v-bind : 綁定解析表達式, 可以省略v-bind
9. v-model : 雙向數據綁定
10. v-cloak : 防止閃現, 與css 配合: [v-cloak] { display: none }

自定義指令

注冊全局指令

Vue.directive('my-directive', function(el, binding){ el.innerHTML = binding.value.toupperCase()

})

注冊局部指令

directives : {

'my-directive' : { bind (el, binding) {

el.innerHTML = binding.value.toupperCase()

}

}

}

1) 使用指令

v-my-directive='xxx'

Vue 實例生命周期

效果

 

• • 生命周期流程圖

 

• • vue 生命周期分析

1. 初始化顯示

beforeCreate()

• • created()
  • beforeMount()
  • mounted()

1. 更新狀態: this.xxx = value

beforeUpdate()

• • updated()

1. 銷毀vue 實例: vm.$destory()

beforeDestory()

• • destoryed()常用的生命周期方法mounted(): 發送ajax 請求, 啟動定時器等異步任務beforeDestory(): 做收尾工作, 如: 清除定時器

第 2 章：Vue 組件化編程

模塊與組件、模塊化與組件化

模塊

• • • 理解: 向外提供特定功能的 js 程序, 一般就是一個js 文件
    • 為什么: js 文件很多很復雜
    • 作用: 復用js, 簡化js 的編寫, 提高js 運行效率

組件

• • • 理解: 用來實現局部(特定)功能效果的代碼集合(html/css/js/image…..)
    • 為什么: 一個界面的功能很復雜
    • 作用: 復用編碼, 簡化項目編碼, 提高運行效率

模塊化

當應用中的js 都以模塊來編寫的, 那這個應用就是一個模塊化的應用。

組件化

當應用中的功能都是多組件的方式來編寫的, 那這個應用就是一個組件化的應用,。

非單文件組件

• • 模板編寫沒有提示
  • 沒有構建過程, 無法將ES6 轉換成ES5
  • 不支持組件的CSS
  • 真正開發中幾乎不用

單文件組件

一個.vue 文件的組成(3 個部分)

模板頁面

<template> 頁面模板

</template>

JS 模塊對象

<script> export default {

data() {return {}}, methods: {},

computed: {}, components: {}

}

</script>

樣式

<style> 樣式定義

</style>

基本使用

1. 引入組件
2. 映射成標簽
3. 使用組件標簽

第 3 章：使用 Vue 腳手架

初始化腳手架

說明

1. Vue 腳手架是Vue 官方提供的標準化開發工具（開發平臺）。
2. 最新的版本是 4.x。
3. 文檔: https://cli.vuejs.org/zh/。

具體步驟

第一步（僅第一次執行）：全局安裝@vue/cli。

npm install -g @vue/cli

第二步：切換到你要創建項目的目錄，然后使用命令創建項目

vue create xxxx 第三步：啟動項目

npm run serve

備注：

1.

如出現下載緩慢請配置 npm 淘寶鏡像：		npm	config	set	registry
https://registry.npm.taobao.org

2. Vue 腳手架隱藏了所有webpack 相關的配置，若想查看具體的webpakc 配置， 請執行：vue inspect > output.js

模板項目的結構

├── node_modules

├── public

│ ├── favicon.ico: 頁簽圖標

│ └── index.html: 主頁面

├── src

│ ├── assets: 存放靜態資源

│ │ └── logo.png

│ │── component: 存放組件

│ │ └── HelloWorld.vue

│ │── App.vue: 匯總所有組件

│ │── main.js: 入口文件

├── .gitignore: git 版本管制忽略的配置

├── babel.config.js: babel 的配置文件

├── package.json: 應用包配置文件

├── README.md: 應用描述文件

├── package-lock.json：包版本控制文件

• ref 與 props

ref

1. 作用：用于給節點打標識
2. 讀取方式：this.$refs.xxxxxx

props

• 作用：用于父組件給子組件傳遞數據

讀取方式一: 只指定名稱

props: ['name', 'age', 'setName']

讀取方式二: 指定名稱和類型

props: {

name: String, age: Number,

setNmae: Function

}

讀取方式三: 指定名稱/類型/必要性/默認值

props: {

name: {type: String, required: true, default:xxx},

}

混入

1. Vue 插件是一個包含install 方法的對象
2. 通過install 方法給Vue 或Vue 實例添加方法, 定義全局指令等

插件

1. Vue 插件是一個包含install 方法的對象
2. 通過install 方法給Vue 或Vue 實例添加方法, 定義全局指令等

Todo-list 案例

 

組件化編碼流程（通用）

1. 實現靜態組件：抽取組件，使用組件實現靜態頁面效果
2. 展示動態數據：

• 數據的類型、名稱是什么？
• 數據保存在哪個組件？ 3.交互——從綁定事件監聽開始

Vue 中的自定義事件

綁定事件監聽

<Header @addTodo="addTodo"/>

或者

<Header ref="header"/> this.$refs.header.$on('addTodo', this.addTodo)

觸發事件

this.$emit('addTodo', todo)

• 全局事件總線理解

1. Vue 原型對象上包含事件處理的方法

• $on(eventName, listener): 綁定自定義事件監聽
• $emit(eventName, data): 分發自定義事件
• $off(eventName): 解綁自定義事件監聽
• $once(eventName, listener): 綁定事件監聽, 但只能處理一次

1. 所有組件實例對象的原型對象的原型對象就是Vue 的原型對象

• 所有組件對象都能看到Vue 原型對象上的屬性和方法
• Vue.prototype.$bus = new Vue(), 所有的組件對象都能看到$bus 這個屬性對象

1. 全局事件總線

• 包含事件處理相關方法的對象(只有一個)
• 所有的組件都可以得到

指定事件總線對象

new Vue({

beforeCreate () { // 盡量早的執行掛載全局事件總線對象的操作

Vue.prototype.$globalEventBus = this

},

}).$mount('#root')

• • 綁定事件

this.$globalEventBus.$on('deleteTodo', this.deleteTodo)

• • 分發事件

this.$globalEventBus.$emit('deleteTodo', this.index)

• • 解綁事件

this.$globalEventBus.$off('deleteTodo')

• 消息訂閱與發布理解

1. 這種方式的思想與全局事件總線很相似
2. 它包含以下操作:

• 訂閱消息 --對應綁定事件監聽
• 發布消息 --分發事件
• 取消消息訂閱 --解綁事件監聽

1. 需要引入一個消息訂閱與發布的第三方實現庫: PubSubJS

使用PubSubJS

1. 在線文檔: https://github.com/mroderick/PubSubJS
2. 下載: npm install -S pubsub-js
3. 相關語法

• import PubSub from 'pubsub-js' // 引 入
• PubSub.subscribe(‘msgName’, functon(msgName, data){ })
• PubSub.publish(‘msgName’, data): 發布消息, 觸發訂閱的回調函數調用
• PubSub.unsubscribe(token): 取消消息的訂閱

過度與動畫

效果

 

• • vue 動畫的理解操作css 的trasition 或animationvue 會給目標元素添加/移除特定的class過渡的相關類名：xxx-enter-active: 指定顯示的transitionxxx-leave-active: 指定隱藏的transitionxxx-enter/xxx-leave-to: 指定隱藏時的樣式

 

基本過渡動畫的編碼

1. 在目標元素外包裹<transition name="xxx">
2. 定義class 樣式

• 指定過渡樣式: transition
• 指定隱藏時的樣式: opacity/其它

第 4 章：Vue 中的 ajax

解決開發環境 Ajax 跨域問題

使用代理服務器

github 用戶搜索案例

• • 效果

 

• • 接口地址

https://api.github.com/search/users?q=xxx

vue 項目中常用的 2 個 Ajax 庫

axios

通用的Ajax 請求庫, 官方推薦，使用廣泛

vue-resource

vue 插件庫, vue1.x 使用廣泛，官方已不維護。

slot 插槽

效果

效果一（不使用插槽）：

 

效果二（默認插槽）：

 

效果三（具名插槽）：

 

效果三（作用域插槽）：

 

理解

父組件向子組件傳遞帶數據的標簽，當一個組件有不確定的結構時, 就需要使用slot 技術，注意：插槽內容是在父組件中編譯后, 再傳遞給子組件的。

分類

1. 默認插槽
2. 命名插槽
3. 作用域插槽

第 5 章：vuex

理解 vuex

vuex 是什么

1. 概念：專門在Vue 中實現集中式狀態（數據）管理的一個Vue 插件，對vue 應用中多個組件的共享狀態進行集中式的管理（讀/寫），也是一種組件間通信的方式，且適用于任意組件間通信。
2. Github 地址: https://github.com/vuejs/vuex

什么時候使用 Vuex

• • • 多個組件依賴于同一狀態
    • 來自不同組件的行為需要變更同一狀態

案例

 

• • Vuex 工作原理圖

 

• vuex 核心概念和 APIstatevuex 管理的狀態對象它應該是唯一的示例代碼：

 

actions

• • • 值為一個對象，包含多個響應用戶動作的回調函數
    • 通過commit( )來觸發mutation 中函數的調用, 間接更新state
    • 如何觸發actions 中的回調？

在組件中使用: $store.dispatch('對應的action 回調名') 觸發

• • • 可以包含異步代碼（定時器, ajax 等等）
    • 示例代碼：

 

mutations

• • • 值是一個對象，包含多個直接更新state 的方法
    • 誰能調用mutations 中的方法？如何調用？

在action 中使用：commit('對應的 mutations 方法名') 觸發

• • • mutations 中方法的特點：不能寫異步代碼、只能單純的操作state
    • 示例代碼：

 

getters

• • • 值為一個對象，包含多個用于返回數據的函數
    • 如何使用？—— $store.getters.xxx
    • 示例代碼：

 

modules

• • • 包含多個module
    • 一個module 是一個store 的配置對象
    • 與一個組件（包含有共享數據）對應

第 6 章：vue-router

相關理解

vue-router 的理解

vue 的一個插件庫，專門用來實現SPA 應用

對SPA 應用的理解

1. 單頁Web 應用（single page web application，SPA）。
2. 整個應用只有一個完整的頁面。
3. 點擊頁面中的導航鏈接不會刷新頁面，只會做頁面的局部更新。
4. 數據需要通過ajax 請求獲取。

路由的理解

什么是路由?

• 一個路由就是一組映射關系（key - value）
• key 為路徑, value 可能是function 或component

路由分類

• 后端路由：理解：value 是function, 用于處理客戶端提交的請求。工作過程：服務器接收到一個請求時, 根據請求路徑找到匹配的函數來處理請求, 返回響應數據。前端路由：理解：value 是component，用于展示頁面內容。工作過程：當瀏覽器的路徑改變時, 對應的組件就會顯示。

基本路由

效果

 

• • 總結: 編寫使用路由的 3 步

1. 定義路由組件
2. 注冊路由
3. 使用路由

嵌套（多級）路由

 

• 路由傳參

 

• 編程式路由導航

 

相關 API：

1. this.$router.push(path): 相當于點擊路由鏈接(可以返回到當前路由界面)
2. this.$router.replace(path): 用新路由替換當前路由(不可以返回到當前路由界面)
3. this.$router.back(): 請求(返回)上一個記錄路由
4. this.$router.go(-1): 請求(返回)上一個記錄路由
5. this.$router.go(1): 請求下一個記錄路由

第 7 章：Vue UI 組件庫

移動端常用UI 組件庫

1. Vant https://youzan.github.io/vant
2. Cube UI https://didi.github.io/cube-ui
3. Mint UI http://mint-ui.github.io

PC 端常用UI 組件庫

1. Element UI https://element.eleme.cn
2. IView UI https://www.iviewui.com