尚硅谷前端研究院

第 1 章：Vue 核心

Vue 簡(jiǎn)介官網(wǎng)英文官網(wǎng): https://vuejs.org/中文官網(wǎng): https://cn.vuejs.org/

介紹與描述

- - 動(dòng)態(tài)構(gòu)建用戶界面的漸進(jìn)式 JAVAScript 框架
  - 作者: 尤雨溪

Vue 的特點(diǎn)

- - 遵循 MVVM 模式
  - 編碼簡(jiǎn)潔, 體積小, 運(yùn)行效率高, 適合移動(dòng)/PC 端開(kāi)發(fā)
  - 它本身只關(guān)注UI, 也可以引入其它第三方庫(kù)開(kāi)發(fā)項(xiàng)目

與其它 JS 框架的關(guān)聯(lián)

- - 借鑒Angular 的模板和數(shù)據(jù)綁定技術(shù)
  - 借鑒React 的組件化和虛擬DOM 技術(shù)

Vue 周邊庫(kù)

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

……

初識(shí) Vue

模板語(yǔ)法

效果

- 模板的理解

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

- - 插值語(yǔ)法（雙大括號(hào)表達(dá)式）
  - 指令（以v-開(kāi)頭）

插值語(yǔ)法

- - 功能: 用于解析標(biāo)簽體內(nèi)容
  - 語(yǔ)法: {{xxx}} ，xxxx 會(huì)作為js 表達(dá)式解析

指令語(yǔ)法

- - 功能: 解析標(biāo)簽屬性、解析標(biāo)簽體內(nèi)容、綁定事件
  - 舉例：v-bind:href = 'xxxx' ，xxxx 會(huì)作為js 表達(dá)式被解析
  - 說(shuō)明：Vue 中有有很多的指令，此處只是用v-bind 舉個(gè)例子

數(shù)據(jù)綁定

效果

- 單向數(shù)據(jù)綁定語(yǔ)法：v-bind:href ="xxx" 或簡(jiǎn)寫為 :href特點(diǎn)：數(shù)據(jù)只能從data 流向頁(yè)面

雙向數(shù)據(jù)綁定

- - 語(yǔ)法：v-mode:value="xxx" 或簡(jiǎn)寫為 v-model="xxx"
  - 特點(diǎn)：數(shù)據(jù)不僅能從data 流向頁(yè)面，還能從頁(yè)面流向 data

MVVM 模型

M：模型(Model) ：對(duì)應(yīng)data 中的數(shù)據(jù)
V：視圖(View) ：模板
VM：視圖模型(ViewModel) ： Vue 實(shí)例對(duì)象

事件處理

效果

- 綁定監(jiān)聽(tīng)v-on:xxx="fun"@xxx="fun"@xxx="fun(參數(shù))"默認(rèn)事件形參: event隱含屬性對(duì)象: $event

事件修飾符

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

按鍵修飾符

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

計(jì)算屬性與監(jiān)視

效果

- 計(jì)算屬性-computed要顯示的數(shù)據(jù)不存在，要通過(guò)計(jì)算得來(lái)。在computed 對(duì)象中定義計(jì)算屬性。在頁(yè)面中使用{{方法名}}來(lái)顯示計(jì)算的結(jié)果。

監(jiān)視屬性-watch

- - 通過(guò)通過(guò)vm 對(duì)象的$watch()或watch 配置來(lái)監(jiān)視指定的屬性
  - 當(dāng)屬性變化時(shí), 回調(diào)函數(shù)自動(dòng)調(diào)用, 在函數(shù)內(nèi)部進(jìn)行計(jì)算

class 與 style 綁定

理解

- - 在應(yīng)用界面中, 某個(gè)(些)元素的樣式是變化的
  - class/style 綁定就是專門用來(lái)實(shí)現(xiàn)動(dòng)態(tài)樣式效果的技術(shù)

class 綁定

- - :class='xxx'
  - 表達(dá)式是字符串: 'classA'
  - 表達(dá)式是對(duì)象: {classA:isA, classB: isB}
  - 表達(dá)式是數(shù)組: ['classA', 'classB']

style 綁定

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

條件渲染

條件渲染指令

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

比較v-if 與v-show

- - 如果需要頻繁切換 v-show 較好
  - 當(dāng)條件不成立時(shí), v-if 的所有子節(jié)點(diǎn)不會(huì)解析(項(xiàng)目中使用)

列表渲染

效果

- 列表顯示指令

遍歷數(shù)組: v-for / index 遍歷對(duì)象: v-for / key

收集表單數(shù)據(jù)

過(guò)濾器

效果

- 理解過(guò)濾器

功能: 對(duì)要顯示的數(shù)據(jù)進(jìn)行特定格式化后再顯示
注意: 并沒(méi)有改變?cè)镜臄?shù)據(jù), 是產(chǎn)生新的對(duì)應(yīng)的數(shù)據(jù)

內(nèi)置指令與自定義指令

常用內(nèi)置指令

v-text : 更新元素的 textContent
v-html : 更新元素的 innerHTML
v-if : 如果為true, 當(dāng)前標(biāo)簽才會(huì)輸出到頁(yè)面
v-else: 如果為false, 當(dāng)前標(biāo)簽才會(huì)輸出到頁(yè)面
v-show : 通過(guò)控制display 樣式來(lái)控制顯示/隱藏
v-for : 遍歷數(shù)組/對(duì)象
v-on : 綁定事件監(jiān)聽(tīng), 一般簡(jiǎn)寫為@
v-bind : 綁定解析表達(dá)式, 可以省略v-bind
v-model : 雙向數(shù)據(jù)綁定
v-cloak : 防止閃現(xiàn), 與css 配合: [v-cloak] { display: none }

自定義指令

注冊(cè)全局指令

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

})

注冊(cè)局部指令

directives : {

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

el.innerHTML = binding.value.toupperCase()

}

1) 使用指令

v-my-directive='xxx'

Vue 實(shí)例生命周期

效果

- 生命周期流程圖

- vue 生命周期分析

初始化顯示

beforeCreate()

- created()
- beforeMount()
- mounted()

更新?tīng)顟B(tài): this.xxx = value

beforeUpdate()

- updated()

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

beforeDestory()

- destoryed()常用的生命周期方法mounted(): 發(fā)送ajax 請(qǐng)求, 啟動(dòng)定時(shí)器等異步任務(wù)beforeDestory(): 做收尾工作, 如: 清除定時(shí)器

第 2 章：Vue 組件化編程

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

模塊

- - 理解: 向外提供特定功能的 js 程序, 一般就是一個(gè)js 文件
  - 為什么: js 文件很多很復(fù)雜
  - 作用: 復(fù)用js, 簡(jiǎn)化js 的編寫, 提高js 運(yùn)行效率

組件

- - 理解: 用來(lái)實(shí)現(xiàn)局部(特定)功能效果的代碼集合(html/css/js/image…..)
  - 為什么: 一個(gè)界面的功能很復(fù)雜
  - 作用: 復(fù)用編碼, 簡(jiǎn)化項(xiàng)目編碼, 提高運(yùn)行效率

模塊化

當(dāng)應(yīng)用中的js 都以模塊來(lái)編寫的, 那這個(gè)應(yīng)用就是一個(gè)模塊化的應(yīng)用。

組件化

當(dāng)應(yīng)用中的功能都是多組件的方式來(lái)編寫的, 那這個(gè)應(yīng)用就是一個(gè)組件化的應(yīng)用,。

非單文件組件

- 模板編寫沒(méi)有提示
- 沒(méi)有構(gòu)建過(guò)程, 無(wú)法將ES6 轉(zhuǎn)換成ES5
- 不支持組件的CSS
- 真正開(kāi)發(fā)中幾乎不用

單文件組件

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

模板頁(yè)面

<template> 頁(yè)面模板

</template>

JS 模塊對(duì)象

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

computed: {}, components: {}

}

</script>

樣式

</style>

基本使用

引入組件
映射成標(biāo)簽
使用組件標(biāo)簽

第 3 章：使用 Vue 腳手架

初始化腳手架

說(shuō)明

Vue 腳手架是Vue 官方提供的標(biāo)準(zhǔn)化開(kāi)發(fā)工具（開(kāi)發(fā)平臺(tái)）。
最新的版本是 4.x。
文檔: https://cli.vuejs.org/zh/。

具體步驟

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

npm install -g @vue/cli

第二步：切換到你要?jiǎng)?chuàng)建項(xiàng)目的目錄，然后使用命令創(chuàng)建項(xiàng)目

vue create xxxx 第三步：?jiǎn)?dòng)項(xiàng)目

npm run serve

備注：

如出現(xiàn)下載緩慢請(qǐng)配置 npm 淘寶鏡像：		npm	config	set	registry
https://registry.npm.taobao.org

2. Vue 腳手架隱藏了所有webpack 相關(guān)的配置，若想查看具體的webpakc 配置，請(qǐng)執(zhí)行：vue inspect > output.js

模板項(xiàng)目的結(jié)構(gòu)

├── node_modules

├── public

│ ├── favicon.ico: 頁(yè)簽圖標(biāo)

│ └── index.html: 主頁(yè)面

├── src

│ ├── assets: 存放靜態(tài)資源

│ │ └── logo.png

│ │── component: 存放組件

│ │ └── HelloWorld.vue

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

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

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

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

├── package.json: 應(yīng)用包配置文件

├── README.md: 應(yīng)用描述文件

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

ref 與 props

ref

作用：用于給節(jié)點(diǎn)打標(biāo)識(shí)
讀取方式：this.$refs.xxxxxx

props

作用：用于父組件給子組件傳遞數(shù)據(jù)

讀取方式一: 只指定名稱

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

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

props: {

name: String, age: Number,

setNmae: Function

}

讀取方式三: 指定名稱/類型/必要性/默認(rèn)值

props: {

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

}

混入

Vue 插件是一個(gè)包含install 方法的對(duì)象
通過(guò)install 方法給Vue 或Vue 實(shí)例添加方法, 定義全局指令等

插件

Vue 插件是一個(gè)包含install 方法的對(duì)象
通過(guò)install 方法給Vue 或Vue 實(shí)例添加方法, 定義全局指令等

Todo-list 案例

組件化編碼流程（通用）

實(shí)現(xiàn)靜態(tài)組件：抽取組件，使用組件實(shí)現(xiàn)靜態(tài)頁(yè)面效果
展示動(dòng)態(tài)數(shù)據(jù)：

數(shù)據(jù)的類型、名稱是什么？
數(shù)據(jù)保存在哪個(gè)組件？ 3.交互——從綁定事件監(jiān)聽(tīng)開(kāi)始

Vue 中的自定義事件

綁定事件監(jiān)聽(tīng)

<Header @addTodo="addTodo"/>

或者

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

觸發(fā)事件

this.$emit('addTodo', todo)

全局事件總線理解

Vue 原型對(duì)象上包含事件處理的方法

$on(eventName, listener): 綁定自定義事件監(jiān)聽(tīng)
$emit(eventName, data): 分發(fā)自定義事件
$off(eventName): 解綁自定義事件監(jiān)聽(tīng)
$once(eventName, listener): 綁定事件監(jiān)聽(tīng), 但只能處理一次

所有組件實(shí)例對(duì)象的原型對(duì)象的原型對(duì)象就是Vue 的原型對(duì)象

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

全局事件總線

包含事件處理相關(guān)方法的對(duì)象(只有一個(gè))
所有的組件都可以得到

指定事件總線對(duì)象

new Vue({

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

Vue.prototype.$globalEventBus = this

}).$mount('#root')

- 綁定事件

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

- 分發(fā)事件

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

- 解綁事件

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

消息訂閱與發(fā)布理解

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

訂閱消息 --對(duì)應(yīng)綁定事件監(jiān)聽(tīng)
發(fā)布消息 --分發(fā)事件
取消消息訂閱 --解綁事件監(jiān)聽(tīng)

需要引入一個(gè)消息訂閱與發(fā)布的第三方實(shí)現(xiàn)庫(kù): PubSubJS

使用PubSubJS

在線文檔: https://github.com/mroderick/PubSubJS
下載: npm install -S pubsub-js
相關(guān)語(yǔ)法

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

過(guò)度與動(dòng)畫

效果

- vue 動(dòng)畫的理解操作css 的trasition 或animationvue 會(huì)給目標(biāo)元素添加/移除特定的class過(guò)渡的相關(guān)類名：xxx-enter-active: 指定顯示的transitionxxx-leave-active: 指定隱藏的transitionxxx-enter/xxx-leave-to: 指定隱藏時(shí)的樣式

基本過(guò)渡動(dòng)畫的編碼

在目標(biāo)元素外包裹<transition name="xxx">
定義class 樣式

指定過(guò)渡樣式: transition
指定隱藏時(shí)的樣式: opacity/其它

第 4 章：Vue 中的 ajax

解決開(kāi)發(fā)環(huán)境 Ajax 跨域問(wèn)題

使用代理服務(wù)器

github 用戶搜索案例

- 效果

- 接口地址

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

vue 項(xiàng)目中常用的 2 個(gè) Ajax 庫(kù)

axios

通用的Ajax 請(qǐng)求庫(kù), 官方推薦，使用廣泛

vue-resource

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

slot 插槽

效果

效果一（不使用插槽）：

效果二（默認(rèn)插槽）：

效果三（具名插槽）：

效果三（作用域插槽）：

理解

父組件向子組件傳遞帶數(shù)據(jù)的標(biāo)簽，當(dāng)一個(gè)組件有不確定的結(jié)構(gòu)時(shí), 就需要使用slot 技術(shù)，注意：插槽內(nèi)容是在父組件中編譯后, 再傳遞給子組件的。

第 5 章：vuex

理解 vuex

vuex 是什么

概念：專門在Vue 中實(shí)現(xiàn)集中式狀態(tài)（數(shù)據(jù)）管理的一個(gè)Vue 插件，對(duì)vue 應(yīng)用中多個(gè)組件的共享狀態(tài)進(jìn)行集中式的管理（讀/寫），也是一種組件間通信的方式，且適用于任意組件間通信。
Github 地址: https://github.com/vuejs/vuex

什么時(shí)候使用 Vuex

- - 多個(gè)組件依賴于同一狀態(tài)
  - 來(lái)自不同組件的行為需要變更同一狀態(tài)

案例

- Vuex 工作原理圖

vuex 核心概念和 APIstatevuex 管理的狀態(tài)對(duì)象它應(yīng)該是唯一的示例代碼：

actions

- - 值為一個(gè)對(duì)象，包含多個(gè)響應(yīng)用戶動(dòng)作的回調(diào)函數(shù)
  - 通過(guò)commit( )來(lái)觸發(fā)mutation 中函數(shù)的調(diào)用, 間接更新state
  - 如何觸發(fā)actions 中的回調(diào)？

在組件中使用: $store.dispatch('對(duì)應(yīng)的action 回調(diào)名') 觸發(fā)

- - 可以包含異步代碼（定時(shí)器, ajax 等等）
  - 示例代碼：

mutations

- - 值是一個(gè)對(duì)象，包含多個(gè)直接更新state 的方法
  - 誰(shuí)能調(diào)用mutations 中的方法？如何調(diào)用？

在action 中使用：commit('對(duì)應(yīng)的 mutations 方法名') 觸發(fā)

- - mutations 中方法的特點(diǎn)：不能寫異步代碼、只能單純的操作state
  - 示例代碼：

getters

- - 值為一個(gè)對(duì)象，包含多個(gè)用于返回?cái)?shù)據(jù)的函數(shù)
  - 如何使用？—— $store.getters.xxx
  - 示例代碼：

modules

- - 包含多個(gè)module
  - 一個(gè)module 是一個(gè)store 的配置對(duì)象
  - 與一個(gè)組件（包含有共享數(shù)據(jù)）對(duì)應(yīng)

第 6 章：vue-router

vue-router 的理解

vue 的一個(gè)插件庫(kù)，專門用來(lái)實(shí)現(xiàn)SPA 應(yīng)用

對(duì)SPA 應(yīng)用的理解

單頁(yè)Web 應(yīng)用（single page web application，SPA）。
整個(gè)應(yīng)用只有一個(gè)完整的頁(yè)面。
點(diǎn)擊頁(yè)面中的導(dǎo)航鏈接不會(huì)刷新頁(yè)面，只會(huì)做頁(yè)面的局部更新。
數(shù)據(jù)需要通過(guò)ajax 請(qǐng)求獲取。

路由的理解

什么是路由?

一個(gè)路由就是一組映射關(guān)系（key - value）
key 為路徑, value 可能是function 或component

路由分類

后端路由：理解：value 是function, 用于處理客戶端提交的請(qǐng)求。工作過(guò)程：服務(wù)器接收到一個(gè)請(qǐng)求時(shí), 根據(jù)請(qǐng)求路徑找到匹配的函數(shù)來(lái)處理請(qǐng)求, 返回響應(yīng)數(shù)據(jù)。前端路由：理解：value 是component，用于展示頁(yè)面內(nèi)容。工作過(guò)程：當(dāng)瀏覽器的路徑改變時(shí), 對(duì)應(yīng)的組件就會(huì)顯示。

基本路由

效果

- 總結(jié): 編寫使用路由的 3 步

定義路由組件
注冊(cè)路由
使用路由

嵌套（多級(jí)）路由

路由傳參

編程式路由導(dǎo)航

亚洲视频二区_亚洲欧洲日本天天堂在线观看_日韩一区二区在线观看_中文字幕不卡一区