Vue 请求数据（vue-resource）

绝地灬酷狼 2022-04-23 00:38 154阅读 0赞

#### 使用vue-resource请求数据的步骤 ####

1.  **需要安装vue-resource模块， 注意加上 --save  
    npm install vue-resource --save / cnpm install vue-resource --save**  
    ![在这里插入图片描述][20190122094944288.png]  
    安装好之后，在package.json 中检查一下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70]  
    看到vue-resource就可以了
2.  **在main.js引入 vue-resource  
    import VueResource from ‘vue-resource’;**
    
    main.js

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue';
    import App from './App';
    
    import Vuesource from 'vue-resource'
    
    Vue.use(Vuesource);
    /*使用vue-resource请求数据的步骤 1、需要安装vue-resource模块， 注意加上 --save npm install vue-resource --save / cnpm install vue-resource --save 2、main.js引入 vue-resource import VueResource from 'vue-resource'; 3、main.js Vue.use(VueResource); 4、在组件里面直接使用 this.$http.get(地址).then(function(){ }) */
    
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({ 
    el: '#app',
    components: {  App },
    template: '<App/>'
    })

1.  **在main.js 中使用 Vue.use(VueResource);**  
    代码如上
2.  **在组件里面直接使用（语法格式如下）  
    this.$http.get(地址).then(function()\{  
    \})**  
    这个是我自己定义的Home.vue 的代码

<template>
       
       <div id="home">
            首页组件
    
    
           <button @click="getData()">请求数据</button>
    
           <hr>
           <br>
    
           <ul>
               <li v-for="item in list">
                                           
                   {
       {item.title}}
               </li>
           </ul>
       </div>
    
    </template>
    
    <script> /* 请求数据的模板 vue-resource 官方提供的 vue的一个插件 axios fetch-jsonp */ export default{ data(){ return { msg:'我是一个首页组件msg', list:[] } }, methods:{ getData(){ //请求数据 var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';//定义好的一个数据 this.$http.get(api).then((response)=>{ console.log(response);//观察控制台它的数据到底是在哪个部分 //注意this指向 //这些都是固定的语法格式 this.list=response.body.result; //list接收数据 },function(err){ //接收错误 console.log(err); }) } }, mounted(){ /*生命周期函数*/ this.getData(); // 当页面刷新时自动加载数据 } } </script>
    
    <style> </style>

我是在根组件App.vue中引用的Home.vue ，这个是App.vue的代码：

<template>
    
    
     <div id="app"> 
       
    
        <v-home></v-home>
     
        
     </div>
    </template>
    
    <script> import Home from './components/Home.vue'; export default { data () { return { msg:'你好vue' } }, components:{ /*前面的组件名称不能和html标签一样*/ 'v-home':Home, } } </script>
    
    <style lang="scss"> </style>

运行的效果是这样的：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70 1]  
目录结构在第一步已给出，部分地方做出注解。若有任何疑问或是不解，请在下方评论，谢谢。

[20190122094944288.png]: /images/20220325/99c490e36dff4a3caa85457373a8b102.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70]: /images/20220325/b3b70c9d7b3646709cf2aa4b4b137686.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70 1]: /images/20220325/393ab883907448e78893968ce1d1a493.png