Vue.js3前端开发基础及项目化应用 课件 单元4、5 组件进阶、过渡和动画

Vue.js前端开发基础及项目化应用单元四

组件进阶目录组件生命周期Teleport项目4弹出式登录框组件生命周期组件生命周期：组件的创建、挂载、更新到销毁的一系列过程生命周期钩子函数钩子函数：在系统消息触发时立即被系统调用的函数生命周期钩子函数：Vue所提供的组件内置函数，它会在组件生命周期某个阶段进入某个状态时立即自动执行组件生命周期各个阶段，主要钩子函数的执行过程组件生命周期组件生命周期的4个阶段：创建、挂载、更新和销毁创建阶段的钩子函数beforeCreate：在组件事件和生命周期钩子函数初始化完成之后被调用

created：在组件选项配置完成之后被调用挂载阶段的钩子函数beforeMount：在内存中生成虚拟DOM结构之后被调用mounted：虚拟DOM结构替换挂载点内元素之后被调用组件生命周期更新阶段beforeUpdate：在响应式数据发生改变，且虚拟DOM结构更新之后被调用updated：在更新挂载点内元素之后被调用销毁阶段beforeUnmount：组件实例被销毁之前调用unmounted：组件实例被销毁之后调用组件生命周期实例创建作用：创建阶段对组件进行了初始化，完成了组件实例创建工作步骤：对组件事件和生命周期钩子函数进行初始化，之后立即调用beforeCreate函数对组件选项的配置进行初始化，之后立即调用created函数组件生命周期实例创建（续）示例：组件实例创建过程中生命周期钩子函数的应用组件生命周期示例运行结果页面挂载作用：挂载阶段根据组件的数据和模板结构，完成将组件实例挂载到页面中的工作步骤基于数据和模板结构，在内存中生成DOM结构，即虚拟DOM结构，之后立即调用beforeMount函数用虚拟DOM结构替换挂载点内元素，之后立即调用mounted函数组件生命周期页面挂载（续）示例：将组件实例挂载到页面的过程中生命周期钩子函数的应用组件生命周期示例运行结果数据更新作用：每当组件的数据发生变化时，Vue会更新虚拟DOM结构步骤：根据数据变化，更新虚拟DOM结构，之后立即调用beforeUpdate函数将虚拟DOM结构更新的部分，重新渲染到页面中，之后立即调用updated函数组件生命周期数据更新（续）示例：组件实例数据更新过程中生命周期钩子函数的应用组件生命周期示例运行结果组件实例销毁步骤：组件实例被销毁之前，Vue会自动调用beforeUnmount函数，此时组件实例依然保持全部的功能在组件实例被销毁之后，Vue会立即调用unmounted函数组件生命周期组件实例销毁（续）示例：组件实例销毁过程中生命周期钩子函数的应用组件生命周期示例运行结果组件生命周期基本用法作用：将组件模板结构的部分内容“传送”到该组件渲染区域之外的地方，而不受当前组件布局结构的影响使用方法：在组件模板结构中，增加teleport组件元素，将要控制位置的页面元素作为其子元素，同时设置其属性to为目标位置Teleport内置组件语法例如：Teleport内置组件实现模态框效果Teleport内置组件模态框效果结合组件使用Teleport特点：Teleport所改变的是组件模板结构中部分内容的渲染位置，并不影响组件原有数据以及与其他组件间的逻辑关系Teleport内置组件示例：构建模态框组件，并使用Teleport保证组件置于页面顶层Teleport内置组件示例运行结果Teleport内置组件需求描述在历史名城网站页面右上角显示“注册|登录”，单击“登录”，弹出登录框，它将保持在页面的最上层位置。该登录框包括用户名和密码输入框，以及“登录”和“取消”按钮，单击“登录”或“取消”按钮时登录框窗体关闭项目4弹出式登录框实现思路使用表单（form）元素构建用户登录窗体。将用户登录窗体封装成一个模态框组件，通过props选项实现使用者控制登录框的弹出和关闭的功能，同时利用Teleport组件优化登录框的全屏渲染效果项目4弹出式登录框项目4弹出式登录框任务4-1构建页面布局

项目4弹出式登录框任务4-2创建登录框组件定义登录框组件的模板结构定义和注册组件同步训练请编写Vue应用程序，要求单击页面上“我要注册”按钮，弹出注册框，该注册框包含4个输入框（用户名、密码、邮箱和手机号码）和两个按钮（“注册”和“取消”），单击“注册”按钮时关闭注册框，单击“取消”按钮时，清空所有输入信息单元小结组件从创建到销毁的一系列过程被称为组件的生命周期。在组件生命周期各个节点执行的函数，被称为生命周期钩子函数，它是Vue所提供的组件内置函数，会在组件在生命周期某个阶段进入某个状态时立即自动执行。组件生命周期包括4个阶段：创建、挂载、更新和销毁。对应地我们将生命周期钩子函数分为4组：（1）beforeCreate，created；（2）beforeMount，mounted；（3）beforeUpdate，updated；（4）beforeUnmount，unmounted。Telport内置组件的作用是将组件模板结构的部分内容“传送”到该组件渲染区域之外的地方，而不受当前组件布局结构的影响。Vue.js前端开发基础及项目化应用单元五

过渡和动画目录认识过渡和动画实现过渡和动画多个元素和组件过渡列表过渡项目5会员中心页面认识过渡和动画Vue过渡和动画：利用Vue内置组件Transition和TransitionGroup，在页面组件中元素显示状态发生改变时，元素不会直接显示和隐藏，而是伴随一个过渡或动画效果，该效果的核心原理是CSS的类（class）选择器认识过渡和动画回顾CSS3的transition和animation属性相关知识样式属性预设值均包括none（无属性）、all（所有属性）和特定属性，默认值为all时间曲线都可以利用cubic_x0002_bezier函数自行定义，也可以使用预设值，包括linear（匀速）、ease（开始慢、中间快、结束慢）、ease-in（开始慢）、ease-out（结束慢）、ease-in-out（开始慢、结束慢），默认值为ease。animation属性通过@keyframes属性逐步改变元素的CSS样式来绘制动画的，@keyframes属性值通常采用百分比方式定义实现过渡和动画Transition组件实现过渡和动画的方式：当它包裹一般元素或通过默认插槽传递的组件时，被包裹者就可应用进入和离开的动画效果特点：只能包裹单个元素或组件进入和离开状态触发方式由v-if指令控制元素的插入和删除操作。由v-show指令切换元素的显示和隐藏状态。由内置组件Component控制组件间的动态切换。实现过渡和动画Transition组件的语法Transition组件的常用属性name：用于自动生成过渡样式类（class）名appear：表示是否在初始渲染时使用过渡，默认值为falsecss：表示是否使用过渡样式类，默认值为truetype：用于指定过渡事件类型，侦听过渡何时结束，有效值为“transition”和“animation”mode：表示控制离开/进入过渡的模式，有效值为“out-in”和“in-out”，默认当前元素和新元素的过渡动作同时进行duration：指定过渡的持续时间实现过渡和动画

Transition实现过渡和动画的原理当插入或删除被包裹在Transition组件内的元素时，Vue首先判断目标元素是否应用了一个CSS3过渡/动画效果。如果是，则会在某个时间点自动添加或移除对应的样式类，否则，将会调用对应的JavaScript钩子函数。如果上述情况均不存在，则下一帧将立即执行插入或删除元素的操作实现过渡和动画过渡和动画样式类6个样式类生效的时间点实现过渡和动画Transition结合CSS3实现过渡示例采用过渡方式，实现字符串“HelloWorld”的显示和隐藏当单击“change”按钮时，字符串在右侧出现并向左移，以慢速结束，过程中字体颜色变为红色；再次单击“change”按钮时，字符串向右移动一段距离后消失，但变化速度与左移过程的不太一样，过程中字体颜色变为红色示例运行结果实现过渡和动画

Transition结合CSS3实现动画示例以动画方式，实现字符串“HelloWorld”的显示和隐藏在过渡示例基础上，修改style部分实现过渡和动画Transition结合JavaScript钩子函数JavaScript钩子函数（1）before-enter：进入过渡/动画开始前执行的方法（2）enter：进入过渡/动画过程中执行的方法（3）after-enter：进入过渡/动画完成后执行的方法（4）enter-cancelled：进入过渡/动画取消时执行的方法（5）before-leave：离开过渡/动画开始前执行的方法（6）leave：离开过渡/动画过程中执行的方法（7）after-leave：离开过渡/动画完成后执行的方法（8）leave-cancelled：离开过渡/动画取消时执行的方法实现过渡和动画示例：同时使用JavaScript钩子函数和CSS3，实现div区块显示和隐藏的动态过渡效果当单击“change”按钮时，div区块逐渐出现，以先慢后快再慢的速度，沿x轴移动200px停止。同时，在控制台上依次显示钩子函数handleBeforeEnter、handleEnter和handleAfterEnter执行的输出信息。当再次单击“change”按钮时，div区块再沿x轴移动100px，且颜色逐渐变成蓝色，最终消失示例运行结果实现过渡和动画实现过渡和动画示例：仅使用JavaScript钩子函数，实现div区块显示和隐藏的动态动画效果

基于JavaScript钩子函数实现过渡和动画多个不同类型的元素实现方式：利用v-if/v-else进行元素间的切换，使这些元素应用同一个过渡效果示例多个元素过渡单击“隐藏城市列表”按钮时，城市列表会逐渐消失，之后逐渐显示“无数据”提示信息；单击“显示城市列表”按钮时，“无数据”提示信息则逐渐消失，城市列表会逐渐恢复显示示例运行结果多个元素过渡多个相同类型的元素实现方式：通过设置key属性值区分相同类型的不同元素，实现过渡效果示例多个元素过渡分别单击3个按钮，当前显示的信息会逐渐消失，与按钮名称对应的另一个信息会逐渐显示出来示例运行结果多个元素过渡多个组件实现方式：利用内置组件Component的is属性，轮流绑定应用过渡效果的组件名，实现过渡效果实现方法多个组件过渡列表过渡在一个元素或组件被插入和移出v-for列表时应用过渡，从而实现动态列表效果TransitionGroup组件作用：用于在组件更改时添加动态效果的组件，它可以包裹多个组件或元素语法

属性tag属性：表示使用何种元素对TransitionGroup组件内的多个元素进行内层包裹，默认使用span元素。v-move样式类：用于设置当key对应的元素位置发生变化时的样式列表过渡利用TransitionGroup组件实现列表过渡的步骤创建一个包含列表的元素为每一项设置一个key使用v-for指令循环渲染列表中的每一项使用TransitionGroup组件将这个容器包裹起来为这个TransitionGroup组件设置一个name定义列表项的进入和离开过渡效果的CSS样式列表过渡利用TransitionGroup组件实现列表过渡(续)示例：列表应用过渡效果

列表过渡显示一组数字，单击“新增”按钮时，在数字列表的随机位置上会增加一个数字；单击“移除”按钮时，则会随机地移除一个数字。当增加/删除操作发生在列表中间的某个位置上时，会看到整个列表调整的过渡效果示例运行结果列表过渡需求描述会员中心页面包括左侧导航栏和右侧内容，通过导航栏切换到“我的账户”和“我的游记”，并带有过渡效果；“我的账户”中可以动态增加或删除“邮箱”字段，同样也要求使用过渡效果项目5会员中心页面实现思路采用局部组件，构建会员中心页面的“我的账户”和“我的游记”两个部分由于“我的账户”和“我的游记”组件切换时，同一时间只需渲染其中一个，符合Transition组件应用条件，而“我的账户”表单中“邮箱”字段增加/删除所形成的列表，则需要TransitionGroup组件才能实现过渡效果项目5会员中心页面任务5-1构建页面布局

项目5会员中心页面任务5-2创建局部组件

项目5会员中心页面定义组件模板任务5-2创建局部组件（续）项目5会员中心页面定义局部组件同步训练请编写一个登录页面，其中包含3个输入框：用户名、密码和验证码。只有当用户输入密码错误时，才要求输入验证码，并使用Transition组件实现验证码输入框显示的过渡效果单元小结在Vue中实现过渡和动画是指利用Vue内置组件Transition和TransitionGroup来实现CSS3过渡和动画，使得元素显示状态发生改变时