本篇文章開始前,先介紹下什麼是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的用法。