Vue快速了解并上手-5

最新推荐文章于 2024-07-06 16:47:02 发布

菜鸟一枚在这

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量244

点赞数

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45969711/article/details/121300031

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

系列文章目录

上期我们讲解了路由组件等功能，这期我们开始讲解如何使用vue快速有效的开发。

1、路由嵌套

如果存在组件嵌套 ,就需要提供多个视图容器
同时,router-link和router-view 都可以添加类名、设定样式

路径:

在原有的一级导航的template里面配置二级导航的router-link和router-view
在相对应的一级导航路由配置选项children里面配置二级导航的路由和模板

path: '/music',
component: Music,
//子路由配置 在children选项
children: [{
path: 'lx',
component: Lx
},...]

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <router-link to="/home">主页</router-link>
        <router-link to="/music">音乐</router-link>
        <router-view></router-view>
    </div>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script>
        // 提供组件
        let Home = {
            template: `<div>Home-----</div>`
        }
        let Music = {
            template: `<div>Music-----
                <router-link to="/music/pop">流行</router-link>
                <router-link to="/music/cal">古典</router-link>
                <router-view></router-view>
                </div>`
        }
        // 二级路由的组件
        let Detail = {
            template: `<div>Detail{{$route.params.id}}</div>`
        }
        let routes = [{
            name: 'default',
            path: '/',
            redirect: '/home'
        }, {
            name: 'home',
            path: '/home',
            component: Home
        }, {
            name: 'music',
            path: '/music',
            component: Music,
            children: [{
                path: "/music/:id",
                component: Detail
            }]
        }]
        const router = new VueRouter({
            routes
        })
        let vm = new Vue({
            el: '#app',
            router,
            data: {}
        })
    </script>
</body>

</html>

2、过渡动画

基本用法就是给我们需要动画的标签外面嵌套 transition 标签 ,并且设置name属性
Vue 提供了 transition 的封装组件，列表中更新,移除，新增情形中，可以给任何元素和组件添加进入/离开过渡

<transition name="fade">
<div v-show="isShow" class="box"></div>
</transition>

代码实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #obox {
            width: 200px;
            height: 200px;
            background: #000;
            position: absolute;
        }

        #obtn {
            position: absolute;
            top: 200px;
        }

        /* 6个类名 */
        .my-enter-to,
        .my-leave {
            left: 0;
            opacity: 1;
        }

        .my-enter,
        .my-leave-to {
            left: 200px;
            opacity: 0;
        }

        .my-enter-active,
        .my-leave-active {
            transition: all 2s;
        }
    </style>
</head>

<body>
    <div id="app">
        <transition name="my">
            <div id="obox" v-if="isShow"></div>
        </transition>
        <button id="obtn" @click="changShow">按钮</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                isShow: true
            },
            methods: {
                changShow() {
                    this.isShow = !this.isShow
                }
            }
        })
    </script>
</body>

</html>

3、vue-cli

3.1、安装

3.2、cli创建项目

vue create hello-world

在这里插入图片描述
进入目录后：我们就选择yes

我们选择第二种babel，eslint的安装，然后等待安装

检查是否安装成功

http://localhost:8080

默认端口号是8080，我们可以在项目的config文件中修改配置文件

module.exports = {
	lintOnSave: true, // 在保存代码的时候开启eslint代码检查机制
	devServer: { // 实时保存、编译的配置段
		open:true, // 自动开启浏览器
		port: 12306 // 服务运行端口
	}
}

3.3、项目的目录介绍

|-- node_modules // 项目需要的依赖包
|-- public // 静态资源存储目录
| |-- index.html // 项目主容器文件
| |-- favicon.ico // 项目默认索引图片
|-- src
| |-- assets // 放置一些静态资源文件，例如图片、图标、字体
| |-- components // 公共组件目录
| |-- views // 业务组件目录
| |-- App.vue // 顶层根基路由组件
| |-- main.js // 主入口文件
| |-- router.js // 路由配置文件
|-- .editorconfig // 代码规范配置文件
|-- .eslintrc.js // eslint代码规范检查配置文件
|-- .gitignore // git上传需要忽略的文件格式
|-- babel.config.js // babel配置文件
|-- package-lock.json // 依赖包版本锁定文件
|-- package.json // 项目基本信息配置文件
|-- postcss.config.js // css预处理器配置文件
|-- vue.config.js // webpack 配置文件(与webpack.config.js作用一致)

4、使用cli去搭建一个项目

将项目所需样式导入到项目中

安装 bootstrap固定版本

 - npm i bootstrap@3.3.7

安装完成之后 ,在入口处引入js文件

import "./../node_modules/bootstrap/dist/css/bootstrap.css"; // 引入
import "./assets/index.css"; // 引入index.css

详细的代码可查看我的源码

总结

Vue的基础讲到这里就是时候结束了，详细的内容我们可以去查看Vue的官方操作手册，更上一层楼噢，加油

菜鸟一枚在这

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue快速了解并上手-5

系列文章目录上期我们讲解了路由组件等功能，这期我们开始讲解如何使用vue快速有效的开发。目录系列文章目录1、路由嵌套2、过渡动画3、vue-cli3.1、安装3.2、cli创建项目3.3、项目的目录介绍4、使用cli去搭建一个项目总结1、路由嵌套如果存在组件嵌套 ,就需要提供多个视图容器同时,router-link和router-view 都可以添加类名、设定样式路径:在原有的一级导航的template里面配置二级导航的router-link和router-view在相
复制链接

扫一扫