vue2.0:(七)、vue-resource

本篇文章開始前,先介紹下什麼是vue-resource,而且如今還有一個axios。vue

  Vue.js是數據驅動的,這使得咱們並不須要直接操做DOM,若是咱們不須要使用jQuery的DOM選擇器,就沒有必要引入jQuery。vue-resource是Vue.js的一款插件,它能夠經過XMLHttpRequest或JSONP發起請求並處理響應。也就是說,$.ajax能作的事情,vue-resource插件同樣也能作到,並且vue-resource的API更爲簡潔。ios

  至於axios,vue更新到2.0以後,做者就宣告再也不對vue-resource更新,而是推薦的axios,因此如今愈來愈多的人用axios。本文先用vue-resource作。運行成功後,會嘗試使用axios。下面切入正題:ajax

  第一步:main.js :第一步兩個點,一個導入一個使用。json

代碼:axios

import Vue from 'vue';
import App from './App';
import router from './router';
import VueResource from 'vue-resource';  <!----------
import 'common/style/total.less';

Vue.use(VueResource);

/*eslint-disable no-new*/
new Vue({
    router,
    el:'#app',
    render: h => h(App)
})

 第二步:App.vue,咱們如今先要取到咱們所須要的數據。api

代碼:app

<template>
    <div id="aaa">
        <v-header :seller="seller"></v-header> <!--------------------------------這裏的部分是要綁定seller的數據。用 ‘ :’進行綁定。
        <div class="tab border-1px">
            <div class="tab-item">
                <router-link to="/goods">商品</router-link>
            </div>
            <div class="tab-item">
                <router-link to="/ratings">評論</router-link>
            </div>
            <div class="tab-item">
                <router-link to="/seller">商家</router-link>
            </div>
        </div>
        <router-view></router-view>
        <div class="footer">
            im footer
        </div>
    </div>
</template>

<script>
  import header from './components/header/header.vue';
  const ERR_OK = 0;
  export default{        
      data() {          <!--------------------------------這裏的部分是要把數據綁定頭部的header,由於header組件對應的數據是seller。這樣能夠把seller輸出,
        return {
          seller: {}
        }
    },
    created() {
      // ajax請求
      this.$http.get('/api/seller').then((response) => {
        response = response.body; // 返回json對象
        if (response.errno === ERR_OK) {
          this.seller = response.data;
          console.log(this.seller);
        }
      });
    },
      components:{
          'v-header':header
      }
  }
</script>

<style lang="less">
@import 'common/style/mixin';
#aaa
    .tab{
        display:flex;
        width:100%;
        height:40px;
        line-height:40px;
        .border-1px(rgba(7,17,27,0.1));
        .tab-item{
            flex:1;
            text-align: center;
            a{
                display:block;
                font-size:14px;
                color:#ccc;
                &.active {
                    color:rgb(240,20,20);
                }
            }
        }
    }
</style>

在這裏,咱們使用:  this.$http.get('/api/seller').then() 從接口中取出數據並用console.log打印出來。less

固然,有export就要有import。接收的話就在header組件裏面寫上import。以下圖:vue-resource

利用props去接收。這樣在標籤裏面就能取到seller裏面的東西了。flex

這就是最簡單的v-resource的用法。

相關文章
相關標籤/搜索