Vue路由

時間 2019-11-14

原文原文鏈接

Vue路由

一. 做業案例

1. 單文件組件實現選項卡

　　代碼：css

　　子組件OptionCard.vue文件：html

<template>
 <div id="OptionCard">
   <div class="title_box">
     <span v-for="item, key in select_list" :class="index==key?'active':''" @click="index=key">{{item.title}}</span>
   </div>
   <div class="content_box">
     <div v-for="item, key in option_list" class="item1" :class="index==key?'current':''">{{item.content}}</div>
   </div>
 </div>
</template>

<script>
 export default {
   name: "OptionCard",
   data(){
     return {
       index: 0,
       select_list: [
         {"title":"歐美專區"},
         {"title":"日韓專區"},
         {"title":"大陸專區"},
         {"title":"圖片專區"},
       ],
       option_list: [
         {"content":"歐美專區的內容！"},
         {"content":"日韓專區的內容！"},
         {"content":"大陸專區的內容！"},
         {"content":"圖片專區的內容！"},
       ]
     }
   }
 }
</script>

<style scoped>
 #OptionCard {
   width: 400px;
   height: 300px;
   background: #eeeeee;
 }

 .title_box {
   height: 50px;
   background: #ff6700;
 }

 .active {
   background: #eeeeee;
 }

 span {
   line-height: 50px;
   text-align: center;
   display: inline-block;
   width: 80px;
 }

 .item1 {
   height: 250px;
   border-bottom: 1px solid black;
   display: none;
 }

 .current {
   display: block;
 }
</style>

　　在App.vue文件中註冊：前端

<template>
 <div id="app">
   <OptionCard></OptionCard>
 </div>
</template>

<script>
import OptionCard from "./components/OptionCard"
export default {
 name: 'App',
 components: {
     OptionCard
 }
}
</script>

<style>

</style>

　　效果：vue

2. 實現圖書的管理（增刪改查）

　　代碼：html5

<!DOCTYPE html>
<html>
<head>
   <title>表格數據的增刪查改</title>
   <script src="js/vue.js"></script>
   <style>
       table{
           border-collapse: collapse;
           border: 1px solid blue;
       }
       table td,th{
           width: 130px;
           height: 30px;
           text-align: center;
       }
       .form{
           background: rgba(0, 0, 0, 0.3);
           height: 100%;
           width: 100%;
           position: fixed;
           top:0;
       }
       .form_content{
           background: white;
           width: 400px;
           height: 250px;
           margin: 80px auto 0;
           padding: 30px 0 0 60px;
       }
   </style>
</head>
<body>
<div id="app">
   <a href="" @click.stop.prevent="show_form=true"><button>新增書籍</button></a>
   <table border="1">
       <tr>
           <th>ID</th>
           <th>書名</th>
           <th>價格</th>
           <th>操做</th>
       </tr>
       <tr v-for="book,key in book_list">
           <td>{{book.id}}</td>
           <td>{{book.title}}</td>
           <td>{{book.price}}</td>
           <td><button @click.stop="edit_book(key)">編輯</button> | <button @click.stop="del_book(key)">刪除</button></td>
       </tr>
   </table>
   <div class="form" v-show="show_form">
       <div class="form_content">
           <h3>新增書籍</h3>
           <p>書名：<input type="text" v-model="title"></p>
           <p>價格：<input type="text" v-model="price"></p>
           <button @click.stop="add_book">保存</button>
           <button @click.stop="show_form=false">取消</button>
       </div>
   </div>
</div>
<script>
   var vm = new Vue({
       el: "#app",
       data: {
           key: "",
           title: "",
           price: "",
           show_form: false,
           id_increment: 7,
           book_list: [
               {"id": 1, "title": "python入門", "price": 150},
               {"id": 3, "title": "python進階", "price": 100},
               {"id": 4, "title": "python高級", "price": 75},
               {"id": 5, "title": "python研究", "price": 60},
               {"id": 7, "title": "python大神", "price": 180},
           ]
       },
       methods: {
           // 保存書籍
           add_book(){
               this.show_form = false;
               if (this.key === ""){ // 保存新增書籍
                   this.id_increment++;
                   let new_book = {
                       id: this.id_increment,
                       title: this.title,
                       price: this.price
                   };
                   this.book_list.push(new_book)
               }else{ // 編輯書籍保存
                   this.book_list[this.key].title = this.title;
                   this.book_list[this.key].price = this.price;
                   this.title = "";
                   this.price = "";
               }
           },
           // 刪除書籍
           del_book(index){
               this.book_list.splice(index, 1);
           },
           // 編輯書籍
           edit_book(index){
               this.show_form=true;
               this.key = index;
               this.title = this.book_list[index].title;
               this.price = this.book_list[index].price;
           }
       }
   })
</script>

</body>
</html>

　　效果：node

　　擴展知識（本地存儲）：python

html5提供給開發者保存數據到客戶端的兩個新對象.
window.localStorage   # 本地存儲
window.sessionStorage # 會話存儲

這兩個對象都是保存數據的，只是保存數據的週期不同而已。

這兩個對象的用法也是同樣的。
localStorage.setItem("變量名","變量值"); # 存儲數據
localStorage.getItem("變量名");         # 獲取數據
localStorage.removeItem("變量名");       # 刪除數據
localStorage.clear();                   # 清空本地存儲中的全部數據

二. 在組件中使用axios獲取數據

1. 安裝和配置axios

　　默認狀況下，咱們的項目中並無對axios包的支持，因此咱們須要下載安裝。webpack

　　在項目根目錄中使用 npm安裝包ios

`npm install axios`

　　接着在main.js文件中，導入axios並把axios對象掛載到vue屬性中做爲一個子對象，這樣咱們才能在組件中使用。web

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import axios from 'axios' // 從node_modules目錄中導包

Vue.config.productionTip = false;

Vue.prototype.$axios = axios; // 把對象掛載到Vue中

/* eslint-disable no-new */
new Vue({
 el: '#app',
 components: { App },
 template: '<App/>'
});

2. 在組件中使用axios獲取數據

　　新建子組件GetWeather.vue文件

<template>
   <div>
     <input type="text" v-model="city" placeholder="請輸入要查詢的城市">
     <button @click="get_weather">獲取天氣</button>
     <p>{{weather_info}}</p>
   </div>
</template>

<script>
   export default {
       name: "GetWeather",
       data(){
         return {
           city: "",
           weather_info: "",
         }
       },
       methods: {
         get_weather(){
           this.$axios.get("http://wthrcdn.etouch.cn/weather_mini", {
             params: {
               "city": this.city
             }
           }).then(response=>{
             this.weather_info = response.data;
           }).catch(error=>{
             consolo.log(error.response)
           })
         }
       }
   }
</script>

<style scoped>

</style>

　　記得要在App.vue文件進行註冊，註冊完後，效果以下：

　　注意：使用的時候，由於本質上來講，咱們仍是原來的axios，因此也還會受到同源策略的影響。

三. 項目分析

首頁
   導航、登陸註冊欄、輪播圖、底部導航
登陸註冊
   選項卡
免費課
   課程分類、篩選、課程列表
免費課詳情
   課程封面視頻、優惠活動倒計時、選項卡
個人購物車
   全選、商品價格統計
購買結算
    
購買成功
    
個人訂單
    
課時播放頁面

四. 項目搭建

1. 新建一個vue項目

`vue init webpack luffycity`

　　根據須要在生成項目時，咱們選擇對應的選項。

　　根據上面的提示，咱們已經把vue項目構建好了，接下來咱們能夠在pycharm編輯器中把項目打開並根據上面黃色提示，運行測試服務器。

2. 初始化項目

　　清除默認的Helloworld.vue組件和App.vue中的默認模板代碼和默認樣式。

　　修改後的效果：

　　接下來，咱們能夠查看效果了，一張白紙。

3. 安裝路由vue-router

3.1 下載路由組件

`npm i vue``-``router ``-``S`

　　執行效果：

3.2 配置路由

　　在src目錄下建立router路由目錄，在router目錄下建立index.js路由文件

　　router/index.js路由文件中，編寫初始化路由對象的代碼

// 引入路由類和Vue類
import Vue from 'vue'
import Router from 'vue-router'

// 註冊路由類
Vue.use(Router);

// 初始化路由對象
export default new Router({
  // 設置路由模式爲‘history’，去掉默認的#
  mode: "history",
  routes: [
    // 路由列表
    { // 一個字典，表明一條url
      // name: "路由別名",
      // path: "路由地址",
      // component: 組件類名,
    }

  ]
})

　　打開main.js文件，把router路由規則對象註冊到vue中。

　　代碼：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router/index'

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,  // 註冊路由規則對象
  components: { App },
  template: '<App/>'
});

3.3 在視圖中顯示路由對應的內容

　　在App.vue組件中，添加顯示路由對應的內容。

　　代碼：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {

  }
}
</script>

<style>

</style>

　　注意：若是在vue建立項目的時候，設置安裝vue-router，則項目會自動幫咱們生成上面的router目錄和index.js裏面的代碼，以及自動到main.js裏面註冊路由對象。

4. 引入ElementUI

　　對於前端頁面佈局，咱們可使用一些開源的UI框架來配合開發，Vue開發前端項目中，比較經常使用的就是ElementUI了。

　　ElementUI是餓了麼團隊開發的一個UI組件框架，這個框架提早幫咱們提供了不少已經寫好的通用模塊，咱們能夠在Vue項目中引入來使用，這個框架的使用相似於咱們前面學習的bootstrap框架，也就是說，咱們徹底能夠把官方文檔中的組件代碼拿來就用，有定製性的內容，能夠直接經過樣式進行覆蓋修改就能夠了。

　　中文官網：http://element-cn.eleme.io/#/zh-CN

　　文檔快速入門：http://element-cn.eleme.io/#/zh-CN/component/quickstart

　　4.1 快速安裝ElementUI

　　在項目的根目錄下執行下面的命令。

`npm i element``-``ui ``-``S`

　　上面的代碼等同於：npm install element-ui --save

　　執行命令效果：

4.2 配置ElementUI到項目中

　　在main.js中導入ElementUI，並調用。代碼：

// elementUI 導入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 調用插件
Vue.use(ElementUI);

　　效果：

　　成功引入了ElementUI之後，接下來咱們就能夠開始進入前端頁面開發，首先是首頁。

五. 首頁的開發

　　首頁採用了上下頁面佈局，首頁是導航欄、輪播圖。。。腳部等幾個小模塊。因此咱們能夠把首頁做爲一個組件進行開發，而後把首頁的這些小模塊做爲單獨的組件來進行開發。

1. 建立首頁組件

　　在src/components目錄下建立文件 Home.vue

<template>
    <div class="home">
      <Header></Header>
      <Banner></Banner>
      <Footer></Footer>
    </div>
</template>

<script>
  import Header from "./common/Header"
  import Banner from "./common/Banner"
  import Footer from "./common/Footer"
  export default {
      name: "Home",
      data(){
        return {}
      },
      methods:{

      },
      components:{
        Header,
        Footer,
        Banner,
      }
  }
</script>

<style scoped>

</style>

2. 編寫首頁的頭部導航欄

<template>
    <div class="header">
      <div class="content">
        <div class="logo full-left">
          <img src="/static/image/logo.svg" alt="">
        </div>
        <ul class="nav full-left">
            <li><span>免費課</span></li>
            <li><span>輕課</span></li>
            <li><span>學位課</span></li>
            <li><span>題庫</span></li>
            <li><span>老男孩教育</span></li>
        </ul>
        <div class="login-bar full-right">
          <div class="shop-cart full-left">
            <img src="/static/image/cart.svg" alt="">
            <span>購物車</span>
          </div>
          <div class="login-box full-left">
            <span>登陸</span>
            &nbsp;|&nbsp;
            <span>註冊</span>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "Header"
    }
</script>

<style scoped>

.header{
  width: 100%;
  height: 80px;
  box-shadow: 0 0.5px 0.5px 0 #c9c9c9;
}
.header .content{
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
.header .content .logo{
  height: 80px;
  line-height: 80px;
  margin-right: 50px;
  cursor: pointer; /* 設置光標的形狀爲爪子 */
}
.header .content .logo img{
  vertical-align: middle;
}
.header .nav li{
  float: left;
  height: 80px;
  line-height: 80px;
  margin-right: 30px;
  font-size: 16px;
  color: #4a4a4a;
  cursor: pointer;
}
.header .nav li span{
  padding-bottom: 16px;
  padding-left: 5px;
  padding-right: 5px;
}
.header .nav li:hover span{
  color: #000;
}
.header .login-bar{
  height: 80px;
}
.header .login-bar .shop-cart{
  margin-right: 20px;
  border-radius: 17px;
  background: #f7f7f7;
  cursor: pointer;
  font-size: 14px;
  height: 28px;
  width: 88px;
  margin-top: 30px;
  line-height: 32px;
  text-align: center;
}
.header .login-bar .shop-cart:hover{
  background: #f0f0f0;
}
.header .login-bar .shop-cart img{
  width: 15px;
  margin-right: 4px;
  margin-left: 6px;
}
.header .login-bar .shop-cart span{
  margin-right: 6px;
}
.header .login-bar .login-box{
  margin-top: 33px;
}
.header .login-bar .login-box span{
  color: #4a4a4a;
  cursor: pointer;
}
.header .login-bar .login-box span:hover{
  color: #000000;
}
</style>

3. 編寫首頁的中間banner頁面（輪播圖）

<template>
  <div class="banner">
    <el-carousel height="640px">
      <el-carousel-item>
        <img src="/static/image/banner1.png" alt="">
      </el-carousel-item>
      <el-carousel-item>
        <img src="/static/image/banner2.jpeg" alt="">
      </el-carousel-item>
      <el-carousel-item>
        <img src="/static/image/banner3.png" alt="">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
    export default {
        name: "Banner"
    }
</script>

<style scoped>
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
  img {
    width: 100%;
  }
</style>

　　咱們能夠在App.vue 中設置一些公共樣式的代碼：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {

  }
}
</script>

<style>
/* 聲明全局樣式和項目的初始化樣式 */
body,h1,h2,h3,h4,p,table,tr,td,ul,li,a,form,input,select,option,textarea{
  margin:0;
  padding: 0;
  font-size: 15px;
}
a{
  text-decoration: none;
  color: #333;
}
ul,li{
  list-style: none;
}
table{
  border-collapse: collapse; /* 合併邊框 */
}

/* 工具的全局樣式 */
.full-left{
  float: left!important;
}
.full-right{
  float: right!important;
}
</style>

　　首頁效果：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。