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

2024年4月26日 250次阅读 来源: FangHanJia

过渡效果

过渡效果应用场景

  • 条件渲染（使用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
})
    原文作者：FangHanJia
    原文地址: https://segmentfault.com/a/1190000016082979
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞