検証環境

Vue.js (v2.4.2)
axios (v0.16.2)

gulpでトランスパイラを使用した状態で検証しています。

公式リンク

axios のインストール

npm install axios --save

作成画面

読み込みボタン押下でリンク付きの投稿タイトルとタグを取得します。

ソースコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Qiita Posts | Vue.js + axios test</title>
    <link rel="stylesheet" href="/css/main.css">
    <script src="https://unpkg.com/vue"></script>
    <script src="/js/main.js" charset="utf-8" async></script>
</head>
<body>
    <section id="qiita-posts">
        <h1>Qiita Posts</h1>
        <button v-on:click="request">読み込み</button>

        <hr>

        <ul>
            <li v-for="post in posts" >
                <span class="tag" v-for="tag in post['tags']">{{ tag['name'] }}</span>

                <a v-bind:href="post['url']" target="_blank" rel="noopener noreferrer">
                    <div>{{ post['title'] }}</div>
                </a>
            </li>
        </ul>
    </section>
</body>
</html>

main.scss

body {
    padding: 0 10px;
}

#qiita-posts {
    h1 {
        margin-bottom: 20px;
        font-size: 1.2rem;
        font-weight: bold;
    }

    button {
        margin-bottom: 10px;
        padding: 4px 10px;
        color: #fff;
        font-size: 0.75rem;
        background: #325d7c;
        border: none;
        border-radius: 2px;
        box-shadow: 0 4px 0 darken( #325d7c, 4% );
        cursor: pointer;
    }

    li {
        margin-bottom: 15px;
        line-height: 1.5;

        .tag {
            display: inline-block;
            margin: 0 1px 6px;
            padding: 2px 6px;
            color: #fff;
            font-size: 0.75rem;
            background: #7daaca;
        }

        a {
            color: darken( #7daaca, 24% );
        }
    }
}

main.js

'use strict';

import axios from 'axios';

let vm = new Vue( {
    el: '#qiita-posts',
    data: {
        posts: void(0),
    },
    methods: {
        request: () => {
            axios.get( 'https://qiita.com/api/v2/users/[QiitaユーザID]/items' )
                .then( ( res ) => {
                    vm.posts = res.data;
                } )
                .catch( ( res ) => {
                    console.error( res );
                } );
        }
    },
} );

取得されるデータ構造の詳細は、Qiita API v2ドキュメント - 投稿を参照してください。

おわりに

Vue.jsの勉強ついでに実装してみましたが、axiosと組み合わせるとAjax周りの処理が簡単すぎて驚くばかりです。

Vue.js + axios で Qiita API v2 を叩いて投稿を取得する

検証環境

公式リンク

axios のインストール

作成画面

ソースコード

おわりに