《Vue.js3Web开发案例教程（在线实训版）》 课件 12 过渡动画 -18 ES6基础知识

vue.js

2024.7vue.js第12章

过渡动画CSS过渡DEMO单元素过渡transition组件过渡的类名DEMODEMO（可折叠的多级菜单）列表过渡DEMODEMO（待办事项）第12章

过渡动画

第12章

过渡动画CSS过渡CSS提供了transition属性来实现过渡动画效果，使用过渡需要满足两个条件：元素必须具有状态变化必须为每个状态设置不同的样式第12章

过渡动画DEMO第12章

过渡动画单元素过渡在下列情形中，可以给任何单元素和组件添加进入/离开过渡效果：条件渲染(使用v-if)条件展示(使用v-show)动态组件组件根节点第12章

过渡动画transition组件过渡的类名第12章

过渡动画DEMO第12章

过渡动画动手实践：可折叠的多级菜单第12章

过渡动画DEMO第12章

过渡动画列表过渡使用transition-group组件时还需要注意以下几点：内部元素总是需要提供唯一的key属性值。CSS过渡的类将会应用在内部的元素中，而不是这个组件本身。第12章

过渡动画DEMO第12章

过渡动画动手实践：待办事项第12章

过渡动画DEMO第12章

过渡动画CSS过渡DEMO单元素过渡transition组件过渡的类名DEMODEMO（可折叠的多级菜单）列表过渡DEMODEMO（待办事项）请看第13章——

路由vueroutervue.js

2024.7vue.js第13章

路由VueRouter基本用法命名路由：使用name属性给路由命名DEMO路由动态匹配DEMO编程式导航重命名和别名进阶用法——导航守卫DEMO进阶用法——路由元信息DEMOhistory模式第13章

路由VueRouter

第13章

路由VueRouter基本用法安装：npminstallvue-router命名路由：使用name属性给路由命名

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

路由VueRouterDEMO第13章

路由VueRouter路由动态匹配路由参数多路由参数与侦听路由查询参数捕获所有路由模式匹配路径$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'}})//带查询参数，变成/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=>{//接收目标路由作为参数//返回重定向的字符串路径/路径对象}}

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

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

路由VueRouter进阶用法——导航守卫全局前置守卫：router.beforeEach(function(to,from,next){

//要执行的内容

})每个守卫方法接收三个参数：to:Route：即将要进入的路由from:Route：当前导航正要离开的路由next:Function：一定要调用该方法来resolve这个钩子。执行效果依赖next方法的调用参数。next()next(false)next('/')或者next({path:'/'})next(error)路由中配置前置守卫：{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路由动态匹配DEMO编程式导航重命名和别名进阶用法——导航守卫DEMO进阶用法——路由元信息DEMOhistory模式请看第14章——

状态管理vue.js

2024.7vue.js第14章

状态管理store模式DEMOVuex的基本用法DEMO单文件组件中使用VuexDEMOaction与mutationDEMODEMO（改进版的“待办事项”（TodoList））第14章

状态管理

第14章

状态管理store模式编写整体页面结构创建store对象使用store对象第14章

状态管理DEMO第14章

状态管理Vuex的基本用法conststore=Vuex.createStore({state:{},getters:{},mutations:{

},actions:{},modules:{}});状态管理流程图第14章

状态管理DEMO第14章

状态管理单文件组件中使用Vuex使用VueCLI脚手架工具创建项目，完成后，目录结构如下：第14章

状态管理DEMO第14章

状态管理action与mutation：在action提交的是mutation，而不是直接变更状态。action可以包含任意异步操作，而mutation不能包含异步操作。改造store对象：ordinary：平常的状态waiting：向服务器发起了下单请求，正在等待结果success：下单成功error：下单失败第14章

状态管理DEMO第14章

状态管理动手练习：改进版的“待办事项”（TodoList）第14章

状态管理DEMO第14章

状态管理store模式DEMOVuex的基本用法DEMO单文件组件中使用VuexDEMOaction与mutationDEMODEMO（改进版的“待办事项”（TodoList））请看第15章——

案例—“豪华版”待办事项vue.js

2024.7vue.js第15章

案例—“豪华版”待办事项用到的知识点使用vueCLI搭建项目实现页面结构和样式组件化核心功能的实现实现各项功能DEMO（“豪华版”待办事项）第15章

案例—“豪华版”待办事项

第15章

案例—“豪华版”待办事项用到的知识点：class属性的绑定条件渲染列表渲染数据绑定事件处理计算属性和侦听器组件表单状态管理Vuex拖拽插件vuedraggable字体图标FontAwesome第15章

案例—“豪华版”待办事项使用vueCLI搭建项目实现页面结构和样式组件化核心功能的实现定义Todo类使用Vuex管理任务列表实现各项功能添加待办事项显示任务列表动态化筛选项修改任务状态编辑任务删除任务调整任务顺序持久化任务第15章

案例—“豪华版”待办事项DEMO第15章

案例—“豪华版”待办事项用到的知识点使用vueCLI搭建项目实现页面结构和样式组件化核心功能的实现实现各项功能DEMO（“豪华版”待办事项）请看第16章——

案例—网页图片剪裁器vue.js

2024.7vue.js第16章

案例—网页图片裁剪器用户的使用场景页面HTML结构和CSS样式实现核心逻辑DEMO（网页图片裁剪器）第16章

案例—网页图片裁剪器

第16章

案例—网页图片裁剪器用户的使用场景如下：可以选取自己电脑上的一张图片用于剪裁。选取要剪裁的图片区域，即设定一个矩形的“选区”。可以调整选区的位置。可以调整选区的大小。确定选区后，按下回车键，在页面上会显示剪裁出的新图片。第16章

案例—网页图片裁剪器页面HTML结构和CSS样式实现核心逻辑定义基础类定义Cropper类创建（绘制）选区移动选区调整选区大小裁剪图片选取操作总结使用vue.js处理交互初始化图像绘制选区移动选区调整选区大小将手柄封装为组件最终裁剪第16章

案例—网页图片裁剪器DEMO第16章

案例—网页图片裁剪器用户的使用场景页面HTML结构和CSS样式实现核心逻辑DEMO（网页图片裁剪器）请看第17章——

案例—电子商务网站vue.js

2024.7vue.js第17章

案例—电子商务网站设定基本目标省略的功能介绍本案例的20个步骤文件首页产品列表页和加入购物车产品详情页和加入购物车订单详情页订单列表页项目目录结构安装BootstrapDEMO（电子商务网站）第17章

案例—电子商务网站

第17章

案例—电子商务网站本案例设定如下基本目标：实现一个结构完整的电子商务网站实现产品列表的展示页面（产品列表页）实现单一产品的显示页面（产品详情页）实现将一个产品“加入购物车”功能实现“确定下单”功能可以查看一个订单的信息可以查看订单列表模拟订单的支付过程模拟远程API的处理逻辑模拟存在API调用失败的情况使用localStorage实现本地存储第17章

案例—电子商务网站本案例进行了省略的功能：没有实现调用后端API，但是通过JavaScript模拟异步调用没有实现用户的注册、登录、验证等相关逻辑产品没有分类产品和订单列表没有分页展示购物车中的产品不能调整数量，及每种产品都只有一件第17章

案例—电子商务网站首先对这20个步骤做一介绍，使读者对本案例的整体开发过程有所认知。步骤编号案例文件夹名称说明1geekfun-01-emptyVue-cli脚手架工具生成的基础代码2geekfun-02-router配置基本路由基本页面3geekfun-03-bootstrap安装Bootstrap4geekfun-04-products-html搭建产品列表页的静态文件5geekfun-05-products-vue动态化产品列表页6geekfun-06-product-html搭建产品详情页的静态文件7geekfun-07-product-vue动态化产品详情页8geekfun-08-loading耗时操作显示提示框9geekfun-09-cart-html购物车的静态视图10geekfun-10-cart-moving使购物车可以移动第17章

案例—电子商务网站

步骤编号案例文件夹名称说明11geekfun-11-add-to-cart加入购物车功能12geekfun-12-header-cart-count在页头显示购物车中产品数量13geekfun-13-order-detail订单详情页14geekfun-14-orders订单列表15geekfun-15-check-out“确认下单”功能16geekfun-16-pay“支付”功能17geekfun-17-404-redirect对订单详情页和产品详情页显示40418geekfun-18-nav-header制作响应式的页头导航19geekfun-19-footer页脚20geekfun-20-final-home-about首页和关于我们页面第17章

案例—电子商务网站