一、过度效果与脚手架安装
1.过度效果
· Vue在插入、更新或者移除DOM时,提供多种不同方式的应用过渡效果。
包括以下工具:
-在CSS过渡和动画中自动应用class
-可以配合使用第三方CSS动画库,如Animate.css
-在过渡钩子函数中使用JavaScript直接操作DOM
-可以配合使用第三方JavaScript动画库,如Velocity.js
· 会有6个(CSS)类名在enter/leave的过渡中切换
**-**v-enter:定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。
**-**v-enter-active:定义过渡的状态。在元素整个过渡过程中作用,在元素被插入时生效,在
transition/animation完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
- v-enter-to: 2.1.8版及以上定义进入过渡的结束状态。在元素被插入一帧后生效(于此同时v-enter被删除),在transition/animation完成之后移除。
**-**v-leave:定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。
**-**v-leave-active:定义过渡的状态。在元素整个过渡过程中作用,在离开过渡被触发后立即生效,在
transition/animation完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
**-**v-leave-to: 2.1.8版及以上定义离开过渡的结束状态。在离开过渡被虫发一倾后生xti荒成之后移除。
CSS:
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s
.fade-enter,
.fade-leave-to
{
opacity: 0
}
HTML:
Togglehello
2.脚手架安装
1.按win+R,输入cmd。输入“npm i -g @vue/cli”
2.在相对的创建项目文件路径输入“vue create 项目名称”
3.cmd上启动脚手架项目
4.安装axios指令“npm i -save axios”
5.打包脚手架指令“npm run build”
二、脚手架项目结构
Visual Studio Code 中启动脚手架“npm run serve”