《Vue.js3Web開發(fā)案例教程（在線實(shí)訓(xùn)版）》 課件全套 溫謙 01 Web前端開發(fā)概述 - 18 ES6基礎(chǔ)知識(shí)

vue.js

2024.7vue.js第1章

Web前端開發(fā)概述

Web開發(fā)簡史基于前后端分離模式的Web開發(fā)Vue.js的特性MVVM（Model-View-ViewModel）模式Vue.js的核心思想Vue.js開發(fā)中常用的工具安裝Vue.jsDEMO（猜一個(gè)介于1和100之間的整數(shù)）第1章

Web前端開發(fā)概述

第1章

Web前端開發(fā)概述Web開發(fā)簡史早期階段服務(wù)器端模板階段服務(wù)器端MVC時(shí)代前后端分離時(shí)代第1章

Web前端開發(fā)概述基于前后端分離模式的Web開發(fā)從提供內(nèi)容到提供服務(wù)轉(zhuǎn)變

傳統(tǒng)互聯(lián)網(wǎng)3個(gè)特點(diǎn)：使用場景固定且局限“內(nèi)容”為主“服務(wù)”局限于特定領(lǐng)域

移動(dòng)互聯(lián)網(wǎng)3個(gè)特點(diǎn)：使用場景觸達(dá)社會(huì)每個(gè)?落更多事物被連接到云端海量“服務(wù)”

對技術(shù)上的3個(gè)要求：客戶端需求復(fù)雜化，大量應(yīng)用流行，對用戶體驗(yàn)的期望提高?？蛻舳虽秩境蔀椤皠傂琛??？蛻舳顺绦虿坏貌痪邆渫暾纳芷?、分層架構(gòu)和技術(shù)棧第1章

Web前端開發(fā)概述從“單一網(wǎng)站”到“多終端應(yīng)用”

特點(diǎn)：服務(wù)器端通過API輸出數(shù)據(jù)，剝離“視圖”。Web客戶端變成獨(dú)立開發(fā)和部署的程序，不再是服務(wù)?端Web程序中的“前端”層。每個(gè)客戶端都傾向于擁有專門為自己量身打造、可被自己掌控的API網(wǎng)站。

在移動(dòng)時(shí)代，一個(gè)應(yīng)用往往需要適配不同的終端形態(tài)：桌面應(yīng)用：傳統(tǒng)的Windows應(yīng)用、Mac應(yīng)用移動(dòng)應(yīng)用：iOS、安卓應(yīng)用Web：通過瀏覽器訪問的應(yīng)用超級(jí)APP：以微信小程序?yàn)榇淼某?jí)APP，成為新的應(yīng)用程序平臺(tái)。第1章

Web前端開發(fā)概述Vue.js與MVVM模式vue.js的特性輕量級(jí)數(shù)據(jù)綁定指令組件化管理插件化開發(fā)完整的工具鏈第1章

Web前端開發(fā)概述MVVM（Model-View-ViewModel）模式包括3個(gè)核心部分：Model：模型，核心的業(yè)務(wù)邏輯產(chǎn)生的數(shù)據(jù)對象，例如從數(shù)據(jù)庫取出的數(shù)據(jù)，并做特定處理后得到的數(shù)據(jù)。View：視圖，即用戶界面。ViewModel：視圖模型，用于鏈接匹配模型和視圖之間的專用模型。第1章

Web前端開發(fā)概述Vue.js的核心思想包括兩點(diǎn)：數(shù)據(jù)的雙向綁定，View和Model之間不直接溝通，而是通過ViewModel這個(gè)橋梁進(jìn)行交互。使用“聲明式”的編程理念第1章

Web前端開發(fā)概述Vue.js開發(fā)中常用的工具：Chrome瀏覽器VSCode文本編輯器命令行控制臺(tái)目前常見的瀏覽器內(nèi)核有Trident、Gecko、Webkit、Blink這4種。瀏覽器內(nèi)核說明Trident代表瀏覽器是IE，IE內(nèi)核還被用在眾多國內(nèi)互聯(lián)網(wǎng)公司推出的雙核瀏覽器中，用作兼容模式Webkit代表瀏覽器是Safari、舊版的ChromeBlink代表瀏覽器是Chrome、Opera、新版的EdgeGecko代表瀏覽器是Firefox第1章

Web前端開發(fā)概述安裝Vue.js<scriptsrc="/ajax/libs/vue/3.2.19/vue.global.js"></script>第1章

Web前端開發(fā)概述上手實(shí)踐：第一個(gè)Vue.js程序第1章

Web前端開發(fā)概述DEMO第1章

Web前端開發(fā)概述

Web開發(fā)簡史基于前后端分離模式的Web開發(fā)Vue.js的特性MVVM（Model-View-ViewModel）模式Vue.js的核心思想Vue.js開發(fā)中常用的工具安裝Vue.jsDEMO（猜一個(gè)介于1和100之間的整數(shù)）請看第2章——

Vue開發(fā)入門vue.js

2024.7vue.js第2章

Vue開發(fā)入門

Vue應(yīng)用實(shí)例DEMOVue實(shí)例的生命周期DEMO（猜數(shù)字）第2章

Vue開發(fā)入門

第2章

Vue開發(fā)入門Vue應(yīng)用實(shí)例文本插值方法屬性屬性綁定插入HTML片段根vue實(shí)例，具體語法形式如下：const

app=Vue.createApp({

//選項(xiàng)對象

});第2章

Vue開發(fā)入門DEMO第2章

Vue開發(fā)入門Vue實(shí)例的生命周期beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeUnmountunmounted第2章

Vue開發(fā)入門DEMO第2章

Vue開發(fā)入門

Vue應(yīng)用實(shí)例DEMOVue實(shí)例的生命周期DEMO（猜數(shù)字）請看第3章——

計(jì)算屬性與偵聽器vue.js

2024.7vue.js第3章

計(jì)算屬性與偵聽器計(jì)算屬性DEMO偵聽器DEMO對數(shù)組的偵聽替換數(shù)組可以被偵聽到使用深度偵聽DEMO總結(jié)第3章

計(jì)算屬性與偵聽器

第3章

計(jì)算屬性與偵聽器計(jì)算屬性定義計(jì)算屬性計(jì)算屬性的緩存特性第3章

計(jì)算屬性與偵聽器DEMO第3章

計(jì)算屬性與偵聽器偵聽器偵聽器的應(yīng)用場景攔截操作耗時(shí)操作偵聽器的基本用法深度偵聽偵聽對象時(shí)獲取對象原值使用immediate參數(shù)第3章

計(jì)算屬性與偵聽器DEMO第3章

計(jì)算屬性與偵聽器對數(shù)組的偵聽標(biāo)準(zhǔn)方法修改數(shù)組可以被偵聽到push()尾部添加pop()尾部刪除unshift()頭部添加shift()頭部刪除splice()刪除、添加、替換sort()排序reverse()逆序第3章

計(jì)算屬性與偵聽器替換數(shù)組可以被偵聽到filter()

過濾concat()

拼接slice()從已有的數(shù)組中返回選定的元素第3章

計(jì)算屬性與偵聽器使用深度偵聽可以偵聽到數(shù)組的某些變化：直接通過下標(biāo)的方式去修改數(shù)組，例如vm.items[5]=newValue。直接通過修改數(shù)組的length屬性的方式，例如vm.items.length=10。第3章

計(jì)算屬性與偵聽器DEMO第3章

計(jì)算屬性與偵聽器總結(jié)：如果徹底替換為一個(gè)新的數(shù)組，那么可以被偵聽到。如果偵聽器已通過“{deep:true}”設(shè)置為“深度偵聽”的，那么當(dāng)修改對象元素的屬性時(shí)，可以被偵聽到。如果是數(shù)組本身被修改，也可以被偵聽到。雖然通過length屬性可以修改數(shù)組長度，但盡量不要這樣修改，建議改用其他標(biāo)準(zhǔn)方法顯示數(shù)組長度的變化。第3章

計(jì)算屬性與偵聽器計(jì)算屬性DEMO偵聽器DEMO對數(shù)組的偵聽替換數(shù)組可以被偵聽到使用深度偵聽DEMO總結(jié)請看第4章——

控制頁面的CSS樣式vue.js

2024.7vue.js第4章

控制頁面的CSS樣式

綁定class屬性DEMO綁定style屬性DEMO第4章

控制頁面的CSS樣式

第4章

控制頁面的CSS樣式綁定class屬性對象方式綁定class屬性將class屬性與對象變量綁定以數(shù)組方式綁定class屬性動(dòng)態(tài)改變class屬性值在數(shù)組中使用對象第4章

控制頁面的CSS樣式DEMO第4章

控制頁面的CSS樣式綁定style屬性以對象方式綁定style屬性將style屬性與對象變量綁定以數(shù)組方式綁定style屬性動(dòng)態(tài)改變style屬性值第4章

控制頁面的CSS樣式DEMO第4章

控制頁面的CSS樣式

綁定class屬性DEMO綁定style屬性DEMO請看第5章——

事件處理vue.js

2024.7vue.js第5章

事件處理

標(biāo)準(zhǔn)DOM中的事件事件對象使用Vue.js處理事件DEMODEMO（監(jiān)視鼠標(biāo)移動(dòng)）事件修飾符DEMO修飾符使用說明按鍵修飾符DEMO第5章

事件處理

第5章

事件處理標(biāo)準(zhǔn)DOM中的事件事件與事件流事件對象第5章

事件處理事件對象標(biāo)準(zhǔn)DOM類型讀/寫說明altKeyBoolean讀寫按下ALT鍵則為true，否則為falsebuttonInteger讀寫鼠標(biāo)事件，值對應(yīng)按下的鼠標(biāo)鍵，詳見6.4.1節(jié)cancelableBoolean只讀是否可以取消事件的默認(rèn)行為stopPropagation()FunctionN/A可以調(diào)用該方法來阻止事件向上冒泡clientXInteger只讀鼠標(biāo)在客戶端區(qū)域（當(dāng)前窗口）的水平坐標(biāo)，不包括工具欄、滾動(dòng)條等clientYInteger只讀鼠標(biāo)在客戶端區(qū)域（當(dāng)前窗口）的垂直坐標(biāo)，不包括工具欄、滾動(dòng)條等ctrlKeyBoolean只讀按下Ctrl鍵則為true，否則為falserelatedTargetElement只讀鼠標(biāo)所離開的元素relatedTargetElement只讀鼠標(biāo)正在進(jìn)入的元素第5章

事件處理事件對象標(biāo)準(zhǔn)DOM類型讀/寫說明charCodeInteger只讀按下按鍵的Unicode值keyCodeInteger讀寫keypress時(shí)為0，其余為按下按鍵的數(shù)字代號(hào)。detailInteger只讀鼠標(biāo)按鈕點(diǎn)擊的次數(shù)preventDefault()FunctionN/A可以調(diào)用該方法來阻止事件的默認(rèn)行為screenXInteger只讀鼠標(biāo)相對于屏幕的水平坐標(biāo)screenYInteger只讀鼠標(biāo)相對于屏幕的垂直坐標(biāo)shiftKeyBoolean只讀按下Shift鍵則為true，否則為falsetargetElement只讀引起事件的元素/對象typeString只讀事件的名稱第5章

事件處理事件對象瀏覽器支持的事件種類是非常多了，可以分為幾類：用戶界面事件：涉及與BOM交互的通用瀏覽器事件。焦點(diǎn)事件：在元素獲得或者失去焦點(diǎn)時(shí)觸發(fā)的事件。鼠標(biāo)事件：使用鼠標(biāo)在頁面上執(zhí)行某些操作時(shí)觸發(fā)的事件。滾輪事件：使用鼠標(biāo)滾輪時(shí)觸發(fā)的事件。輸入事件：向文檔中輸入文本時(shí)觸發(fā)的事件。鍵盤事件：使用鍵盤在頁面上執(zhí)行某些操作時(shí)觸發(fā)的事件。輸入法事件：使用某些輸入法時(shí)觸發(fā)的事件。移動(dòng)設(shè)備出現(xiàn)以后，又增加了“觸摸”事件。第5章

事件處理使用Vue.js處理事件以內(nèi)聯(lián)方式響應(yīng)事件事件處理方法在Vue.js中使用事件對象第5章

事件處理DEMO第5章

事件處理動(dòng)手練習(xí)：監(jiān)視鼠標(biāo)移動(dòng)案例結(jié)合了一下本章前面學(xué)到的幾個(gè)知識(shí)點(diǎn)：1.鼠標(biāo)事件的處理2.事件對象中獲取信息3.計(jì)算屬性4.將計(jì)算屬性綁定到了元素的CSS樣式上。第5章

事件處理DEMO第5章

事件處理事件修飾符.stop.self.capture.once.prevent第5章

事件處理DEMO第5章

事件處理修飾符使用說明獨(dú)立使用事件修飾符<!--只有修飾符--><formv-on:submit.prevent></form>串聯(lián)使用事件修飾符<!--修飾符可以串聯(lián)--><av-on:click.stop.prevent="doThat"></a>第5章

事件處理按鍵修飾符與按鍵相關(guān)的3個(gè)事件keydownkeypresskeyup按鍵名系統(tǒng)修飾符.ctrl.alt.shift.meta鼠標(biāo)按鈕修飾符.left：鼠標(biāo)左鍵被按下.right：鼠標(biāo)右鍵被按下.middle：鼠標(biāo)中間鍵被按下按鍵名說明.enter回車鍵.tab制表符.delete捕獲“刪除”和“退格”鍵.esc退出鍵.space空格鍵.up上鍵.down下鍵.left左鍵.right右鍵第5章

事件處理DEMO第5章

事件處理

標(biāo)準(zhǔn)DOM中的事件事件對象使用Vue.js處理事件DEMODEMO（監(jiān)視鼠標(biāo)移動(dòng)）事件修飾符DEMO修飾符使用說明按鍵修飾符DEMO請看第6章——

表單綁定vue.js

2024.7vue.js主講：溫謙第6章

表單綁定輸入文本的綁定DEMO選擇類表單元素的綁定DEMO修飾符DEMO第6章

表單綁定

第6章

表單綁定輸入文本的綁定文本框多行文本框第6章

表單綁定DEMO第6章

表單綁定選擇類表單元素的綁定單選按鈕復(fù)選框下拉框多選列表框鍵值對綁定第6章

表單綁定DEMO第6章

表單綁定修飾符.lazy修飾符.number修飾符.trim修飾符第6章

表單綁定DEMO第6章

表單綁定輸入文本的綁定DEMO選擇類表單元素的綁定DEMO修飾符DEMO請看第7章——

結(jié)構(gòu)渲染vue.js

2024.7vue.js主講：溫謙第7章

結(jié)構(gòu)渲染條件渲染指令v-ifDEMO列表渲染指令v-forDEMO第7章

結(jié)構(gòu)渲染

第7章

結(jié)構(gòu)渲染條件渲染指令v-ifv-if與v-elsev-else-ifv-if與v-show第7章

結(jié)構(gòu)渲染DEMO第7章

結(jié)構(gòu)渲染列表渲染指令v-for基本列表迭代對象數(shù)組對象屬性列表數(shù)值范圍數(shù)組更新檢測v-for中的key屬性有何作用v-for與v-if一同使用時(shí)的注意事項(xiàng)第7章

結(jié)構(gòu)渲染DEMO第7章

結(jié)構(gòu)渲染條件渲染指令v-ifDEMO列表渲染指令v-forDEMO請看第8章——

網(wǎng)頁匯率計(jì)算器和番茄鐘vue.js

2024.7vue.js主講：溫謙第8章

網(wǎng)頁匯率計(jì)算器和番茄鐘DEMO（網(wǎng)頁匯率計(jì)算器）番茄鐘狀態(tài)圖DEMO（番茄鐘）第8章

網(wǎng)頁匯率計(jì)算器和番茄鐘

第8章

網(wǎng)頁匯率計(jì)算器和番茄鐘案例一：網(wǎng)頁匯率計(jì)算器第8章

網(wǎng)頁匯率計(jì)算器和番茄鐘DEMO第8章

網(wǎng)頁匯率計(jì)算器和番茄鐘案例二：番茄鐘本案例用到的幾個(gè)知識(shí)點(diǎn)：class屬性的綁定條件渲染v-if循環(huán)渲染v-for事件處理數(shù)據(jù)綁定v-model字體圖標(biāo)fontAwesome音頻播放器第8章

網(wǎng)頁匯率計(jì)算器和番茄鐘番茄鐘狀態(tài)圖出發(fā)狀態(tài)動(dòng)作到達(dá)狀態(tài)停止?fàn)顟B(tài)開始計(jì)時(shí)狀態(tài)停止?fàn)顟B(tài)編輯編輯狀態(tài)計(jì)時(shí)狀態(tài)停止停止?fàn)顟B(tài)計(jì)時(shí)狀態(tài)暫停暫停狀態(tài)暫停狀態(tài)開始計(jì)時(shí)狀態(tài)暫停狀態(tài)停止停止?fàn)顟B(tài)暫停狀態(tài)編輯編輯狀態(tài)編輯狀態(tài)保存停止?fàn)顟B(tài)編輯狀態(tài)取消停止?fàn)顟B(tài)編輯狀態(tài)取消暫停狀態(tài)第8章

網(wǎng)頁匯率計(jì)算器和番茄鐘DEMO第8章

網(wǎng)頁匯率計(jì)算器和番茄鐘DEMO（網(wǎng)頁匯率計(jì)算器）番茄鐘狀態(tài)圖DEMO（番茄鐘）請看第9章——

組件基礎(chǔ)vue.js

2024.7vue.js主講：溫謙第9章

組件基礎(chǔ)自定義組件與HTML標(biāo)記DEMO全局組件與局部組件DEMO第9章

組件基礎(chǔ)

第9章

組件基礎(chǔ)自定義組件與HTML標(biāo)記組件的名稱組件的屬性組件的內(nèi)容在組件中處理事件第9章

組件基礎(chǔ)DEMO第9章

組件基礎(chǔ)全局組件與局部組件使用范圍全局組件：可以在頁面中任何位置使用局部組件：只能在定義Vue應(yīng)用實(shí)例中使用，不能再其他位置使用，否則就無法生效定義組件的方法全局組件：可以使用app.component(tagName,options)定義全局組件局部組件：可以通過Vue應(yīng)用實(shí)例中component屬性定義局部組件第9章

組件基礎(chǔ)DEMO第9章

組件基礎(chǔ)自定義組件與HTML標(biāo)記DEMO全局組件與局部組件DEMO請看第10章——

單文件組件vue.js

2024.7vue.js第10章

單文件組件基礎(chǔ)知識(shí)DEMO安裝VueCLI腳手架工具項(xiàng)目目錄結(jié)構(gòu)DEMO（投票頁面）單頁應(yīng)用和多頁應(yīng)用DEMO第10章

單文件組件

第10章

單文件組件基礎(chǔ)知識(shí)每一個(gè)文件都是以.vue結(jié)尾的，并由template、script和style這3個(gè)部分，分別用于定義這個(gè)組件的結(jié)構(gòu)、邏輯和樣式。遵循了“高內(nèi)聚、低耦合”的思想，對開發(fā)效率的提升有很大的幫助。第10章

單文件組件DEMO第10章

單文件組件安裝VueCLI腳手架工具安裝淘寶鏡像命令如下：npminstall-gcnpm--registry=安裝vue-cli腳手架：cnpminstall@vue/cli-g注：生產(chǎn)環(huán)境中，一般會(huì)對代碼進(jìn)行處理：合并和壓縮第10章

單文件組件VueCLIv5.0.8?Pleasepickapreset:(Usearrowkeys)>Default([Vue3]babel,eslint)Default([Vue2]babel,eslint)Manuallyselectfeatures創(chuàng)建完之后，進(jìn)入項(xiàng)目目錄，運(yùn)行npmrunserve命令，待運(yùn)行完成之后，會(huì)給出一個(gè)訪問地址，用瀏覽器訪問即可，默認(rèn)是：http://localhost:8080/。注：組合鍵“Ctrl+C”可以終止服務(wù)器的運(yùn)行。這是一個(gè)菜單，使用鍵盤上的方向鍵可以上下移動(dòng)左側(cè)的大于號(hào)，在三個(gè)選項(xiàng)中進(jìn)行選擇，默認(rèn)選中的是第1個(gè)選項(xiàng)：Default([Vue3]babel,eslint)。我們直接按回車鍵確認(rèn)，即可選中第1個(gè)選項(xiàng)。第10章

單文件組件

項(xiàng)目目錄結(jié)構(gòu)：第10章

單文件組件動(dòng)手實(shí)踐：投票頁面第10章

單文件組件DEMO第10章

單文件組件單頁應(yīng)用和多頁應(yīng)用單頁面多頁面頁面結(jié)構(gòu)一個(gè)頁面+許多模塊的組件很多完整頁面體驗(yàn)效果頁面切換流暢，體驗(yàn)效果佳頁面切換慢，網(wǎng)速不好的時(shí)候，體驗(yàn)效果很不好資源文件組件公共的資源只需要加載一次每個(gè)頁面都要加載一次公共資源路由模式可以使用hash，也可以使用history普通鏈接跳轉(zhuǎn)適用場景對體驗(yàn)效果和流暢度有較高要求的應(yīng)用不利于SEO（搜索引擎收錄，可借助服務(wù)器端渲染技術(shù)優(yōu)化SEO）適用于對SEO要求較高的應(yīng)用內(nèi)容更新相關(guān)組件的切換，即局部更新整體HTML的切換相關(guān)成本前期開發(fā)成本較高，后期維護(hù)較為容易前期開發(fā)成本低，后期維護(hù)就比較麻煩，可能一個(gè)功能需要改很多地方第10章

單文件組件DEMO第10章

單文件組件基礎(chǔ)知識(shí)DEMO安裝VueCLI腳手架工具項(xiàng)目目錄結(jié)構(gòu)DEMO（投票頁面）單頁應(yīng)用和多頁應(yīng)用DEMO請看第11章——

AJAX與axios（上）vue.js

2024.7vue.js第11章AJAX與Axios（上）AJAX基礎(chǔ)概念A(yù)JAX技術(shù)的好處AJAX傳輸數(shù)據(jù)的方式AJAX的組成部分用原生方法獲取異步數(shù)據(jù)DEMO第11章

AJAX與Axios（上）

第11章

AJAX與Axios（上）AJAX的基本概念第11章

AJAX與Axios（上）AJAX技術(shù)的好處：減輕服務(wù)器的負(fù)擔(dān)，加快瀏覽速度帶來更好的用戶體驗(yàn)基于標(biāo)準(zhǔn)化并被廣泛支持的技術(shù)，不需要下載插件或小程序促進(jìn)頁面呈現(xiàn)與數(shù)據(jù)分離第11章

AJAX與Axios（上）AJAX傳輸數(shù)據(jù)的方式：一種是在服務(wù)器上直接生成HTML文檔的片段，然后傳遞到瀏覽器上，進(jìn)行局部更新。另一種是服務(wù)器上生成的是數(shù)據(jù)，而不是文檔，但是絕對大多數(shù)都是用JSON數(shù)據(jù)格式，而不是XML數(shù)據(jù)格式。第11章

AJAX與Axios（上）AJAX的組成部分技術(shù)在AJAX中扮演的角色JavaScriptJavaScript是通用的腳本語言，用來嵌入在某種應(yīng)用之中。Ajax應(yīng)用程序是使用JavaScript編寫的。CSSCSS為Web頁面元素提供了可視化樣式的定義方法。Ajax應(yīng)用中，用戶界面的樣式可以通過CSS獨(dú)立修改。DOM通過JavaScript修改DOM，Ajax應(yīng)用程序可以在運(yùn)行時(shí)改變用戶界面，或者局部更新頁面中的某個(gè)節(jié)點(diǎn)。XMLHttpRequest對象XMLHttpRequest對象允許開發(fā)人員從Web服務(wù)器上獲取數(shù)據(jù)。數(shù)據(jù)的格式通常是JSON、XML或者文本。第11章

AJAX與Axios（上）Ajax的組成部分第11章

AJAX與Axios（上）用原生方法獲取異步數(shù)據(jù)letxmlHttp=newXMLHttpRequest();xmlHttp.open("GET","http://demo-api.geekfun.website/vue/ajax-test.aspx",true);xmlHttp.onreadystatechange=()=>{if(xmlHttp.readyState==4&&xmlHttp.status==200)this.msg=xmlHttp.responseText;};xmlHttp.send(null);第11章AJAX與Axios（上）DEMO第11章

AJAX與Axios（上）AJAX基礎(chǔ)概念A(yù)JAX技術(shù)的好處AJAX傳輸數(shù)據(jù)的方式AJAX的組成部分用原生方法獲取異步數(shù)據(jù)DEMO請繼續(xù)學(xué)習(xí)第11章——

AJAX與Axios（下）vue.js

2024.7vue.js主講：溫謙第11章AJAX與Axios（下）認(rèn)識(shí)AxiosAxios的基礎(chǔ)用法DEMOGET與POSTDEMO嵌套請求與并發(fā)請求DEMOAxios的進(jìn)階用法實(shí)例的相關(guān)配置錯(cuò)誤處理和攔截器DEMO實(shí)現(xiàn)自動(dòng)提示的文本框模擬百度的“數(shù)據(jù)加載中”效果第11章

AJAX與Axios（下）

第11章AJAX與Axios（下）認(rèn)識(shí)Axios如果使用VueCLI腳手架工具創(chuàng)建的項(xiàng)目，可以使用npm安裝Axios：npminstallaxios--save如果為了調(diào)試一些簡單頁面，也可以直接在頁面中引入axios.js文件，或者直接使用CDN：<scriptsrc="/axios/dist/axios.min.js"></script>第11章AJAX與Axios（下）Axios的基礎(chǔ)用法importAxiosfrom'axios'Axios.get(url[,config]).then()Axios.post(url[,data[,config]]).then()第11章AJAX與Axios（下）DEMO第11章AJAX與Axios（下）GET與POSTGET和POST區(qū)別POST請求參數(shù)的傳遞方式HTTP方法與RESTGETPOSTPUTDELETEOPTIONSHEADTRACECONNENT第11章AJAX與Axios（下）DEMO第11章AJAX與Axios（下）嵌套請求與并發(fā)請求并發(fā)請求：

Axios.all([Axios.get(get1),Axios.get(get2)]).then(Axios.spread((Res1,Res2)=>{console.log(Res1,Res2)}))嵌套請求：

//外層Axios.get(URL).then(//內(nèi)層(response)=>Axios.get(URL,參數(shù)).then((response)=>{

//請求成功后要執(zhí)行的內(nèi)容}))第11章AJAX與Axios（下）DEMO第11章AJAX與Axios（下）Axios的進(jìn)階用法創(chuàng)建實(shí)例其語法如下：constaxios=axios.create({baseURL:'http://localhost:8080',timeout:1000,//設(shè)置超時(shí)時(shí)長。默認(rèn)請求未返回超過一秒，接口就超時(shí)了,//其他配置項(xiàng)……});第11章AJAX與Axios（下）實(shí)例的相關(guān)配置配置項(xiàng)舉例說明url'/user'用于請求服務(wù)器的URLmethod'get'創(chuàng)建請求時(shí)使用的方法，還可以是'post','put','patch','delete',默認(rèn)是getbaseURL'http://localhost:8080'將自動(dòng)加在url前面，除非url是一個(gè)絕對URLheaders{'content-type':'application/x-www-form-urlencoded'}是即將被發(fā)送的自定義請求頭params{id:1}請求參數(shù)拼接在url后面data{id:1}請求參數(shù)放在請求體里timeout1000指定請求超時(shí)的毫秒數(shù)(0表示無超時(shí)時(shí)間)，如果請求花費(fèi)了超過timeout的時(shí)間，請求將被中斷，為了不阻塞后面要執(zhí)行的內(nèi)容responseType'json'表示希望服務(wù)器響應(yīng)的數(shù)據(jù)類型，還可以是'arraybuffer','blob','document','text','stream'，默認(rèn)是json第11章AJAX與Axios（下）錯(cuò)誤處理響應(yīng)異常請求異常攔截器請求攔截器響應(yīng)攔截器第11章AJAX與Axios（下）實(shí)例：實(shí)現(xiàn)自動(dòng)提示的文本框第11章AJAX與Axios（下）DEMO第11章AJAX與Axios（下）練習(xí)：模擬百度的“數(shù)據(jù)加載中”效果第11章AJAX與Axios（下）DEMO第11章

AJAX與Axios（下）認(rèn)識(shí)AxiosAxios的基礎(chǔ)用法DEMOGET與POSTDEMO嵌套請求與并發(fā)請求DEMOAxios的進(jìn)階用法實(shí)例的相關(guān)配置錯(cuò)誤處理和攔截器DEMO實(shí)現(xiàn)自動(dòng)提示的文本框模擬百度的“數(shù)據(jù)加載中”效果請看第12章——

過渡動(dòng)畫vue.js

2024.7vue.js第12章

過渡動(dòng)畫CSS過渡DEMO單元素過渡transition組件過渡的類名DEMODEMO（可折疊的多級(jí)菜單）列表過渡DEMODEMO（待辦事項(xiàng)）第12章

過渡動(dòng)畫

第12章

過渡動(dòng)畫CSS過渡CSS提供了transition屬性來實(shí)現(xiàn)過渡動(dòng)畫效果，使用過渡需要滿足兩個(gè)條件：元素必須具有狀態(tài)變化必須為每個(gè)狀態(tài)設(shè)置不同的樣式第12章

過渡動(dòng)畫DEMO第12章

過渡動(dòng)畫單元素過渡在下列情形中，可以給任何單元素和組件添加進(jìn)入/離開過渡效果：條件渲染(使用v-if)條件展示(使用v-show)動(dòng)態(tài)組件組件根節(jié)點(diǎn)第12章

過渡動(dòng)畫transition組件過渡的類名第12章

過渡動(dòng)畫DEMO第12章

過渡動(dòng)畫動(dòng)手實(shí)踐：可折疊的多級(jí)菜單第12章

過渡動(dòng)畫DEMO第12章

過渡動(dòng)畫列表過渡使用transition-group組件時(shí)還需要注意以下幾點(diǎn)：內(nèi)部元素總是需要提供唯一的key屬性值。CSS過渡的類將會(huì)應(yīng)用在內(nèi)部的元素中，而不是這個(gè)組件本身。第12章

過渡動(dòng)畫DEMO第12章

過渡動(dòng)畫動(dòng)手實(shí)踐：待辦事項(xiàng)第12章

過渡動(dòng)畫DEMO第12章

過渡動(dòng)畫CSS過渡DEMO單元素過渡transition組件過渡的類名DEMODEMO（可折疊的多級(jí)菜單）列表過渡DEMODEMO（待辦事項(xiàng)）請看第13章——

路由vueroutervue.js

2024.7vue.js第13章

路由VueRouter基本用法命名路由：使用name屬性給路由命名DEMO路由動(dòng)態(tài)匹配DEMO編程式導(dǎo)航重命名和別名進(jìn)階用法——導(dǎo)航守衛(wèi)DEMO進(jìn)階用法——路由元信息DEMOhistory模式第13章

路由VueRouter

第13章

路由VueRouter基本用法安裝：npminstallvue-router命名路由：使用name屬性給路由命名

{path:'/',name:'Home',component:()=>import('../views/home.vue'),}第13章

路由VueRouterDEMO第13章

路由VueRouter路由動(dòng)態(tài)匹配路由參數(shù)多路由參數(shù)與偵聽路由查詢參數(shù)捕獲所有路由模式匹配路徑$route.params/product/:id/product/1{id:1}/product/:page/:tag/product/1/0{page:1,tag:0}{path:'/:pathMatch(.*)*',name:'Page404',component:()=>import('../views/page404.vue')}第13章

路由VueRouterDEMO第13章

路由VueRouter編程式導(dǎo)航//字符串router.push('home')//對象router.push({path:'home'})//命名的路由router.push({name:'product',params:{id:'123'}})//帶查詢參數(shù)，變成/register?plan=privaterouter.push({path:'register',query:{plan:'private'}})constid='123'router.push({name:'product',params:{id}})//->/product/123router.push({path:`/product/${id}`})//->/product/123//這里的params不生效router.push({path:'/product',params:{id}})//->/product第13章

路由VueRouter重定向和別名重定向別名constroutes=[{path:'/a',redirect:'/b'},//字符串路徑{path:'/a',redirect:{name:'foo'}},//路徑對象{path:'/a',redirect:to=>{//接收目標(biāo)路由作為參數(shù)//返回重定向的字符串路徑/路徑對象}}

]{path:'/product/:id',name:'ProductDetails',component:()=>import('../views/product-detail.vue'),

alias:'/product/details/:id'}第13章

路由VueRouter進(jìn)階用法——導(dǎo)航守衛(wèi)全局前置守衛(wèi)：router.beforeEach(function(to,from,next){

//要執(zhí)行的內(nèi)容

})每個(gè)守衛(wèi)方法接收三個(gè)參數(shù)：to:Route：即將要進(jìn)入的路由from:Route：當(dāng)前導(dǎo)航正要離開的路由next:Function：一定要調(diào)用該方法來resolve這個(gè)鉤子。執(zhí)行效果依賴next方法的調(diào)用參數(shù)。next()next(false)next('/')或者next({path:'/'})next(error)路由中配置前置守衛(wèi)：{path:'/product',name:'Product',component:Product,

beforeEnter:(to,from,next)=>{//...}}第13章

路由VueRouterDEMO第13章

路由VueRouter進(jìn)階用法——路由元信息constroutes=[{path:'/product',name:'Product',component:()=>import('../views/product.vue'),

meta:{requireLogin:true//為true表示需要登錄才能訪問}},...省略...];第13章

路由VueRouterDEMO第13章

路由VueRouterhistory模式import{createRouter,createWebHistory}from'vue-router';constrouter=newVueRouter({

history:createWebHistory(),routes:[...]})hash模式history模式http://localhost:8080/#/producthttp://localhost:8080/product第13章

路由VueRouter基本用法命名路由：使用name屬性給路由命名DEMO路由動(dòng)態(tài)匹配DEMO編程式導(dǎo)航重命名和別名進(jìn)階用法——導(dǎo)航守衛(wèi)DEMO進(jìn)階用法——路由元信息DEMOhistory模式請看第14章——

狀態(tài)管理vue.js

2024.7vue.js第14章

狀態(tài)管理store模式DEMOVuex的基本用法DEMO單文件組件中使用VuexDEMOaction與mutationDEMODEMO（改進(jìn)版的“待辦事項(xiàng)”（TodoList））第14章

狀態(tài)管理

第14章

狀態(tài)管理store模式編寫整體頁面結(jié)構(gòu)創(chuàng)建store對象使用store對象第14章

狀態(tài)管理DEMO第14章

狀態(tài)管理Vuex的基本用法conststore=Vuex.createStore({state:{},getters:{},mutations:{

},actions:{},modules:{}});狀態(tài)管理流程圖第14章

狀態(tài)管理DEMO第14章

狀態(tài)管理單文件組件中使用Vuex使用VueCLI腳手架工具創(chuàng)建項(xiàng)目，完成后，目錄結(jié)構(gòu)如下：第14章

狀態(tài)管理DEMO第14章

狀態(tài)管理action與mutation：在action提交的是mutation，而不是直接變更狀態(tài)。action可以包含任意異步操作，而mutation不能包含異步操作。改造store對象：ordinary：平常的狀態(tài)waiting：向服務(wù)器發(fā)起了下單請求，正在等待結(jié)果success：下單成功error：下單失敗第14章

狀態(tài)管理DEMO第14章

狀態(tài)管理動(dòng)手練習(xí)：改進(jìn)版的“待辦事項(xiàng)”（TodoList）第14章

狀態(tài)管理DEMO第14章

狀態(tài)管理store模式DEMOVuex的基本用法DEMO單文件組件中使用VuexDEMOaction與mutationDEMODEMO（改進(jìn)版的“待辦事項(xiàng)”（TodoList））請看第15章——

案例—“豪華版”待辦事項(xiàng)vue.js

2024.7vue.js第15章

案例—“豪華版”待辦事項(xiàng)用到的知識(shí)點(diǎn)使用vueCLI搭建項(xiàng)目實(shí)現(xiàn)頁面結(jié)構(gòu)和樣式組件化核心功能的實(shí)現(xiàn)實(shí)現(xiàn)各項(xiàng)功能DEMO（“豪華版”待辦事項(xiàng)）第15章

案例—“豪華版”待辦事項(xiàng)

第15章

案例—“豪華版”待辦事項(xiàng)用到的知識(shí)點(diǎn)：class屬性的綁定條件渲染列表渲染數(shù)據(jù)綁定事件處理計(jì)算屬性和偵聽器組件表單狀態(tài)管理Vuex拖拽插件vuedraggable字體圖標(biāo)FontAwesome第15章

案例—“豪華版”待辦事項(xiàng)使用vueCLI搭建項(xiàng)目實(shí)現(xiàn)頁面結(jié)構(gòu)和樣式組件化核心功能的實(shí)現(xiàn)定義Todo類使用Vuex管理任務(wù)列表實(shí)現(xiàn)各項(xiàng)功能添加待辦事項(xiàng)顯示任務(wù)列表動(dòng)態(tài)化篩選項(xiàng)修改任務(wù)狀態(tài)編輯任務(wù)刪除任務(wù)調(diào)整任務(wù)順序持久化任務(wù)第15章

案例—“豪華版”待辦事項(xiàng)DEMO第15章

案例—“豪華版”待辦事項(xiàng)用到的知識(shí)點(diǎn)使用vueCLI搭建項(xiàng)目實(shí)現(xiàn)頁面結(jié)構(gòu)和樣式組件化核心功能的實(shí)現(xiàn)實(shí)現(xiàn)各項(xiàng)功能DEMO（“豪華版”待辦事項(xiàng)）請看第16章——

案例—網(wǎng)頁圖片剪裁器vue.js

2024.7vue.js第16章

案例—網(wǎng)頁圖片裁剪器用戶的使用場景頁面HTML結(jié)構(gòu)和CSS樣式實(shí)現(xiàn)核心邏輯DEMO（網(wǎng)頁圖片裁剪器）第16章

案例—網(wǎng)頁圖片裁剪器

第16章

案例—網(wǎng)頁圖片裁剪器用戶的使用場景如下：可以選取自己電腦上的一張圖片用于剪裁。選取要剪裁的圖片區(qū)域，即設(shè)定一個(gè)矩形的“選區(qū)”?？梢哉{(diào)整選區(qū)的位置?？梢哉{(diào)整選區(qū)的大小。確定選區(qū)后，按下回車鍵，在頁面上會(huì)顯示剪裁出的新圖片。第16章

案例—網(wǎng)頁圖片裁剪器頁面HTML結(jié)構(gòu)和CSS樣式實(shí)現(xiàn)核心邏輯定義基礎(chǔ)類定義Cropper類創(chuàng)建（繪制）選區(qū)移動(dòng)選區(qū)調(diào)整選區(qū)大小裁剪圖片選取操作總結(jié)使用vue.js處理交互初始化圖像繪制選區(qū)移動(dòng)選區(qū)調(diào)整選區(qū)大小將手柄封裝為組件最終裁剪第16章

案例—網(wǎng)頁圖片裁剪器DEMO第16章

案例—網(wǎng)頁圖片裁剪器用戶的使用場景頁面HTML結(jié)構(gòu)和CSS樣式實(shí)現(xiàn)核心邏輯DEMO（網(wǎng)頁圖片裁剪器）請看第17章——

案例—電子商務(wù)網(wǎng)站vue.js

2024.7vue.js第17章

案例—電子商務(wù)網(wǎng)站設(shè)定基本目標(biāo)省略的功能介紹本案例的20個(gè)步驟文件首頁產(chǎn)品列表頁和加入購物車產(chǎn)品詳情頁和加入購物車訂單詳情頁訂單列表頁項(xiàng)目目錄結(jié)構(gòu)安裝BootstrapDE