《Vue.js3Web開發(fā)案例教程（在線實(shí)訓(xùn)版）》 課件 07 結(jié)構(gòu)渲染 -11-b AJAX與Axios（下）

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一同使用時的注意事項(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ì)算器和番茄鐘案例二：番茄鐘本案例用到的幾個知識點(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á)狀態(tài)停止?fàn)顟B(tài)開始計(jì)時狀態(tài)停止?fàn)顟B(tài)編輯編輯狀態(tài)計(jì)時狀態(tài)停止停止?fàn)顟B(tài)計(jì)時狀態(tài)暫停暫停狀態(tài)暫停狀態(tài)開始計(jì)時狀態(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ǔ)知識DEMO安裝VueCLI腳手架工具項(xiàng)目目錄結(jié)構(gòu)DEMO（投票頁面）單頁應(yīng)用和多頁應(yīng)用DEMO第10章

單文件組件

第10章

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

單文件組件DEMO第10章

單文件組件安裝VueCLI腳手架工具安裝淘寶鏡像命令如下：npminstall-gcnpm--registry=安裝vue-cli腳手架：cnpminstall@vue/cli-g注：生產(chǎn)環(huán)境中，一般會對代碼進(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)行完成之后，會給出一個訪問地址，用瀏覽器訪問即可，默認(rèn)是：http://localhost:8080/。注：組合鍵“Ctrl+C”可以終止服務(wù)器的運(yùn)行。這是一個菜單，使用鍵盤上的方向鍵可以上下移動左側(cè)的大于號，在三個選項(xiàng)中進(jìn)行選擇，默認(rèn)選中的是第1個選項(xiàng)：Default([Vue3]babel,eslint)。我們直接按回車鍵確認(rèn)，即可選中第1個選項(xiàng)。第10章

單文件組件

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

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

單文件組件DEMO第10章

單文件組件單頁應(yīng)用和多頁應(yīng)用單頁面多頁面頁面結(jié)構(gòu)一個頁面+許多模塊的組件很多完整頁面體驗(yàn)效果頁面切換流暢，體驗(yàn)效果佳頁面切換慢，網(wǎng)速不好的時候，體驗(yàn)效果很不好資源文件組件公共的資源只需要加載一次每個頁面都要加載一次公共資源路由模式可以使用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ù)就比較麻煩，可能一個功能需要改很多地方第10章

單文件組件DEMO第10章

單文件組件基礎(chǔ)知識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)行時改變用戶界面，或者局部更新頁面中的某個節(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)識AxiosAxios的基礎(chǔ)用法DEMOGET與POSTDEMO嵌套請求與并發(fā)請求DEMOAxios的進(jìn)階用法實(shí)例的相關(guān)配置錯誤處理和攔截器DEMO實(shí)現(xiàn)自動提示的文本框模擬百度的“數(shù)據(jù)加載中”效果第11章

AJAX與Axios（下）

第11章AJAX與Axios（下）認(rèn)識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è)置超時時長。默認(rèn)請求未返回超過一秒，接口就超時了,//其他配置項(xiàng)……});第11章AJAX與Axios（下）實(shí)例的相關(guān)配置配置項(xiàng)舉例說明url'/user'用于請求服務(wù)器的URLmethod'get'創(chuàng)建請求時使用的方法，還可以是'post','put','patch','delete',默認(rèn)是getbaseURL'http://localhost:8080'將自動加在url前面，除非url是一個絕對URLheaders{'content-type':'application/x-www-form-urlencoded'}是即