VUE —— 5、vue项目

超、凢脫俗 2022-10-04 12:56 175阅读 0赞

**目录**

（9）vue项目

1.方式一

1.轮播

2.点

3.组件化

2.方式二（简单）

3.综合

4.路由

5.加载流程

6.样式

7.完善项目

--------------------

#  （9）vue项目 #

## 1.方式一 ##

### 1.轮播 ###

**App****.vue**

<template>
      <div id="app">
    ------------------------------------- 添加 -----------------------------------------
    <Banner />	//或者也可以？
    -----------------------------------------------------------------------------------
      </div>
    </template>
    
    <script>
    ------------------------------------- 添加 -----------------------------------------
    import Banner from './views/Banner'
    -----------------------------------------------------------------------------------
    export default {
      data(){
        return {
    
        }
      },
      components:{
    ------------------------------------- 添加 -----------------------------------------
    Banner
    -----------------------------------------------------------------------------------
      }
    }
    </script>

**Banner****.vue**

<template>
      
    <div class="banner">
    ------------------------------------- 添加 -----------------------------------------
            <img v-for="(v,i) in items" :key="i" :src="v" v-show="cur==i"/>
    -----------------------------------------------------------------------------------
            <div class="banner-circle">
                <ul>
                    <li class="{'selected'}">
                    </li>   
                </ul> 
            </div>
        </div>
    </template>
    
    <script>
    export default {
      data(){
    return {
    ------------------------------------- 添加 -----------------------------------------
          cur:0, //初始化
          items:[
            require('@/assets/img/1.jpg'),
            require('@/assets/img/2.jpg')],
        }
      },
      methods:{
        autoPlay(){
          setInterval(this.play,2000);  //定时器
        },
        play(){
          this.cur ++;
          if(this.cur == this.items.length){
            this.cur = 0;
          }
        }
      },
      mounted:function(){    //生命周期，挂载完成
        this.autoPlay()
      },
    -----------------------------------------------------------------------------------
      destroyed(){  //生命周期，销毁
      }
    }
    </script>
    
    <style scoped>	//只能在当前作用域内使用
    </style>

![20210716174348248.png][]

//图片自动轮播

### 2.点 ###

**Banner****.vue**

<template>
      
    <div class="banner">
            <img v-for="(v,i) in items" :key="i" :src="v" v-show="cur==i"/>
            <div class="banner-circle">
                <ul>
    ------------------------------------- 添加 -----------------------------------------
                    <li v-for="(v,i) in items" :key="i" :class="{'selected':cur==i}">
    -----------------------------------------------------------------------------------
                    </li>   
                </ul> 
            </div>
        </div>
    </template>
    
    <script>
    export default {
      data(){
    return {
          cur:0, //初始化
          items:[
            require('@/assets/img/1.jpg'),
            require('@/assets/img/2.jpg')],
        }
      },
      methods:{
        autoPlay(){
          setInterval(this.play,2000);  //定时器
        },
        play(){
          this.cur ++;
          if(this.cur == this.items.length){
            this.cur = 0;
          }
        }
      },
      mounted:function(){    //生命周期，挂载完成
        this.autoPlay()
      },
      destroyed(){  //生命周期，销毁
      }
    }
    </script>
    
    <style scoped>	//只能在当前作用域内使用
    </style>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70][]

//点随轮播图变化

### 3.组件化 ###

**Banner****.vue**

<template>
      
    <div class="banner">
            <img v-for="(v,i) in items" :key="i" :src="v" v-show="cur==i"/>
            <div class="banner-circle">
                <ul>
                    <li v-for="(v,i) in items" :key="i" :class="{'selected':cur==i}">
                    </li>   
                </ul> 
            </div>
        </div>
    </template>
    
    <script>
    export default {
      data(){
    return {
          cur:0, //初始化
          items:[
            require('@/assets/img/1.jpg'),
            require('@/assets/img/2.jpg'),
    ------------------------------------- 添加 -----------------------------------------
            require('@/assets/img/1.jpg'),
            require('@/assets/img/2.jpg')],
    -----------------------------------------------------------------------------------
        }
      },
      methods:{
        autoPlay(){
          setInterval(this.play,2000);  //定时器
        },
        play(){
          this.cur ++;
          if(this.cur == this.items.length){
            this.cur = 0;
          }
        }
      },
      mounted:function(){    //生命周期，挂载完成
        this.autoPlay()
      },
      destroyed(){  //生命周期，销毁
      }
    }
    </script>
    
    <style scoped>	//只能在当前作用域内使用
    </style>

![20210716174445433.png][]

//一样能行

## 2.方式二（简单） ##

**App****.vue**

<template>
      <div id="app">
    ------------------------------------- 添加 -----------------------------------------
        <Banner :imgData='items' />	//imgData是随便写的名字
    -----------------------------------------------------------------------------------
      </div>
    </template>
    
    <script>
    import Banner from './views/Banner'
    export default {
    
      data(){
    return {
    ------------------------------------- 添加 -----------------------------------------
          items:[
            require('@/assets/img/1.jpg'),
            require('@/assets/img/2.jpg'),
            require('@/assets/img/1.jpg')],
    -----------------------------------------------------------------------------------
        }
      },
      components:{
    Banner
      }
    }
    </script>

**Banner****.vue**

<template>
      
    <div class="banner">
            <img v-for="(v,i) in items" :key="i" :src="v" v-show="cur==i"/>
            <div class="banner-circle">
                <ul>
                    <li v-for="(v,i) in items" :key="i" :class="{'selected':cur==i}">
                    </li>   
                </ul> 
            </div>
        </div>
    </template>
    
    <script>
    export default {
      data(){
    return {
          cur:0, //初始化
    ------------------------------------- 关掉 -----------------------------------------
          items:[
            require('@/assets/img/1.jpg'),
            require('@/assets/img/2.jpg'),
            require('@/assets/img/1.jpg'),
            require('@/assets/img/2.jpg')],
    -----------------------------------------------------------------------------------
        }
      },
    ------------------------------------- 添加 -----------------------------------------
      //props:['items'],   //获取父传的参数
    -----------------------------------------------------------------------------------
      methods:{
        autoPlay(){
          setInterval(this.play,2000);  //定时器
        },
        play(){
          this.cur ++;
          if(this.cur == this.items.length){
            this.cur = 0;
          }
        }
      },
      mounted:function(){    //生命周期，挂载完成
        this.autoPlay()
      },
      destroyed(){  //生命周期，销毁
      }
    }
    </script>
    
    <style scoped>	//只能在当前作用域内使用
    </style>

![20210716174528869.png][]

##  3.综合 ##

![20210716174541661.png][]（两个文件、两个组件）

**（方式一继续写）**

**App****.vue**

<template>
      <div id="app">
    ------------------------------------- 添加 -----------------------------------------
        <Nav />	
        			
        <div>
        <Banner />	//或者也可以？
        </div>
    -----------------------------------------------------------------------------------
      </div>
    </template>
    
    <script>
    import Banner from './views/Banner'
    ------------------------------------- 添加 -----------------------------------------
    import Nav from './views/Nav'
    -----------------------------------------------------------------------------------
    
    export default {
      data(){
        return {
    
        }
      },
      components:{
    Banner
    ------------------------------------- 添加 -----------------------------------------
    Nav
    -----------------------------------------------------------------------------------
      }
    }
    </script>

**Nav****.vue**

<template>
        <div class="tree" >
            <ul>
                <li class="p_item" v-for="(v,i) in items" :key="i">
                    <a class="p_title" >
                        <i class="iconfont" :class="v.icon"></i>
                        {
       {v.name}}
                    </a>
                </li>
            </ul>
       </div>
    </template>
    
    <script>
    export default {
      name: 'Home',
      data(){
          return {
            n:1,
            items:[
                { name:'Tab切换', icon:'icon-yonghu'},
                { name:'轮播图', icon:'icon-licai'},
                { name:'图表展示', icon:'icon-jia'}]
          }
      }
    }
    </script>
    
    <style scoped>	//只能在当前作用域内使用
    </style>

![20210716174617567.png][]

**App****.vue**

<template>
      <div id="app">
        <Nav />	
        			
        <div>
        <Banner />	//或者也可以？
        </div>
      </div>
    </template>
    
    <script>
    import Banner from './views/Banner'
    import Nav from './views/Nav'
    
    export default {
      data(){
        return {
    
        }
      },
      components:{
    Banner
    Nav
      }
    }
    </script>
    
    ------------------------------------- 添加 -----------------------------------------
    <script>
     @import './assets/css/index.css' ;
     #app {
       height: 100%;
     }
    </script>
    -----------------------------------------------------------------------------------

![20210716174634629.png][]//完成（两个文件、两个组件）

##  4.路由 ##

**index****.js（路由）**![20210716174654453.png][]

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '../views/Home.vue'
    
    Vue.use(VueRouter)
    
    const routes = [
      {path: '/', name: 'Home', component: Home},
      {path: '/about', name: 'About',
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')},
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    ------------------------------------- 添加 -----------------------------------------
      {path: '/tab', name: 'tab', component: () => import('../views/Tab.vue')},
      {path: '/banner', name: 'banner', component: ()=>import('../views/Banner.vue')},
      {path: '/chart', name: 'chart', component: ()=>import('../views/Chart.vue')}
    -----------------------------------------------------------------------------------
    ]
    
    const router = new VueRouter({
      routes
    })
    
    export default router

**Banner****.vue**

<template>
      
    <div class="banner">
            <img v-for="(v,i) in items" :key="i" :src="v" v-show="cur==i"/>
            <div class="banner-circle">
                <ul>
                    <li v-for="(v,i) in items" :key="i" :class="{'selected':cur==i}">
                    </li>   
                </ul> 
            </div>
        </div>
    </template>
    
    <script>
    export default {
      data(){
    return {
          cur:0, //初始化
          items:[
            require('@/assets/img/1.jpg'),
            require('@/assets/img/2.jpg'),
            require('@/assets/img/1.jpg'),
            require('@/assets/img/2.jpg')],
    ------------------------------------- 添加 -----------------------------------------
          timer:null  //定时器初始化
    -----------------------------------------------------------------------------------
        }
      },
      methods:{
    autoPlay(){
    ------------------------------- 添加 this.timer =-----------------------------------
          this.timer = setInterval(this.play,2000);  //定时器
    -----------------------------------------------------------------------------------
        },
        play(){
          this.cur ++;
          if(this.cur == this.items.length){
            this.cur = 0;
          }
        }
      },
      mounted:function(){    //生命周期，挂载完成
        this.autoPlay()
      },
      destroyed(){  //生命周期，销毁
    ------------------------------------- 添加 -----------------------------------------
        clearInterval(this.timer);   //清除定时器
    -----------------------------------------------------------------------------------
      }
    }
    </script>
    
    <style scoped>	//只能在当前作用域内使用
    </style>

**Nav****.vue**

<template>
        <div class="tree" >
            <ul>
                <li class="p_item" v-for="(v,i) in items" :key="i">
    ---------------------------- a 换成 router-link ------------------------------------
                    <router-link :to="v.url" class="p_title" >
                        <i class="iconfont" :class="v.icon"></i>
                        {
       {v.name}}
                    </router-link>	//router-link 跳转，跳到下面（url:'/tab'）的地址
    -----------------------------------------------------------------------------------
                </li>
            </ul>
       </div>
    </template>
    
    <script>
    export default {
      name: 'Home',
      data(){
          return {
            n:1,
            items:[
    ---------------------------------- 添加 url: ---------------------------------------
                { name:'Tab切换', icon:'icon-yonghu', url:'/tab'},
                { name:'轮播图', icon:'icon-licai', url:'/banner'},
                { name:'图表展示', icon:'icon-jia', url:'/chart'}]
    -----------------------------------------------------------------------------------
          }
      }
    }
    </script>
    
    <style scoped>	//只能在当前作用域内使用
    </style>

![20210716174739259.png][]![20210716174740582.png][]

**App****.vue**

<template>
      <div id="app">
        <Nav />	
        			
    <div>
    ------------------------------------- 换成 -----------------------------------------
          
          <router-view />   //渲染
    -----------------------------------------------------------------------------------
        </div>
      </div>
    </template>
    
    <script>
    import Banner from './views/Banner'
    import Nav from './views/Nav'
    
    export default {
      data(){
        return {
    
        }
      },
      components:{
    Banner,
    Nav
      }
    }
    </script>
    <script>
     @import './assets/css/index.css' ;
     #app {
       height: 100%;
     }
    </script>

**Tab****.vue**

<template>
        <h1>tabtabtabtab</h1>
    </template>
    
    <script>
    export default {
      name: 'Home',
    }
    </script>
    
    <style scoped>	//只能在当前作用域内使用
    </style>

**Chart****.vue**

<template>
        <h1>图表展示 图表</h1>
    </template>
    
    <script>
    export default {
      name: 'Home',
    }
    </script>
    
    <style scoped>	//只能在当前作用域内使用
    </style>

**App****.vue**

<template>
      <div id="app">
        <Nav />	
        			
    <div>
          
          <router-view />   //渲染
        </div>
      </div>
    </template>
    
    <script>
    ----------------------------------- 去掉多余 ---------------------------------------
    import Banner from './views/Banner'
    -----------------------------------------------------------------------------------
    import Nav from './views/Nav'
    
    export default {
      data(){
        return {
    
        }
      },
      components:{
    ----------------------------------- 去掉多余 ---------------------------------------
    Banner
    -----------------------------------------------------------------------------------
    Nav
      }
    }
    </script>
    <script>
     @import './assets/css/index.css' ;
     #app {
       height: 100%;
     }
    </script>

![20210716174834474.png][]

![20210716174837341.png][]

![20210716174839601.png][]

##  5.加载流程 ##

> **App****.vue**
> 
> ![20210716174850424.png][]
> 
> Nav.vue
> 
> ![20210716174904168.png][]
> 
> **index.****js****（路由）**![20210716174916156.png][]
> 
>  ![20210716174913380.png][]
> 
> **App****.vue**
> 
> ![20210716174926420.png][]

## 6.样式 ##

** index.****js****（路由）**![20210716174916156.png][]

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '../views/Home.vue'
    
    Vue.use(VueRouter)
    
    const routes = [
      {path: '/', name: 'Home', component: Home},
      {path: '/about', name: 'About',
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')},
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
      {path: '/tab', name: 'tab', component: () => import('../views/Tab.vue')},
      {path: '/banner', name: 'banner', component: ()=>import('../views/Banner.vue')},
      {path: '/chart', name: 'chart', component: ()=>import('../views/Chart.vue')}
    ]
    
    const router = new VueRouter({
    ------------------------------------- 添加 -----------------------------------------
      linkActiveClass: 'active',
    -----------------------------------------------------------------------------------
      routes
    })
    
    export default router

![20210716175004857.png][]//样式

![20210716175009409.png][]

**//**vue有专门加载样式的方式** **

**Nav****.vue**

<template>
        <div class="tree" >
            <ul>
                <li class="p_item" v-for="(v,i) in items" :key="i">
                    <router-link :to="v.url" class="p_title" >
                        <i class="iconfont" :class="v.icon"></i>
                        {
       {v.name}}
                    </router-link>	//router-link 跳转，跳到下面（url:'/tab'）的地址
                </li>
            </ul>
       </div>
    </template>
    
    <script>
    export default {
      name: 'Home',
      data(){
          return {
            n:1,
            items:[
                { name:'Tab切换', icon:'icon-yonghu', url:'/tab'},
                { name:'轮播图', icon:'icon-licai', url:'/banner'},
                { name:'图表展示', icon:'icon-jia', url:'/chart'}]
          }
      }
    }
    </script>
    
    <style scoped>	//只能在当前作用域内使用
    ------------------------------------ 添加 ------------------------------------------
    .active {
        color: #f60;		//橙色
        border-bottom: 1px solid #f60;	//橙色
    }
    -----------------------------------------------------------------------------------
    </style>

![2021071617503055.png][]//接触时显示蓝色，点击才会生效显示橙色，

![20210716175035643.png][]

**优点：**vue有自动加载样式的方法

## 7.完善项目 ##

**Tab****.vue**

<template>
        
        <div>
            <ul class="tab-tit">
                <li v-for="(v,i) in obj" :key="i" :class="n==i?'active':''" 
                @click="action(i)">
                    {
       {v.title}}
                </li>  
            </ul>
            <div class="tab-con">
                <div v-for="(v,i) in obj" :key="i" v-show="n==i">
                    {
       {v.content}}
                </div>
            </div>
        </div>
    </template>
    
    <script>
    export default {
      name: 'Home',
      data(){
          return {
              n:1,
              obj:[
                    {title:'标题1',content:'内容1'},
                    {title:'标题2',content:'内容2'},
                    {title:'标题3',content:'内容3'},
                    {title:'标题4',content:'内容4'}],
          }
      },
      methods:{   //管理函数
            action(i){ this.n = i }
      },
    }
    </script>
    
    <style scoped>	//只能在当前作用域内使用
    ul,li {
        padding:0;
        margin:0;
    }
    .tab-tit li{
        padding: 10px 15px;
        text-align: center;
        list-style:none;
        cursor:pointer;
        display: inline-block;
    }
    .tab-tit .active{
        color: #09f;
        border-bottom: 1px solid #09f;
    }
    .tab-con div{
        margin:30px;
    }
    </style>

**Chart****.vue**

![20210716175108692.png][]

> cnpm install --save echarts

<template>
    ----------------------------- 方式二 添加ref="chart" -------------------------------
      <div id="main" ref="chart" style="width:600px; height:400px; float:left;"></div>
    -----------------------------------------------------------------------------------
    </template>
    
    <script>
    import echarts from 'echarts'   //安装：cnpm install --save echarts（优点：局部）
    export default {
      name: 'Home',
      data(){
        return {
        }
      },
      mounted(){
        this.init();
      },
      methods:{
        init(){
            // 基于准备好的dom，初始化echarts实例
    ---------------------------------- 方式一 ------------------------------------------
            // var myChart = echarts.init(document.getElementById('main'));
    ---------------------------------- 方式二 ------------------------------------------
            var myChart = echarts.init(this.$refs.chart);
    -----------------------------------------------------------------------------------
            // 指定图表的配置项和数据
            var option = {
                title: {text: 'ECharts 入门示例'},
                tooltip: {},
                legend: {data:['销量']},
                xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
      }
    }
    </script>
    
    <style scoped>	//只能在当前作用域内使用
    </style>

![20210716175130983.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 1][]

[20210716174348248.png]: /images/20221004/67de6c81467147e3b9f47b84a740829c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70]: /images/20221004/ef63953ac4ef4376af167d00324a9547.png
[20210716174445433.png]: /images/20221004/dd520b10270d42de851abb50a29b854a.png
[20210716174528869.png]: /images/20221004/2e2eef47ab854d9c974d1195ae331caf.png
[20210716174541661.png]: /images/20221004/fce1738548ba48cab6dd25f8ede48fc4.png
[20210716174617567.png]: /images/20221004/98b2e801b18249b2b5b25f3537d8993a.png
[20210716174634629.png]: /images/20221004/9a25e69508ea4ae6a05aabfeeaf06b2b.png
[20210716174654453.png]: /images/20221004/aa1f629cb1a744baa70527acd032a8ff.png
[20210716174739259.png]: https://img-blog.csdnimg.cn/20210716174739259.png
[20210716174740582.png]: /images/20221004/ef47141f963940658157a6982dc40a75.png
[20210716174834474.png]: /images/20221004/d82bdcbb3b1245daace7074fd84bb554.png
[20210716174837341.png]: /images/20221004/d6a832aaa54e4d0495b195763d214c8b.png
[20210716174839601.png]: /images/20221004/8522110a9b7649038f9f9e70eeaf7906.png
[20210716174850424.png]: /images/20221004/700630de8d224c8ea57411c3e6818eed.png
[20210716174904168.png]: /images/20221004/d5d37d96c29a4b90a22106aa017e82b4.png
[20210716174916156.png]: /images/20221004/06b934be3fd3417287e55b63f1e327a4.png
[20210716174913380.png]: /images/20221004/5244abb0070a45358c00fd69b9ed7c55.png
[20210716174926420.png]: /images/20221004/2f2d1491ba274871b207965b7e0d6280.png
[20210716175004857.png]: /images/20221004/585fc4af44e244bd99f3fb014f1b0aec.png
[20210716175009409.png]: /images/20221004/7c852aeaaa0c42f7ab6ff0829c2b5c38.png
[2021071617503055.png]: /images/20221004/9f40bd160449450381d0c3fb85ebda51.png
[20210716175035643.png]: /images/20221004/d6ec4c8c8dac45bd9f20d09933fe683d.png
[20210716175108692.png]: /images/20221004/f172d542265848eb8b57e438fb3570f0.png
[20210716175130983.png]: /images/20221004/d48da908906743328e778ce6d2ef04ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 1]: /images/20221004/03ef18bffb4a4bedb42a1231980ab651.png