<template> <!-- 全部的內容要被根節點包含起來 --> <div id="home"> 首頁組件 <button @click="getData()">請求數據</button> <hr> <br> <ul> <li v-for="item in list"> {{item.title}} </li> </ul> </div> </template> <script> /* 請求數據的模板 axios 的使用 一、安裝 cnpm install axios --save 二、哪裏用哪裏引入axios */ import Axios from 'axios'; export default{ data(){ return { list:[] } }, methods:{ getData(){ var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1'; Axios.get(api).then((response)=>{ this.list=response.data.result; }).catch((error)=>{ console.log(error); }) } }, mounted(){ /*生命週期函數*/ this.getData(); } } </script> <style lang="scss" scoped> /*css 局部做用域 scoped*/ h2{ color:red } </style>