您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

12vue请求数据--完整 vue-resource

发布时间：2023-04-09 22:24:57编辑：雪饮阅读（）

安装vue-resource
vue-resource是vue官方提供的一个用于发起请求的插件属于是，由于是插件，所以这里使用方式类似模块化，但是又与模块化有点不同。
实际上这里老师安装时候是使用cnpm安装的，但是由于我本地没有安装cnpm，且我安装cnpm一直出错。
但如果我直接安装vue-resource也会一直出错。
最后我的解决办法是
npm config set registry https://registry.npm.taobao.org
npm install vue-resource –save
其中这里的--save的作用是，将所安装的vue-resource也写入到package.json
那么我的理解就是说下次别人拿到你的项目后就直接npm install即可，不需要额外再npm install vue-resource了
 
使用vue-resource
在src/main.js中引入这个vue-resource并use
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中使用vue-resource发送一个请求了
<template>
  <div id="app">
    <button @click="sendRequest()">发起一个请求</button>
  </div>
</template>
 
<script>
    export default {    
      data () {
        return {
          flag:true
        }
      },
      methods:{
        sendRequest(){
          var api="http://www.phonegap100.com/appapi.php?a=getPortallist&catid=20&page=1";
          this.$http.get(api).then(function(response){
              console.log("response:",response);
          },function(error){
            console.log("error:",error);
          })
        }
      },
    }
</script>