一 創建測試項目
vue init webpack-simple vuedemo
二 進入demo目錄
cd vuedemo
三 安裝依賴
cnpm install
四 安裝axios
//從包管理下載axios包，并更新到項目的package.json里
cnpm install axios --save
五 修改代碼
├── src
│ ├── App.vue
│ ├── components
│ │ └── Home.vue
App.vue
<template>
<!-- all content need in root-->
<div id="home">
<h2>{{msg}}</h2>
<button @click="getData()">request data</button>
<hr>
<br>
<ul>
<li v-for='item in list' :key="item.id">
{{item.website}}
</li>
</ul>
</div>
</template>
<script>
import Axios from 'axios';
export default {
data(){
return {
msg:'i am home component!',
list:[]
}
},
methods: {
getData(){
var api='https://jsonplaceholder.typicode.com/users'
Axios.get(api).then((response)=>{
console.log(response);
this.list=response.data;
}).catch((error)=>{
console.log(error);
})
}
},
mounted(){
this.getData()
}
}
</script>
<style>
#home h2{
color: red;
}
</style>
Home.vue
<template>
<!-- all content need in root-->
<div id="home">
<h2>{{msg}}</h2>
<button @click="getData()">request data</button>
<hr>
<br>
<ul>
<li v-for='item in list' :key="item.id">
{{item.website}}
</li>
</ul>
</div>
</template>
<script>
import Axios from 'axios';
export default {
data(){
return {
msg:'i am home component!',
list:[]
}
},
methods: {
getData(){
var api='https://jsonplaceholder.typicode.com/users'
Axios.get(api).then((response)=>{
console.log(response);
this.list=response.data;
}).catch((error)=>{
console.log(error);
})
}
},
mounted(){
this.getData()
}
}
</script>
<style>
#home h2{
color: red;
}
</style>
六 運行
npm run dev
image.png
七 總結
1 了解js網絡庫vue-resource的使用，還有其他備選axios，fecth-jsonp
《1 安裝vue-resource
cnpm install axios --save
《2 導入vue-resource
在Home.vue里面
import Axios from 'axios';
《3 使用vue-resource
Axios.get(api).then((response)=>{
}).catch((error)=>{
console.log(error);
})
