主要操作技能:
vue本身是不支持发送ajax请求,需要通过其他库来实现的(比如vue1.0版本官方推荐的vue-resource、vue2.0版本官方推荐的axios),或者也可以使用jquery来发送ajax请求;
vue2.0版本已经不推荐vue-resurce了,官方推荐axios来发送, 先了解的是axios是一个基于Promise的HTTP请求客户端,用来发送请求。
axios本身具有以下特征:
- 从浏览器中创建 XMLHttpRequest
- 从 node.js 发出 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防止 CSRF/XSRF
编写代码:
Home.vue
<template>
<!--所以的内容多要被根节点包含起来 -->
<div id="home">
{{msg}}
<button @click="getData()">请求数据</button><br /><br />
<ul>
<li v-for="item in list">
{{item.aid}}--{{item.title}}
</li>
</ul>
</div>
</template>
<script>
/**
*
* axios使用
* 1>安装 cnpm install axios --save
* 2>哪里使用哪里引用 import Axios from 'axios'
*
*
* fetch-jsonp
*
*/
import Axios from 'axios';
export default {
data() { //数据
return {
msg: '我是首页组件',
list: [] //存放请求数据
}
},
methods: { //方法
getData() {
//请求数据地址
var url = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
Axios.get(url).then((response)=>{
// console.log(response);
//获取数据
this.list=response.data.result;
}).catch((error)=>{
console.log(error);
})
}
},
mounted() { //生命周期函数 (直接初始化数据到页面了哦!)
this.getData();
}
}
</script>
App.vue同(十一)一样
效果: