vue從建立到完整的餓了麼（4）Home.vue佈局及vue-resource使用

說明

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加入到元素上

<template>
  <div>
      <mt-header fixed>
          <span slot="left">elm</span>
          <mt-button slot="right">登陸|</mt-button>
          <mt-button slot="right">註冊</mt-button>
      </mt-header>
       <h1 class='mgtop40'>這裏是home頁面</h1>
  </div>
</template>

頁面效果以下

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

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />

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

home.vue主體

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

<template>
  <div>
    <div class="fixed bgfff">
        <mt-header>
            <span slot="left">elm</span>
            <mt-button slot="right">登陸|</mt-button>
            <mt-button slot="right">註冊</mt-button>
        </mt-header>
    </div>

    <div class="padtop40 bgf5">
      <div class="ih50 padlr10 box bgfff">
        <span  class="">當前選擇城市</span>
        <span  class="right fs0-8 col9f">定位不許時，請在城市列表選擇</span>
      </div>
      <mt-cell  title="天津" class="col after" to=""  is-link  value=""></mt-cell>

      <div class="mgtop10 bgfff">
        <mt-cell class="after" title="熱門城市"></mt-cell>
        <div class="itembox ovhid col">
          <div>天津</div><div>天津</div><div>天津</div><div>天津</div>
          <div>天津</div><div>天津</div><div>天津</div><div>天津</div>
          <div>天津</div><div>天津</div><div>天津</div><div>天津</div>
        </div>        
      </div>         

      <div class="mgtop10 bgfff">
        <mt-cell class="after" title="A"></mt-cell>
        <div class="itembox ovhid">
          <div>天津</div><div>天津</div><div>天津</div><div>天津</div>
          <div>天津</div><div>天津</div><div>天津</div><div>天津</div>
          <div>天津</div><div>天津</div>
        </div>        
      </div>    

    </div>
    
  </div>
</template>

<script>

export default {
  data () {
    return {
     
    }
  },
  component:{
      
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.itembox>div{
  width:25%;
  float:left;
  text-align:center;
  height:40px;
  line-height:40px;
  box-sizing: border-box;
  border-right:1px solid #e4e4e4;
  border-bottom:1px solid #e4e4e4;
}
.itembox>div:nth-child(4n){
  border-right:0px;
}
</style>

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文件，在<script></script>中輸入

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，數據請求成功，下面就是怎樣把數據放到頁面裏呢？