Vue.js框架--插件vue-resource请求数据（十一）

雨点打透心脏的1/2处 2024-02-18 23:28 8阅读 0赞

**主要操作技能：**

1. 通过https://github.com/ 查找 vue-resource插件

![70][]

![70 1][]

2 .使用vue-resource请求数据的步骤：.

2.1)需要安装 vue-resource模块 ，注意加上--save  
npm install vue-resource --save/cnpm install vue-resource --save  
  
2.2) 在main.js中引用  
import VueResource from 'vue-resource'  
  
Vue.use(VueResource);  
  
2.3)在组件中直接使用  
this.$http.get(地址).then(function()\{\});

**编写代码:**

***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>
    	/**
    	 *  请求数据模板
    	 *  https://github.com/ 查找 
    	 *  >cnpm install vue-resource --save
    	 *  vue-resource  官方提供的一个插件
    	 *    
    	 *  axios
    	 * 
    	 *  fetch-jsonp
    	 * 
    	 */
    	export default {
    		data() { //数据
    			return {
    				msg: '我是首页组件',
    				list: [] //存放请求数据
    			}
    		},
    		methods: { //方法
    			getData() {
    				//请求数据地址
    				var url = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
    
    				//get方式
    				//				this.$http.get(url).then(function(response) {
    				//						console.log(response);
    				//					},
    				//					function(err) {
    				//						console.log(err);
    				//					})
    
    				//修改成=>
    				this.$http.get(url).then((response) => {
    						console.log(response);
    
    						//this指向当前对象			
    						this.list = response.body.result;
    					},
    					function(err) {
    						console.log(err);
    					})
    			}
    		},
    		mounted() { //生命周期函数  (直接初始化数据到页面了哦！)
    			this.getData();
    		}
    
    	}
    </script>

main.js

import Vue from 'vue'
    import App from './App.vue'
    import VueResource from 'vue-resource'
    
    Vue.use(VueResource);
    
    new Vue({
      el: '#app',
      render: h => h(App)
    })

App.vue

<template>
    	<div id="app">
         
         <v-home></v-home>
    	</div>
    </template>
    
    <script>
    	import Home from './components/Home.vue'  //1.引入组件
    	export default {
    		name: 'app',
    		data() { //业务逻辑的数据
    			return {
    				msg: 'hello'
    			}
    		},
    		components: { //2.挂载组件
    			'v-home': Home
    		}
    	}
    </script>

**效果:**

![70 2][]

![70 3][]

单击按钮，就能获得查询出来的数据

![70 4][]

直接初始化数据到页面(用到生命周期函数 mounted()\{\})

![70 5][]

[70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/c71ed9d58bb949c39bb236d8f56babb7.png
[70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/0fa556ec73c145cb878fa2dfb35cc9fd.png
[70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/24c12647c71f45a9a2d64eb64e87c873.png
[70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/47b91d61ac304865bbfaf7be33339c92.png
[70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/a26f929caf034c61b17d46dccc349c08.png
[70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/1a663bc23f3e4bf2a12d31b0d368f5c6.png