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

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（猜一個介于1和100之間的整數(shù)）第1章

Web前端開發(fā)概述

第1章

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

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

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

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

對技術上的3個要求：客戶端需求復雜化，大量應用流行，對用戶體驗的期望提高。客戶端渲染成為“剛需”?？蛻舳顺绦虿坏貌痪邆渫暾纳芷凇⒎謱蛹軜嫼图夹g棧第1章

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

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

在移動時代，一個應用往往需要適配不同的終端形態(tài)：桌面應用：傳統(tǒng)的Windows應用、Mac應用移動應用：iOS、安卓應用Web：通過瀏覽器訪問的應用超級APP：以微信小程序為代表的超級APP，成為新的應用程序平臺。第1章

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

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

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

Web前端開發(fā)概述Vue.js開發(fā)中常用的工具：Chrome瀏覽器VSCode文本編輯器命令行控制臺目前常見的瀏覽器內(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ā)概述上手實踐：第一個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（猜一個介于1和100之間的整數(shù)）請看第2章——

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

2024.7vue.js第2章

Vue開發(fā)入門

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

Vue開發(fā)入門

第2章

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

app=Vue.createApp({

//選項對象

});第2章

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

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

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

Vue開發(fā)入門

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

計算屬性與偵聽器vue.js

2024.7vue.js第3章

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

計算屬性與偵聽器

第3章

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

計算屬性與偵聽器DEMO第3章

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

計算屬性與偵聽器DEMO第3章

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

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

過濾concat()

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

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

計算屬性與偵聽器DEMO第3章

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

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

控制頁面的CSS樣式vue.js

2024.7vue.js第4章

控制頁面的CSS樣式

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

控制頁面的CSS樣式

第4章

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

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

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

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

控制頁面的CSS樣式

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

事件處理vue.js

2024.7vue.js第5章

事件處理

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

事件處理

第5章

事件處理標準DOM中的事件事件與事件流事件對象第5章

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

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

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

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

事件處理DEMO第5章

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

事件處理DEMO第5章

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

事件處理DEMO第5章

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

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

事件處理DEMO第5章

事件處理

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

表單綁定vue.js

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

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

表單綁定

第6章

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

表單綁定DEMO第6章

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

表單綁定DEMO第6章

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

表單綁定DEMO第6章

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

結構渲染vue.js

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

結構渲染條件渲染指令v-ifDEMO列表渲染指令v-forDEMO第7章

結構渲染

第7章

結構渲染條件渲染指令v-ifv-if與v-elsev-else-ifv-if與v-show第7章

結構渲染DEMO第7章

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

結構渲染DEMO第7章

結構渲染條件渲染指令v-ifDEMO列表渲染指令v-forDEMO請看第8章——

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

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

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

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

第8章

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

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

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

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

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

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

組件基礎vue.js

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

組件基礎自定義組件與HTML標記DEMO全局組件與局部組件DEMO第9章

組件基礎

第9章

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

組件基礎DEMO第9章

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

組件基礎DEMO第9章

組件基礎自定義組件與HTML標記DEMO全局組件與局部組件DEMO請看第10章——

單文件組件vue.js

2024.7vue.js第10章

單文件組件基礎知識DEMO安裝VueCLI腳手架工具項目目錄結構DEMO（投票頁面）單頁應用和多頁應用DEMO第10章

單文件組件

第10章

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

單文件組件DEMO第10章

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

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

單文件組件

項目目錄結構：第10章

單文件組件動手實踐：投票頁面第10章

單文件組件DEMO第10章

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

單文件組件DEMO第10章

單文件組件基礎知識DEMO安裝VueCLI腳手架工具項目目錄結構DEMO（投票頁面）單頁應用和多頁應用DEMO請看第11章——

AJAX與axios（上）vue.js

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

AJAX與Axios（上）

第11章

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

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

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

AJAX與Axios（上）AJAX的組成部分技術在AJAX中扮演的角色JavaScriptJavaScript是通用的腳本語言，用來嵌入在某種應用之中。Ajax應用程序是使用JavaScript編寫的。CSSCSS為Web頁面元素提供了可視化樣式的定義方法。Ajax應用中，用戶界面的樣式可以通過CSS獨立修改。DOM通過JavaScript修改DOM，Ajax應用程序可以在運行時改變用戶界面，或者局部更新頁面中的某個節(jié)點。XMLHttpRequest對象XMLHttpRequest對象允許開發(fā)人員從Web服務器上獲取數(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基礎概念AJAX技術的好處AJAX傳輸數(shù)據(jù)的方式AJAX的組成部分用原生方法獲取異步數(shù)據(jù)DEMO請繼續(xù)學習第11章——

AJAX與Axios（下）vue.js

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

AJAX與Axios（下）

第11章AJAX與Axios（下）認識Axios如果使用VueCLI腳手架工具創(chuàng)建的項目，可以使用npm安裝Axios：npminstallaxios--save如果為了調試一些簡單頁面，也可以直接在頁面中引入axios.js文件，或者直接使用CDN：<scriptsrc="/axios/dist/axios.min.js"></script>第11章AJAX與Axios（下）Axios的基礎用法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的進階用法創(chuàng)建實例其語法如下：constaxios=axios.create({baseURL:'http://localhost:8080',timeout:1000,//設置超時時長。默認請求未返回超過一秒，接口就超時了,//其他配置項……});第11章AJAX與Axios（下）實例的相關配置配置項舉例說明url'/user'用于請求服務器的URLmethod'get'創(chuàng)建請求時使用的方法，還可以是'post','put','patch','delete',默認是getbaseURL'http://localhost:8080'將自動加在url前面，除非url是一個絕對URLheaders{'content-type':'application/x-www-form-urlencoded'}是即將被發(fā)送的自定義請求頭params{id:1}請求參數(shù)拼接在url后面data{id:1}請求參數(shù)放在請求體里timeout1000指定請求超時的毫秒數(shù)(0表示無超時時間)，如果請求花費了超過timeout的時間，請求將被中斷，為了不阻塞后面要執(zhí)行的內(nèi)容responseType'json'表示希望服務器響應的數(shù)據(jù)類型，還可以是'arraybuffer','blob','document','text','stream'，默認是json第11章AJAX與Axios（下）錯誤處理響應異常請求異常攔截器請求攔截器響應攔截器第11章AJAX與Axios（下）實例：實現(xiàn)自動提示的文本框第11章AJAX與Axios（下）DEMO第11章AJAX與Axios（下）練習：模擬百度的“數(shù)據(jù)加載中”效果第11章AJAX與Axios（下）DEMO第11章

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

過渡動畫vue.js

2024.7vue.js第12章

過渡動畫CSS過渡DEMO單元素過渡transition組件過渡的類名DEMODEMO（可折疊的多級菜單）列表過渡DEMODEMO（待辦事項）第12章

過渡動畫

第12章

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

過渡動畫DEMO第12章

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

過渡動畫transition組件過渡的類名第12章

過渡動畫DEMO第12章

過渡動畫動手實踐：可折疊的多級菜單第12章

過渡動畫DEMO第12章

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

過渡動畫DEMO第12章

過渡動畫動手實踐：待辦事項第12章

過渡動畫DEMO第12章

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

路由vueroutervue.js

2024.7vue.js第13章

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

路由VueRouter

第13章

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

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

路由VueRouterDEMO第13章

路由VueRouter路由動態(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編程式導航//字符串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=>{//接收目標路由作為參數(shù)//返回重定向的字符串路徑/路徑對象}}

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

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

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

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

})每個守衛(wèi)方法接收三個參數(shù)：to:Route：即將要進入的路由from:Route：當前導航正要離開的路由next:Function：一定要調用該方法來resolve這個鉤子。執(zhí)行效果依賴next方法的調用參數(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進階用法——路由元信息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路由動態(tài)匹配DEMO編程式導航重命名和別名進階用法——導航守衛(wèi)DEMO進階用法——路由元信息DEMOhistory模式請看第14章——

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

2024.7vue.js第14章

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

狀態(tài)管理

第14章

狀態(tài)管理store模式編寫整體頁面結構創(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)建項目，完成后，目錄結構如下：第14章

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

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

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

狀態(tài)管理動手練習：改進版的“待辦事項”（TodoList）第14章

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

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

案例—“豪華版”待辦事項vue.js

2024.7vue.js第15章

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

案例—“豪華版”待辦事項

第15章

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

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

案例—“豪華版”待辦事項DEMO第15章

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

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

2024.7vue.js第16章

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

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

第16章

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

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

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

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

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

2024.7vue.js第17章

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