过渡效果
过渡效果应用场景
- 条件渲染(使用v-if)
- 条件展示(使用v-show)
- 动态组件(使用:is)
- 组件根节点
过渡状态
- opacity:0 ==> 1
enter ==>enter-active
- opacity:1 ==> 0
leave ==> leave-active
CSS过渡
使用vue组件 transition 属性:name
- style
.fade-enter{opacity:0;}
.fade-enter-active{transition:all 1s;}
.fade-leave-active{opacity:0;transition:all 1s;}
- html
<transition name="fade">
<!-- 需要过渡的元素 -->
</transition>
CSS动画
- 格式:@keyframes 动画名{from{}to{}}
- 使用:
style
.fade-enter-active{animation:fade-in .5s}
@keyframes fade-in{
from{}to{}
}
html
<transition name="fade"></transition>
初始渲染的过渡
- 格式:
<transition name='fade' appear appear-class appear-class-active></transition>
多个元素的过渡效果
- in-out:先过渡再隐藏
- out-in:先隐藏再过渡
列表的过渡效果
使用:v-for生成列表过渡效果要用使用组件 transition-group,组件提供属性 tag表示该组件将会渲染成对对应的DOM节点,其他的使用和transition一样
脚手架Vue-cli
基于webpack 构建工具下的一个vue的脚手架
webpack-simple简单版
- 首先需要全局安装vue
$ npm install vue-cli -g
- 初始化 vue 项目
$ vue init webpack-simple 项目名称(simple-为简单脚手架,webpack-为完整脚手架)
- 切换到项目路径
$ cd 项目名称
- 安装插件
$ npm install
- 启动服务器
$ npm run dev
webpack完整版
- 全局安装 vue-cli
$ npm install --global vue-cli
- 初始化项目
$ vue init webpack 项目名
- 安装依赖插件
$ npm install
- 运行项目
$ npm run dev
路由
- 定义:通过url映射到对应的功能实现,Vue的路由使用要先引入vue-router
npm install vue-router
基本路由
- 定义组件
// 组件模板
<template>
<div>
<h1>这是组件</h1>
</div>
</tempalte>
// 暴露组件
<script>
export default{}
</script>
- 定义路由规则
在主入口程序app.js里面定义规则
// 导入模块
import Vue from 'vue'
import VueRouter from 'vue-router'
// 全局使用
Vue.use(VueRouter);
// 导入首页组件
import app form './app.vue'
// 导入功能组件
import 组件名 from './'
// 路由命名规则
const router = new VueRouter({
// 配置路由
routes:[
{
path:'/路由',component:组件名,
// 路由嵌套
children:[
{path:'子路由',component:组件名}
]
}
]
})
// 获取vue实例
new Vue({
el:'#app',
router,
render:h =>h(app);
});
路由传参
- 方式一:使用路由路径传参
定义:在路由规则处定义参数属性
const router = new VueRouter({
routes:[
{path:'/user/:id/:pwd',component:组件名}
]
})
传参:在对应的路由下传参
<router-link to="/user/admin/1234"></router-link>
获取:在对应的路由文件(组件)下通过 $route.params.属性名 来获取参数
let user = {id:{{$.route.params.id},pwd:{{$.route.params.pwd}}
- 方式二:通过params属性来传参
$router.push({name:'user',params:{id:fhj,pwd:1234}})
编程式导航
使用JavaScript 跳转路由
$router.push({path:'/user'})
命名路由
在路由映射规则中添加属性:name,用于对该路由映射规则命名,在编程式导航跳转路由时可以用router.push({name:’名称’})
命名视图
给<router-view name=’视图名’></router-view>
分别添加不同的id,用于显示不同的组件
- 组件
<template>
<div>
<router-view name="default"></router-view>
<router-view name="a"></router-view>
</div>
</template>
- 命名规则
cosnt router = new VueRouter({
routes:[
{path:'/',components:{
default:..,
a:..
},
{}
]
})
new Vue({
el:'#app',
<!-- 初始化路由对象 -->
router
})