Vue.js框架--axios请求数据（十二）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hlx20080808/article/details/82382853

主要操作技能：

        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同（十一）一样

效果：