vue從創建到完整的餓了么（4）Home.vue布局及vue-resource使用

levius 發布于2019-08-20 18:58 / 1845人閱讀

摘要：咱們在第一章創建的時候已經安裝了。而從創建到使用到結束分為了十個周期，稱為生命周期鉤子，而是把數據加載的的時候調用這是我目前的理解。中有兩個函數，第一個是請求成功的函數，第二個是請求失敗的函數。

說明

1.上一章--引入UI框架
2.蒼渡大神Github源碼地址--源碼地址
3.UI框架用的是Mint UI，上一章已經引入
4.數據接口地址--Github
5.下一章--v-for,v-bind以及計算屬性的簡單使用

頭部

1.先看一下UI圖

2.頭部沒有現成的組件，但是有一個固定定位的組件Header，稍加修改即可，home.vue修改如下

3.npm run dev 運行頁面如下
登錄與注冊應該是連接，但咱們先這么寫，后面用到再改，Header下的元素應該有個margin-top，這時發現這個css樣式應該很多頁面都要用，那應該寫在全局的css里，怎么寫才是全局的css？。咱們在main.js引入Mint-ui的時候，寫了一段代碼

import "mint-ui/lib/style.css"

這是引入Mint-ui的css，但咱們在home.vue組件并沒有引入可以直接使用，那咱們的全局CSS是不是也是這么引入的呢？
4.在src文件夾下新建文件夾style，在style內新建文件mycss.css，代碼如下

在main.js引入

import "./style/mycss.css"

在home.vue修改將全局css加入到元素上

頁面效果如下

如果谷歌手機模式瀏覽字變小在index.html的head加入以下代碼

可以看到全局樣式已經應用，接下來寫頁面

home.vue主體

1.home.vue頁面代碼修改如下

2.mycss.css修改如下（body默認有個margin：8px，是因為Mint-ui么？）

body{
    margin: 0px;
    height: 100vh;
    background-color: #f5f5f5;
}

.fixed{
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 5;
}

.ih40{
    height: 40px;
    line-height: 40px;
}
.ih50{
    height: 50px;
    line-height: 50px;
}

.bgcol{
    background-color:#26a2ff;
}
.bgfff{
    background-color: #fff;
}
.bgf5{
    background-color:#F5F5F5;
}

.fs0-8{
    font-size: 0.8rem;
}
.fs1-2{
    font-size: 1.2rem;
}

.col9f{
    color: #9F9F9F;
}
.col{
    color: #26a2ff;
}
.box{
    box-sizing: border-box;
}

.padlr10{
    padding:0px 10px 0px 10px;
}
.padtop10{
    padding-top:10px; 
}
.padtop40{
    padding-top:40px;
}
.mgtop40{
    margin-top: 40px;
}
.mgtop10{
    margin-top: 10px;
}
.mgbot10{
    margin-bottom: 10px;
}

.ovhid{
    overflow: hidden;
}
.right{
    float: right;
}

.clear{
    clear: both;
}
/*一像素分割線*/
.after{
     position: relative;
}
.after::after{
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #e4e4e4;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
}
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .after::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    .after::after {
        -webkit-transform: scaleY(0.33);
        transform: scaleY(0.33);
    }
}

頁面效果

需要注意的是，我寫了一個after的class，這是用來利用css偽類：：after來實現元素下邊框一像素的class（手機上如果直接用border-bottom設置1px的話頁面顯示并不是一像素而是2像素或者3像素，雖然大部分用戶并不能感覺出有什么區別，但是設計師會很不開心--這種代碼網上有很多）。

3.ok，頁面寫好了，下面是請求數據。接口地址。以前發送請求獲取數據，我是用ajax，但是vue自己封裝了一個數據請求插件vue-resource，咱們先來試試。

vue-resource

1.安裝vue-resource。咱們在第一章創建的時候已經安裝了。未安裝的可以進入vue項目后

 npm install --save vue-resource

安裝成功后，可以打開項目的package.json文件查看所有的配置文件，其中就有vue-resource的版本信息

2.引入。

使用首先要引入，打開main.js，輸入

import Resource from "vue-resource"
Vue.use(Resource)

ok，這就引入成功，就可以在組件中寫代碼使用。

3.使用
打開home.vue文件，在中輸入

export default {
  data () {
    return {
     
    }
  },
  component:{
  //注冊組件

  },
  mounted:function(){
  //生命周期
      this.$http.get("http://cangdu.org:8001/v1/cities?type=group").then(response => {
        console.log(response);
      }, response => {
        console.log(response);     
      });
  },
  computed:{
  //計算屬性

  },
  methods:{
  //函數

  }
}

return中用來寫需要用到的變量。
component中用來注冊本組件需要引用的其他外部組件（用到的時候再說）。
mounted是vue的生命周期，大家都知道頁面是有加載順序的，不是說一下子頁面就可以出來。而vue從創建到使用到結束分為了十個周期，稱為生命周期鉤子，而mounted是把vue數據加載的html的時候調用（這是我目前的理解）。
computed是計算屬性，其中寫一個個函數，這些函數用來計算屬性，當屬性改變時，函數的結果的也會隨之改變，而我們使用時只需要調用一次函數即可（用到再說）。
methods中用來寫函數，調用一次執行一次。

4.請求

咱們把數據請求放到 mounted中，vue-resource代碼如下

this.$http.get("http://cangdu.org:8001/v1/cities?type=group").then(response => {
    console.log(response);
  }, response => {
    console.log(response);     
  });

this指向vue。數據接口中請求城市列表是GET請求，所以我們使用this.$http.get()方法。then中有兩個函數，第一個是請求成功的函數，第二個是請求失敗的函數。上面的代碼使用了es6的箭頭函數（我也只是看得懂，并沒有用過）
城市的接口地址

數據請求代碼這就寫完了，咱們先運行試試，可以在控制臺看到
ok，數據請求成功，下面就是怎樣把數據放到頁面里呢？

云服務器 GPU云服務器餓了么餓了么 js 餓了么配送調度餓了么api接口

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84958.html

vue從創建到完整的餓了么（3）引入UI框架

摘要：說明上一章從創建到完整的項目路由蒼渡大神項目源碼地址地址下一章布局以及框架咱們先看一下的效果圖，原網址在此接下來用什么框架呢因為以前用的是，所以這次用練練手，文檔在此首先下載結果如圖那兩個警告說的啥我也不懂，先不管大神指說明上一章--vue從創建到完整的項目（2）路由蒼渡大神項目源碼地址--Github地址下一章--Home布局以及vue-resource UI框架 ...

fantix 2019-08-20 18:53 評論0 收藏0
vue從創建到完整的餓了么（5）v-for，v-bind與計算屬性

摘要：的命令都用來開頭。用來綁定屬性。排序思路重新創建一個，鍵名是從到，鍵值就是獲取的數據的鍵值。計算函數寫在哪一種方法是寫在生命周期的數據請求里，直接返回一個處理好的，但咱們用另一種方法計算屬性。把這個加到城市名字的上即可解決。說明 1.上一章--Home.vue及vue-resource使用2.cangdu大神的項目源碼地址--Github地址3.接口地址--Github地址4.UI框...

james 2019-08-20 18:58 評論0 收藏0
vue從創建到完整的餓了么（2）路由

摘要：首先在下創建文件夾，在下創建文件，所有的路由控制都寫在這個文件里。表示路徑，表示顯示的頁面要顯示哪個文件，表示的嵌套的路由。說明上一篇地址--創建蒼渡大神Github項目源碼地址--源碼地址下一篇地址--引入UI框架 home.vue 創建根據源碼，先在src文件夾下新建文件夾page，在page中新建home文件夾，在home文件夾中新建home.vue，hom...

mmy123456 2019-08-20 18:53 評論0 收藏0
vue2+webpack2實現餓了么移動端商家頁面

摘要：這是一個基于全家桶實現的餓了么移動端項目地址如果覺得對您有幫助，您可以在上給我個支持一下，謝謝如果有問題，也歡迎一起討論先來張項目動態截圖感受下項目運行克隆項目到本地安裝依賴本地開發，開啟服務器，瀏覽器訪問構建生產項目說明用到的技術棧這是一個基于Vue全家桶實現的餓了么移動端webapp項目github地址：https://github.com/JerryYgh/m...如果覺得對您...

Blackjun 2019-08-20 15:50 評論0 收藏0
vue2 + vuex 高度還原餓了么 App，與官方后臺真實數據交互，獲取商品信息，實現登陸、購

摘要：注此項目純屬個人瞎搞，正常下單請選擇餓了么官方客戶端。目前下單功能已經實現，下單功能完全采用官網真實數據，可以控制官網發短信或者打電話到指定的手機號碼，下單后可以在手機中查看并且付款。前言 vue2的發布后自己也研究了一段時間，奈何公司的技術棧是以react為主，沒有機會好好利用vue2去做一個完整的項目。雖然寫了幾個demo，但和寫一個完整的項目還是有很大差別的。于是自己想著用空余...

JeOam 2019-08-20 14:26 評論0 收藏0