《Vue.js3Web開發(fā)案例教程（在線實訓(xùn)版）》 課件 12 過渡動畫 -18 ES6基礎(chǔ)知識

vue.js

2024.7vue.js第12章

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

過渡動畫

第12章

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

過渡動畫DEMO第12章

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

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

過渡動畫DEMO第12章

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

過渡動畫DEMO第12章

過渡動畫列表過渡使用transition-group組件時還需要注意以下幾點：內(nèi)部元素總是需要提供唯一的key屬性值。CSS過渡的類將會應(yīng)用在內(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編程式導(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路由動態(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)容

})每個守衛(wèi)方法接收三個參數(shù)：to:Route：即將要進(jìn)入的路由from:Route：當(dāng)前導(dǎo)航正要離開的路由next:Function：一定要調(diào)用該方法來resolve這個鉤子。執(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路由動態(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)版的“待辦事項”（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)建項目，完成后，目錄結(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)管理動手練習(xí)：改進(jìn)版的“待辦事項”（TodoList）第14章

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

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

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

2024.7vue.js第15章

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

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

第15章

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

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

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

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

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

2024.7vue.js第16章

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

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

第16章

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

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

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

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

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

2024.7vue.js第17章

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

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

第17章

案例—電子商務(wù)網(wǎng)站本案例設(shè)定如下基本目標(biāo)：實現(xiàn)一個結(jié)構(gòu)完整的電子商務(wù)網(wǎng)站實現(xiàn)產(chǎn)品列表的展示頁面（產(chǎn)品列表頁）實現(xiàn)單一產(chǎn)品的顯示頁面（產(chǎn)品詳情頁）實現(xiàn)將一個產(chǎn)品“加入購物車”功能實現(xiàn)“確定下單”功能可以查看一個訂單的信息可以查看訂單列表模擬訂單的支付過程模擬遠(yuǎn)程API的處理邏輯模擬存在API調(diào)用失敗的情況使用localStorage實現(xiàn)本地存儲第17章

案例—電子商務(wù)網(wǎng)站本案例進(jìn)行了省略的功能：沒有實現(xiàn)調(diào)用后端API，但是通過JavaScript模擬異步調(diào)用沒有實現(xiàn)用戶的注冊、登錄、驗證等相關(guān)邏輯產(chǎn)品沒有分類產(chǎn)品和訂單列表沒有分頁展示購物車中的產(chǎn)品不能調(diào)整數(shù)量，及每種產(chǎn)品都只有一件第17章

案例—電子商務(wù)網(wǎng)站首先對這20個步驟做一介紹，使讀者對本案例的整體開發(fā)過程有所認(rèn)知。步驟編號案例文件夾名稱說明1geekfun-01-emptyVue-cli腳手架工具生成的基礎(chǔ)代碼2geekfun-02-router配置基本路由基本頁面3geekfun-03-bootstrap安裝Bootstrap4geekfun-04-products-html搭建產(chǎn)品列表頁的靜態(tài)文件5geekfun-05-products-vue動態(tài)化產(chǎn)品列表頁6geekfun-06-product-html搭建產(chǎn)品詳情頁的靜態(tài)文件7geekfun-07-product-vue動態(tài)化產(chǎn)品詳情頁8geekfun-08-loading耗時操作顯示提示框9geekfun-09-cart-html購物車的靜態(tài)視圖10geekfun-10-cart-moving使購物車可以移動第17章

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

步驟編號案例文件夾名稱說明11geekfun-11-add-to-cart加入購物車功能12geekfun-12-header-cart-count在頁頭顯示購物車中產(chǎn)品數(shù)量13geekfun-13-order-detail訂單詳情頁14geekfun-14-orders訂單列表15geekfun-15-check-out“確認(rèn)下單”功能16geekfun-16-pay“支付”功能17geekfun-17-404-redirect對訂單詳情頁和產(chǎn)品詳情頁顯示40418geekfun-18-nav-header制作響應(yīng)式的頁頭導(dǎo)航19geekfun-19-footer頁腳20geekfun-20-final-home-about首頁和關(guān)于我們頁面第17章

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