Vue笔记（四）——Vue动画&路由

过渡效果

过渡效果应用场景

• 条件渲染（使用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
})