Vue--- 一点车项目

佚名 6年前 (2019-04-15) 随笔 610人围观抢沙发百度已收录

一点车项目 cli脚手架 + 组件化 +数据交互+路由指向+存入数据库

前端页面

cli脚手架的安装与搭建创建对应包
页面组件化编辑（共享组件：摘取出来一模一样的组件重用）（私有组件:在自己的组件写入引入共享组件）
数据交互

父子间传数据

父子传值  
发送------------------------------------

<TabPanelRelease :tabs="tabs">

接收-------------------------------------
export default{
     data(){
          props:'tabs'       
      }   
}

使用---------------------------------------
<ul>
   <li v-for="(tab,index) in tabs" :key="index" :class="index==cur?'hit':''" @click="cur=index">{{tab.title}}</li>
</ul>

View Code

slot 引入不同的模板

<tabPan :todos='todos'>
    <template slot="tab1">
        1.显示的模板内容不同
     </template>
    <template   slot="tab2">
        2.模板布局不同 
    </template>
    <template slot="tab3">
       3.但是显示的位置相同 
    </template>
</tabPan>

引入的是 儿子  显示 在父亲中 
儿子i 
<div class="ydc-release-tab-head">
    <ul>
        <li v-for="(tab,index) in tabs" :key="index" :class="index==cur?'hit':''" @click="cur=index">{{tab.title}}</li>
    </ul>
      <slot name="amount"/>
 </div>
<div class="ydc-panes">
     <div v-for="(tab,index) in tabs" :key="index" class="ydc-pane" :style="{display: index==cur?'block':'none'}">
          <slot :name="tab.slotname"/>
      </div>
</div>

View Code

　　以上在项目中前端起到重要作用，事先在 data中定义一个 cur：0 每当点击按钮就获取到角标，存入到cur中，下面显示的内容（自己循环一个tabs中的数据，如果角标等于刚刚上面存入 cur的index，那么说明是对应的修改样式 display=“block” < :style="index== cur?'block':'none'"）;　

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

　4.　定义路由指向

　　在路由表中定义路径路由默认指向 main中使用路由，调用路由，每增加一个页面引入页面声明path

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/pages/index'
import Release from '@/pages/release';
import Login from '@/pages/login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/index',
      name: 'index',
      component: Index
    },
    {
      path: '/release',
      name: 'release',
      component: Release
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/xxx',
      name: 'xxx',
      component: Release
    }
  ]
})

route

在页面内显示路由页面的地方写入 <router-view/> 就会在位置显示

路由重点：（简单操作）

要求：一个Login 页面和一个首页登陆后跳转首页

在路由里面就是同上面一样写的但是怎样判断现在是哪个路径呢，当你路径输入 localhost:8080/login 就显示对应的登陆页面，后面/index 就是显示首页

因为是两个同级别的页面所以呢在App.vue中显示

判断

<template>
    <div>  //只允许外层有一个div 
//这个是判断 路由指向是 login的页面
      <div v-if="$route.name == 'login'">
        <router-view/>
      </div>
//这个是 指向 不是login那么肯定是 index页面了  ###这个地方我写的不严谨，按照讲师来####
      <div v-if="$route.name != 'login'">
        {{$route.name}}
          <Header/>
          <section>
            <div class="ydc-content-slide ydc-body">
              <div class="ydc-flex">
                <!-- left begin -->
                <div class="ydc-column ydc-column-2">
                  <Menu/>
                </div>
                <!-- left end -->
                <!-- right begin -->
                <div class="ydc-column ydc-column-8">
                  <router-view/>
                </div>
                <!-- right end -->
              </div>
            </div>
            <Footer/>
          </section>

      </div>

    </div>
</template>

<script>
import Header from '@/components/header';
import Menu from '@/components/menu';
import Footer from '@/components/footer';
export default {
  name: 'App',
  components: { Header, Menu, Footer }
}
</script>

<style>

</style>