vue 官方实例教程抓取git资料 vue获取网络上的资料

gitHub API地址

https://developer.github.com/v3/repos/commits/#parameters

我们打开如下地址

https://developer.github.com/v3/issues/comments/

可以看到

List comments on an issue
点进去可以跳转到

GET /repos/:owner/:repo/issues/:number/comments

owner 代表用户名

上代码h5

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="demo">
    <h1>Latest Vue.js Commit</h1>
    <template v-for="branch in branches">
      <input type="radio" name="" id=""
             :value="branch"
             v-model="currentBranch"
             >
          {{branch}}
      
    </template>
    <p>vuejs/vue@{{currentBranch}}</p>
    <ul>
      <li v-for="record in commits">
        <a :href="record.html_url" target="_black" class="commit">更新记录</a>
         -
        by <span class="author">
        <a :href="record.author.html_url" target="_blank">{{record.commit.author.name}}</a>
        at <span class="date">{{record.commit.author.date}}</span>
        </span>
      </li>
    </ul>
  </div>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</body>
</html>

var apiURL='https://api.github.com/repos/vuejs/vue/commits?per_page=3&sha=';
var demo=new Vue({
  el:'#demo',
  data:{
    branches:['master','dev'],
    currentBranch:'master',
    commits:null
  },
  created:function(){
    this.fetchData();
  },
  watch:{
    currentBranch:'fetchData'
  },
  methods:{
    fetchData:function(){
      var xhr=new XMLHttpRequest();
      var self=this;
      xhr.open('GET',apiURL+self.currentBranch);
      xhr.onload=function(){
        self.commits=JSON.parse(xhr.responseText);
        console.log(self.commits[0].html_url)
      }
      xhr.send();
    }
  }
});

可以看到遇到了很多新的语法。这里讲解一下

以下是javaScript获取数据这个很好理解

 var xhr=new XMLHttpRequest();
      var self=this;
      xhr.open('GET',apiURL+self.currentBranch);
      xhr.onload=function(){
        self.commits=JSON.parse(xhr.responseText);
        console.log(self.commits[0].html_url)
      }
      xhr.send();

created 是生命周期我们也知道了呢

 watch:{
    currentBranch:'fetchData'
  },

就相当于

  watch:{
    currentBranch:function(){
      this.fetchData();
    }
  },

当 currentBranch的数值发生变化的时候。就会调用fetchDate()这个方法

<input type="radio" name="" id=""
             :value="branch"
             v-model="currentBranch"
             >

:value的写法 vue中冒号是v-bind:的缩写，知道缩写以后，更容易提高我们的效率

b-bind官方讲解https://cn.vuejs.org/v2/api/#v-bind

这里用到了v-bind:value="branch"

别的就没有什么新东西啦~~

vue 官方实例教程 抓取git资料 vue获取网络上的资料

猜你喜欢

vue 官方实例教程抓取git资料 vue获取网络上的资料