Vue--- 一点车项目

一点车项目 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'"）;　

　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>