准备

Vue.js 2.3.3

本项目已托管在Github

代码分析

<div id="demo">
    <h1>Latest Vue.js Commits</h1>
    <template v-for="branch in branches">
        <input type="radio"
               :id="branch"
               :value="branch"
               name="branch"
               v-model="currentBranch">
        <label :for="branch">{{ branch }}</label>
    </template>
    <p>vuejs/vue@{{ currentBranch }}</p>
    <ul>
        <li v-for="record in commits">
            <a :href="record.html_url" target="_blank" class="commit">{{ record.sha.slice(0, 7) }}</a>
            - <span class="message">{{ record.commit.message | truncate }}</span><br>
            by <span class="author"><a :href="record.author.html_url" target="_blank">{{ record.commit.author.name }}</a></span>
            at <span class="date">{{ record.commit.author.date | formatDate }}</span>
        </li>
    </ul>
</div>

    let apiURL = 'https://api.github.com/repos/vuejs/vue/commits?per_page=3&sha=';

    let demo = new Vue({
        el: '#demo',

        data: {
            branches: ['master', 'dev'],
            currentBranch: 'master',
            commits: null
        },

        // created 这个钩子在实例被创建之后被调用

        created: function(){
            this.fetchData()
        },

        watch: {
            currentBranch: 'fetchData'
        },

        filters: {
            truncate: function (v) {
                let newline = v.indexOf('\n');
                return newline > 0 ? v.slice(0, newline) : v;
            },
            formatDate: function (v) {
                return v.replace(/T|Z/g, ' ');
            }
        },

        methods: {
            fetchData: function () {
                let xhr = new XMLHttpRequest();
                let 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();
            }
        }
    })

<script>中实例化了一个demo的Vue实例，该实例挂载在#demo上。

当实例被创建后，通过created这个钩子函数调用实例中的fetchData函数。watch属性来响应数据变化，此处当currentBranch的值发生变化后，会调用methods中的fetchData函数。在fetchData函数中，向api地址发送请求，请求地址后拼接了当前选择的分支。在xhr.onload中将responseText赋值给实例中的commits。

实例中还定义了过滤器filters，过滤器被用在列表标签中的mustache插值中，对commits返回的值进行过滤。过滤器将|之前语句的值传入过滤器对应的函数。

本文参考了

作者：hayato
文章版权：本站所有文章版权依赖于 CC BY-NC-SA 3.0 Unported License
本文链接：https://blog.axis-studio.org/2017/06/11/使用Vue展示最新的Vue-js提交数据/