vue-resource请求

man.js引入

import Vue from 'vue'
import VueResource from 'vue-resource'
import App from './App.vue'


Vue.use(VueResource)//内部会给vm对象和组件添加一个属性$http
/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})
<template>
 <div>
   <div v-if="!repoUrl">loding</div>
   <div v-else>most star repo is<a :href="repoUrl">{{repoName}}</a></div>
 </div>
</template>
 
<script>
export default{
      data(){
        return{
          repoUrl:'',
          repoName:''
        }
      },
      mounted(){
       // 发送ajax请求
       const url='https://api.github.com/search/repositories?q=v&sort=stars'
       this.$http.get(url).then(
         response=>{ 

           const result=response.data
           const mostRepo=result.items[0]
           this.repoUrl=mostRepo.html_url
           this.repoName=mostRepo.name
         },
         respone=>{
             alert('请求失败')
         }
       )
      }
}
</script>

 <style>
 
</style>

猜你喜欢

转载自www.cnblogs.com/hack-ing/p/12092903.html