安裝
本地環境安裝路由插件vue-resource： cnpm install vue-resource --save-dev
*沒有安裝淘寶鏡像的可以將 cnpm 替換成 npm
想要安裝的可以看這篇文章http://www.cnblogs.com/padding1015/p/7162024.html，（打開搜索 鏡像 即可跳轉到對應位置）
配置
1.引用
main.js中用import引入進來：
import VueResource from 'vue-resource'
* 注意這里VueResource是自定義的名字。下邊注冊的時候會用到
2.注冊
同樣，main.js中注冊，同vue-router
Vue.use(VueResource)
3.配置
直接在對應頁面的created鈎子函數配置即可：
created() {
this.$http.get("http://jsonplaceholder.typicode.com/todos")
.then((data) => {
// console.log(data)
this.arrs = data.body;
})
鏈接是數據接口的地址，arrs是在本頁面的data函數中定義的空對象，data.body是拿到的數據存放的地方。
4. 使用數據
根據拿到的數據結構和內容對應渲染
頁面中直接渲染使用：
<li v-for="item in arrs" v-on:click="item.completed = ! item.completed">
<!-- {{item}} -->
<span class="id">{{item.userId}} </span>
<span class="title">{{item.title}}</span>
<span class="completed" v-show="item.completed">選中</span>
</li>
用到vue-resource的頁面代碼參考：
1 <template>
2 <div class="app-cont">
3 <div class="vue-resource">
4 <h3>獲取其他地址里的json數據並進遍歷</h3>
5 <ul>
6 <li v-for="item in arrs" v-on:click="item.completed = ! item.completed">
7 <!-- {{item}} -->
8 <span class="id">{{item.userId}} </span>
9 <span class="title">{{item.title}}</span>
10 <span class="completed" v-show="item.completed">選中</span>
11 </li>
12 </ul>
13 </div>
14 </div>
15 </template>
16 <script>
17 export default{ 18 name: "app-cont", 19 data () { 20 return { 21 arrs:{} 22 } 23 }, 24 methods: { 25 }, 26 // 頁面加載之前，用created鈎子函數-獲取網頁數據
27 created() { 28 this.$http.get("http://jsonplaceholder.typicode.com/todos") 29 .then((data) => { 30 // console.log(data)
31 this.arrs = data.body; 32 }) 33 } 34 } 35 </script>
36 <style scoped>
37 h2{ 38 margin: 0; 39 padding: 10px 0; 40 background: #f5f5f5; 41 } 42 ul{ 43 display: flex; 44 flex-wrap: wrap; 45 margin: 0 auto; 46 padding: 10px 0; 47 } 48 li{ 49 position: relative; 50 flex-grow: 1; 51 flex-basis: 200px; 52 text-align: center; 53 padding: 30px; 54 margin: 5px; 55 border: 2px solid Lightgreen; 56 } 57 li:hover{ 58 background: Lightgreen; 59 cursor: pointer; 60 } 61 span{ 62 color: #333; 63 font-weight: bold; 64 } 65 .vue-resource{ 66 margin: 20px 40px; 67 border: 1px solid Lightgreen; 68 background: #eee; 69 } 70 span{ 71 display: block; 72 } 73 span.id{ 74 width: 75%; 75 margin: 0 auto 20px; 76 padding: 10px 0; 77 border-bottom: 1px solid Lightgreen; 78 } 79
80 span.completed{ 81 position: absolute; 82 top: -6px; 83 right: 10px; 84 z-index: 999; 85 width: 20px; 86 height: 45px; 87 padding-top: 5px; 88 color: #90ee90; 89 background: #000; 90 } 91 </style>
聲明：
請尊重博客園原創精神，轉載或使用圖片請注明：
博主：xing.org1^
出處：http://www.cnblogs.com/padding1015/