前端筆記 --- vue框架

基礎知識

指令的修飾符

計算屬性

watch偵聽器的寫法

Vue的生命周期

工程化開發&腳手架 VUE CLI

組件注冊的方式

scoped樣式沖突與原理

data

組件之間的關系和組件通信

v-model詳解

sync修飾符

Dom介紹

操作HTML標簽

總結

ref 和 $refs

$nextTick

自定義指令

安裝axios

安裝less

前端基于json設計臨時用的“接口”

插槽

1.默認插槽

2.后備內容（默認值）

3.具名插槽

4.作用域插槽（是插槽的一個傳參語法）

單頁應用程序（SPA）& 路由介紹

路由的基本使用

VueRouter的使用（5 + 2）

組件分類

路由模塊封裝

聲明式導航

定義

兩個類名

自定義類名

跳轉傳參

路由重定向

Vue路由-404

模式設置

編程式導航

兩種跳轉方式

跳轉傳參

跳轉方式一（通過路徑跳轉）：

跳轉方式二（通過name命名路由跳轉）：

嵌套二級路由（子路由）

返回上一頁

組件緩存

基于VueCli自定義創建項目

ESLint代碼規范

vuex

定義與作用

構建vuex[多組件數據共享]環境

創建一個空倉庫

提供&訪問vuex的數據（核心概念 --- state狀態）

核心概念：mutations

輔助函數 mapMutations

核心概念：actions

輔助函數：mapActions

核心概念：getters

分模塊

vant組件庫

Element組件庫

項目中的vw適配問題（開發移動端必須要考慮的）

商城項目學習

圖形驗證碼功能實現

api接口模塊

Toast輕提示

響應攔截器統一處理錯誤提示

登錄權證信息存儲

vuex持久化處理---storage存儲模塊

loading效果

基于全局前置守衛，進行頁面訪問攔截處理

搜索---歷史記錄管理功能實現

v-model實現組件數據父傳子（常用）

mixins混入

打包優化

利用ElmentUI組件實現的節流處理

基礎知識

創建一個Vue實例，

插值表達式，

響應式，

各種指令。。。

發請求都是異步的原因：發起請求為異步的主要原因是為了避免阻塞頁面的渲染和交互。如果前端發起請求是同步的，那么在請求返回之前，瀏覽器會一直等待，頁面就會被阻塞，用戶無法進行其他操作，這會給用戶帶來不好的體驗。

route獲取數據，router跳轉。

v-html：

自定義屬性且可以動態設置。

雙向綁定指令v-model ：可以讓數據與視圖進行雙向綁定

filter實現刪除操作：

methods: {del(id){this.booksList = this.booksList.filter(i => i.id !== id)console.log(id)}
}

unshift實現對數組元素的增加：

add(){if(!this.subject){alert('請輸入科目')return}if(typeof this.score !== "number"){alert('請輸入正確的數據')return}this.list.unshift({id: +new Date(),subject: this.subject,score: this.score})this.subject = ''this.score = ''
}

reduce實現對數據求和的計算

computed: {totalScore(){return this.list.reduce((sum,item) => sum + item.score,0)}
},

class：與css樣式有關

指令的修飾符

計算屬性

watch偵聽器的寫法

1.簡單寫法 ----> 監視簡單類型的變化

watch: {數據屬性名 (newValue, oldValue) {一些業務邏輯 或 異步操作。 },'對象.屬性名' (newValue, oldValue) {一些業務邏輯 或 異步操作。 }
}

2.完整寫法

watch: {// watch 完整寫法數據屬性名: {deep: true, // 深度監視(針對復雜類型)immediate: true, // 是否立刻執行一次handlerhandler (newValue) {console.log(newValue)}}
}

Vue的生命周期

問題：

解決：

生命周期函數（鉤子函數）：

VUE生命周期過程中，會自動運行一些函數，被稱為 [生命周期鉤子] 。讓開發者可以在【特定階段】運行自己的代碼。

工程化開發&腳手架 VUE CLI

看package.json文件：

創建項目的方法：

方法一：vue create 項目名（目前我的電腦只有命令提示符和Git Bath能獲取到全局vue，終端和WebStorm終端獲取不到）

方法二：npm create vue@latest

項目目錄介紹

根組件：App.vue

沒有安裝less依賴。

組件注冊的方式

局部注冊：只能在注冊的組件內使用

全局注冊：所有組件內都可以使用

注意：

組件名規范 --> 大駝峰命名法：如HmHeader

技巧：
一般都用局部注冊，如果發現確實是通用組件，再抽離到全局。

scoped樣式沖突與原理

data

組件之間的關系和組件通信

Props：

props 定義：組件上注冊的一些自定義屬性。

props校驗

非父子關系的通信

event bus 事件總線（拓展）（只是簡單場景用這個）

步驟：

例子：

發布方接收方

非父子通信-provide-inject（拓展）

v-model詳解

原理：

對v-model進行拆解

表單類組件封裝

表單類組件封裝 & v-model簡化代碼

sync修飾符

Dom介紹

DOM樹是一個層次結構，其中每個HTML標簽都可以視為一個節點。這些節點包括但不限于：

文檔節點：代表整個HTML文檔，通常以document對象表示。
元素節點：代表HTML中的標簽，例如<div>, <p>, <input>等。
文本節點：代表元素內的文本，例如<p>Hello, world!</p>中的"Hello, world!"。
屬性節點：代表元素的屬性，例如<img src="image.jpg">中的src屬性。

HTML標簽與DOM節點

操作HTML標簽

通過DOM API，我們可以訪問并操作這些元素節點：

獲取節點：

- document.getElementById('id')：根據ID獲取一個特定的元素節點。
- document.querySelector('selector')：使用CSS選擇器獲取第一個匹配的元素節點。
- document.querySelectorAll('selector')：使用CSS選擇器獲取所有匹配的元素節點。

創建節點：

- document.createElement('tagName')：創建一個新的元素節點。
- document.createTextNode('text')：創建一個新的文本節點。

插入節點：

- parentElement.appendChild(childNode)：向父節點添加一個新的子節點。
- parentElement.insertBefore(newNode, referenceNode)：在參考節點之前插入一個新節點。

修改節點：

- element.setAttribute('attr', 'value')：設置元素的屬性值。
- element.innerHTML = 'content'：更改元素內部的內容。

刪除節點：

- parentElement.removeChild(childNode)：從父節點中移除一個子節點。

總結

DOM提供了操作HTML文檔的API，而HTML標簽則是DOM樹中的元素節點。通過這些API，我們可以獲取、創建、修改和刪除這些節點，從而動態地改變網頁的內容和布局。

ref 和 $refs

作用：利用 ref 和 $refs 可以用于獲取dom元素，或 組件實例
特點：查找范圍 ---> 當前組件內（更精確穩定）

作用一：（獲取dom，即獲取HTML的各種標簽）

作用二：

$nextTick

vue的底層是異步dom更新的。

自定義指令

全局注冊

指令的值

需求：實現一個 color 指令 - 傳入不同的顏色，給標簽設置文字顏色。

總結：

自定義 v-loading 指令

安裝axios

npm install axios 或者 yarn add axios

然后再：import axios from 'axios'

axios請求都是異步的。

安裝less

npm install --save-dev less less-loader

less: 這是一個 CSS 預處理器，允許你使用變量、嵌套規則、混合、函數等特性來編寫更簡潔、可維護的 CSS 代碼。
less-loader: 這是一個 Webpack 加載器，用于將 .less 文件轉換為瀏覽器可以理解的 CSS。

npm install: 這是 npm (Node Package Manager) 的 install 命令，用于安裝 Node.js 包。
--save-dev: 這個選項告訴 npm 將安裝的包添加到 package.json 文件的 devDependencies 部分。這意味著這些包只在開發過程中需要，并不是生產環境必需的。
less: 這是要安裝的第一個包的名稱。
less-loader: 這是要安裝的第二個包的名稱。

前端基于json設計臨時用的“接口”

插槽

1.默認插槽

2.后備內容（默認值）

3.具名插槽

默認插槽無法滿足，需要使用具名插槽。

4.作用域插槽（是插槽的一個傳參語法）

單頁應用程序（SPA）& 路由介紹

路由的基本使用

VueRouter的使用（5 + 2）

npm install vue-router@3.6.5

組件分類

路由模塊封裝

好處：
拆分模塊，利于維護
快速引入組件：
基于 @ 指代 src 目錄，從 src目錄出發找組件

聲明式導航

定義

兩個類名

自定義類名

跳轉傳參

目標：在跳轉路由時，進行傳值。

方法一：

方法二：

兩種方法比較：

方法二補充：

路由重定向

Vue路由-404

模式設置

編程式導航

兩種跳轉方式

方法一：

上面的寫法分為簡寫和完整寫法。

方法二：

跳轉傳參

同樣是查詢參數傳參和動態路由傳參。

跳轉方式一（通過路徑跳轉）既可以使用查詢參數傳參也可以使用動態路由傳參。

跳轉方式二（通過路由名字跳轉）也是一樣的，既可以使用查詢參數傳參也可以使用動態路由傳參。

跳轉方式一（通過路徑跳轉）：

1.查詢參數傳參：

簡寫方式：

比如：

或者（完整寫法）

組件內參數的接收方式：

比如：

2.動態路由傳參：

第一步：先去配置動態路由

然后：

簡寫方式:

this.$router.push(`/路徑/參數值`)

或者（完整寫法）：

比如：

組件內參數的接收方式：

比如：

跳轉方式二（通過name命名路由跳轉）：

1.查詢參數傳參

參數接收方式：

2.動態路由傳參

第一步：先去配置動態路由

const router = new VueRouter({router: [...,{name: 'search',path: 'search/:words?',component: Search}]
})

然后

比如：

參數接收方式；

嵌套二級路由（子路由）

通過 children 配置項，可以配置嵌套子路由。

步驟：
第一步：在children配置項中，配規則

比如

第二步：準備二級路由出口

比如

返回上一頁

組件緩存

組件緩存keep-alive

舉例：

進入緩存的組件時會自動訪問生命周期鉤子函數：activated()

離開緩存的組件時會自動訪問生命周期鉤子函數：deactivated()

總結：

項目案例實現的步驟：

基于VueCli自定義創建項目

Linter：ESLint代碼規范

Vuex也可以勾上。

ESLint代碼規范

https://standardjs.com/rules-zhcn.html

JavaScript Standard Style (standardjs.com)

解決方法：

手動修正。。。

自動修正：裝插件，。。。。。

vuex

定義與作用

構建vuex[多組件數據共享]環境

創建一個空倉庫

npm install vuex@3

或者npm install vuex@3 -force

提供&訪問vuex的數據（核心概念 --- state狀態）

嚴格模式：

核心概念：mutations

傳參語法：

注意點：

輔助函數 mapMutations

核心概念：actions

輔助函數：mapActions

核心概念：getters

分模塊

模塊創建

訪問模塊中的state

訪問模塊中的getters

模塊中的mutation的調用語法

模塊中的action的調用語法

vant組件庫

第一步：

導入方式：

1.全部導入

2.按需導入（自動按需導入）

（npm i babel-plugin-import -D)

Element組件庫

安裝和使用請看官網！！！！！

項目中的vw適配問題（開發移動端必須要考慮的）

使用npm安轉插件：

npm i postcss-px-to-viewport@1.1.1 -D

商城項目學習

圖形驗證碼功能實現

api接口模塊

Toast輕提示

響應攔截器統一處理錯誤提示

登錄權證信息存儲

vuex持久化處理---storage存儲模塊

loading效果

基于全局前置守衛，進行頁面訪問攔截處理

搜索---歷史記錄管理功能實現

v-model實現組件數據父傳子（常用）

mixins混入

可提供在所有的Vue組件中可復用的一些數據或者方法或者生命周期函數。

導入方法：

打包優化

指令：

npm run build

首屏加載慢：單頁應用程序的缺點。

解決方法：（路由懶加載）

異步組件改造舉例：

------->

利用ElmentUI組件實現的節流處理

步驟

安裝 Lodash：用于節流處理。

npm install lodash --save

創建 Loading 實例：在請求攔截器中創建 Loading 實例，并在請求開始時顯示，請求結束時隱藏。
節流處理：使用 Lodash 的 throttle 函數來控制 Loading 的顯示和隱藏。

具體操作看wgxm項目。

Vue3

未完待續。。。