Day67 vue路由

我不是女神ヾ 2023-08-17 15:29 84阅读 0赞

#### \# 参考博文：https://www.cnblogs.com/Michael--chen/p/11273747.html ####

## 1. 单文件组件实现选项卡 ##

子组件OptionCard.vue文件：

<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>

![1673775-20190731230709745-1249209470.png][]

## 2. 实现图书的管理（增删改查） ##

<!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>

![loading.gif][]

![1673775-20190731224049282-446891561.png][]

![1673775-20190731224241781-11258955.png][]

由于新增的按钮和编辑保存的按钮都是绑定的同一个按钮，那么使用一个变量就行标记，在编辑的时候会出现一个索引值于是可以就行限制。

![1673775-20190731224414185-2057999951.png][]

1，当点击编辑书籍的按钮的时候触发edit\_book事件 然后通过取出book\_list中的值就行显示，

2，当编辑的时候点击取消 那么也会手动的就行赋值，将模态对话框就行取消。

![1673775-20190731224611788-1708214280.png][]

3. 当点击保存的时候，通过1.先获取input标签中的值是多少，然后对data\_list中的数据就行更新，注意先后的顺序。

![1673775-20190731224749958-1556030201.png][]

扩展：

localStorage.setItem("book_data", vm.$data);
                        localStorage.get("book_data");
                        localStorage.setItem("book_data_json", JSON.stringify(vm.$data));
                        localStorage.get("book_data_json")

## ![1673775-20190731230417125-544497771.png][] ##

本地存储：

html5提供给开发者保存数据到客户端的两个新对象.
    window.localStorage    # 本地存储
    window.sessionStorage  # 会话存储
    
    这两个对象都是保存数据的，只是保存数据的周期不一样而已。
    
    这两个对象的用法也是一样的。
    localStorage.setItem("变量名","变量值");  # 存储数据
    localStorage.getItem("变量名");          # 获取数据
    localStorage.removeItem("变量名");       # 删除数据
    localStorage.clear();                   # 清空本地存储中的所有数据
    复制代码

## 3. 在组件中使用axios获取数据 ##

*  安装和配置axios
 *  在main.js中 导入axios并把axios对象挂载到vue属性中作为一个子对象 方便使用 类似于导包理解把！

### 　1. 安装和配置axios ###

默认情况下，我们的项目中并没有对axios包的支持，所以我们需要下载安装。

在项目根目录中使用 npm安装包

npm install axios

接着在main.js文件中，导入axios并把axios对象 挂载到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 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>

## 4. 项目分析 ##

### 4.1项目搭建 ###

![1673775-20190731145329370-217581584.png][]

### 4.2初始化项目 ###

清除默认的Helloworld.vue组件和App.vue中的默认模板代码和默认样式。

![1673775-20190731145415153-72795073.png][]

修改后的效果：

![1673775-20190731145434608-67129165.png][]

接下来，我们可以查看效果了，一张白纸。

![1673775-20190731145505283-1453532349.png][]

#### 4.3. 安装路由vue-router ####

#### 4.3.1下载路由组件 ####

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

![1673775-20190731145604931-685172704.png][]

#### 4.3.2 配置路由 ####

*  　　第一步
 *  在src目录下创建router路由目录，在router目录下创建index.js路由文件

![1673775-20190731145654222-834866719.png][]

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中

![1673775-20190731150113515-237422155.png][]

#### 代码： ####

// 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/>'
    });

#### 4.4 在视图中显示路由对应的内容 ####

*  第三步
 *  在App.vue组件中，添加显示路由对应的内容

![1673775-20190731150306078-1311422760.png][]

代码：

<template>
      <div id="app">
        <router-view />
      </div>
    </template>
    
    <script>
    
    export default {
      name: 'App',
      components: {
    
      }
    }
    </script>
    
    <style>
    
    </style>

注意点：

![1673775-20190731150720815-217125795.png][]

## 5.引入ElementUI ##

### 5.1 下载 ###

*  前端页面布局，我们可以使用一些开源的UI框架来配合开发，Vue开发前端项目中，比较常用的就是ElementUI了。
 *  ElementUI是饿了么团队开发的一个UI组件框架，这个框架提前帮我们提供了很多已经写好的通用模块
 *  类似于我们前面学习的bootstrap框架
 *  完全可以把官方文档中的组件代码拿来就用，有定制性的内容，可以直接通过样式进行覆盖修改就可以了
 *  中文官网：[http://element-cn.eleme.io/\#/zh-CN][http_element-cn.eleme.io_zh-CN]
 *  文档快速入门：[http://element-cn.eleme.io/\#/zh-CN/component/quickstart][http_element-cn.eleme.io_zh-CN_component_quickstart]

快速安装：`npm i element``-``ui``-``S`

上面的代码等同于：npm install element-ui --save

### ![1673775-20190731151038996-668377187.png][] ###

### 5.2 配置 ###

在main.js中导入ElementUI，并调用。代码：

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

效果：

![1673775-20190731151134506-1173059176.png][]

成功引入了ElementUI以后，接下来我们就可以开始进入前端页面开发，首先是首页。

## 6.首页的开发 ##

### 6.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>

### 6.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>
                 | 
                <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>

### 6.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>

### 6.4 效果展示 ###

转载于:https://www.cnblogs.com/longerandergou/p/11277071.html

[1673775-20190731230709745-1249209470.png]: /images/20230810/64c734a6b559469ba70be4033355aa58.png
[loading.gif]: /images/20230810/7034f452e41244feba06c3c2546ccdb1.png
[1673775-20190731224049282-446891561.png]: /images/20230810/61a8b91b294d4877964091b0e64d528a.png
[1673775-20190731224241781-11258955.png]: /images/20230810/c8d266ce70574db2ad23a76f2c09aa00.png
[1673775-20190731224414185-2057999951.png]: /images/20230810/a6613d6cab8448f7bf262c6c7d9ec0fc.png
[1673775-20190731224611788-1708214280.png]: /images/20230810/c1fc668f4aa741d7ab31314cba107eec.png
[1673775-20190731224749958-1556030201.png]: /images/20230810/7bba7a8f41254d23a8b1584f5ee2dc43.png
[1673775-20190731230417125-544497771.png]: /images/20230810/9ed7367d150f4d28a268033cfc0d7430.png
[1673775-20190731145329370-217581584.png]: /images/20230810/0b95a23e7a19448f8d72f9399ded34e4.png
[1673775-20190731145415153-72795073.png]: /images/20230810/a3b88d3ed7cd4d95817f4e91b761d38c.png
[1673775-20190731145434608-67129165.png]: /images/20230810/8e1c3f29cb5b4ad6a7a4c48f64d8e388.png
[1673775-20190731145505283-1453532349.png]: /images/20230810/8325c9edb9334e0ea6b06aee12c6b42b.png
[1673775-20190731145604931-685172704.png]: /images/20230810/ca586f9c2f604eb7a8bdff71e6fa4e78.png
[1673775-20190731145654222-834866719.png]: /images/20230810/823b72d54d404940b17db9895f60565d.png
[1673775-20190731150113515-237422155.png]: /images/20230810/233cca5dd642479580be95a06d7bcaa2.png
[1673775-20190731150306078-1311422760.png]: /images/20230810/2ab3b6e9278e47fb99bb2e656607135b.png
[1673775-20190731150720815-217125795.png]: /images/20230810/abd761a52ddc46409163cdc86ac8da05.png
[http_element-cn.eleme.io_zh-CN]: http://element-cn.eleme.io/#/zh-CN
[http_element-cn.eleme.io_zh-CN_component_quickstart]: http://element-cn.eleme.io/#/zh-CN/component/quickstart
[1673775-20190731151038996-668377187.png]: /images/20230810/ae845bb3dbe94a0c910a7dd7a21900d2.png
[1673775-20190731151134506-1173059176.png]: /images/20230810/e1cfb8ac7892474dbf8ee6616901e721.png