KVue.jsでシングルページアプリケーションを作る

4. axiosを使ってREST APIで取得した情報を、Vue.jsでサイトに表示する

最近は自社のサービスで得たデータを広く活用して世に役立てようと、APIを公開して不特定多数の外部サービスに提供する動きが広がっています。
そういう動きの中で、これからのサイト制作ではそういった外部のデータをうまく使って自分のサイトをユーザーにとってより有益なものにしようとする動きは加速していくことになると思います。

そこで今回は例として、当サイトのID:14855の記事を取得してタイトルを出力するサンプルコードを載せておきます。
（みなさんがご利用になるときは、このコードを自身のサイト内に設置し、自身のサイトのWordPressの記事を取得するなどのコードに書き換えてください。
クロスドメインでの取得は、相手側（取得先）が許可していないとChromeなどではCORSエラーが出るためです）

※ 前回の記事のコードを修正する形をとっていますので、前回以前の記事も確認されることをおすすめします。

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css">
</head>

<body>
<main id="app">
<div v-cloak>
<transition
  name="fade"
  mode="out-in"
>

<div v-if="center" key="center">
<div class="animated fadeInDownBig">
<p>最初の画面</p>
<p>当サイトのID:14855の記事のタイトル：<span v-html="results"></span></p>
<div class="click" v-on:click="watchLeft">左の画面にいく</div>
<div class="click"  v-on:click="watchRight">右の画面にいく</div>
</div>
</div>

<div v-if="left" key="left">
<div class="animated" v-bind:class="leftSlideClass">
<p>左の画面</p>
<div class="click"  v-on:click="watchCenter">最初の画面に戻る</div>
<div class="click"  v-on:click="watchRight">右の画面にいく</div>
</div>
</div>

<div v-if="right" key="right">
<div class="animated" v-bind:class="rightSlideClass">
<p>右の画面</p>
<div class="click"  v-on:click="watchCenter">最初の画面に戻る</div>
<div class="click"  v-on:click="watchLeft">左の画面にいく</div>
</div>
</div>

</transition>
</div>
</main>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  var app = new Vue({
    el: "#app",
    data() {
      return {
        center: true,
        left: false,
        right: false,
        leftSlideClass: "fadeInBottomLeft",
        rightSlideClass: "fadeInBottomRight",
        results: ""
      };
    },
    created() {
        axios.get('https://100webdesign.jp/wp-json/wp/v2/posts/14855').then(response => {
            this.results= response.data['title']['rendered'];
        })
    },
    methods: {
      watchCenter: function () {
        this.center = true;
        this.left = false;
        this.right = false;
      },
      watchLeft: function () {
        this.center = false;
        this.left = true;
        this.right = false;
        this.leftSlideClass = "fadeInLeft";
      },
      watchRight: function () {
        this.center = false;
        this.left = false;
        this.right = true;
        this.rightSlideClass = "fadeInRight";
      },
    }
  });
</script>

<style>
div.click{
  cursor: pointer;
}

[v-cloak] {
  display: none;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-to,
.fade-leave {
  opacity: 1;
}
</style>
</body>

このようにREST APIを使ってサイトから情報を取得して動的にVue.jsで表示に落とすことができれば、いろいろとサービスに広がりができますね。

前の記事
3. animate.cssでVue.jsのコンテンツ切り替えエフェクトのバリエーションを増やす 次の記事
5. Vue.jsでローディング画面を用意する