Vue路由

時間 2019-11-09

原文原文鏈接

一. 做業案例

　　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’，去掉默認的#
  model: "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_box">
      <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>
  </div>
</template>

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

<style scoped>
.header{
  height: 80px;
}
.content_box{
  width: 100%;
  height: 80px;
  position: fixed;
  z-index:3;
  background-color: #fff;
  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>

View Code

　　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>

　　首頁效果：

相關標籤/搜索

每日一句

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