一點車項目 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> 通過路由里面的name進行判斷

?

Vue行內屬性? 引入圖片是報錯出問題的? 導致圖片相應出不來? 【先引入? 調用】

除了slot方式?? 另一總就是 用 v-if=""??? 提前定一個值?? 每次變動這個值?? 如果這個值對應== 【0 or 1 or 2】 那么就顯示對應的 html代碼

每次點擊哪個按鈕 就進行 數字加1?? 如果對應就顯示

頁面中想定義一個? 主機頭 （常量供多個組件中調用）

創建一個? config.js 文件???? 寫入 常量定義的路徑

在需要的組建中? import? {SERVER_URL}? from './config'????? !!!!##引入進來的代表一個文件，直接用里面的數據，有問題? 所以在 名稱外加{}? 做結構解析##!!!!

前臺的技巧 ：

寫代碼的時候，有顯示隱藏 就用css命名不同名稱??? 每次添加 class? 就哦可

?

后臺服務

轉載于:https://www.cnblogs.com/reeber/p/10711149.html

總結

以上是生活随笔為你收集整理的Vue--- 一点车项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。