最近何かと話題の Vue.js。Movable Type と組み合わせて、ちょっと触ってみました。
やること
Movable Type の Data API から、記事データを取得する。
Vue.js を使って、記事のタイトルデータをループ処理して表示する
流れ
- XMLHttpRequestで Movable Type のData API から記事データをJSONで取得する
- Vue.jsでJSONデータを読み込み、タイトルだけを<ul>でループ表示する
コード
下記のコードで、記事のタイトルをループ表示できました。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Vue.js でMovable Type から記事タイトルを表示するサンプルコード</title>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<script>
// XMLHttpRequest 用の変数を定義する
let xhr = new XMLHttpRequest();
// html読み込み時に Movable Type の Data APIへアクセスし、JSONデータを取得
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status == 200) {
// 取得したJSONデータを、変数 entries へ格納
const entries = this.response;
// 変数 entries を利用して、Vue.js のインスタンスを生成
const example1 = new Vue({
el: '#example-1',
data: entries
})
}
}
// Movable Type のData APIから取得するデータを定義。今回は記事データを取得。
xhr.open('GET', 'http://MTのDataAPIのurl/v3/sites/ブログID/entries', true);
xhr.responseType = 'json';
xhr.send(null);
</script>
</head>
<body>
<ul id="example-1">
<li v-for="item in items">
{{ item.title }}
</li>
</ul>
</body>
</html>
参考URL
https://jp.vuejs.org/v2/guide/list.html
https://www.movabletype.jp/developers/data-api/
https://www.movabletype.jp/developers/data-api/v3-reference.html
備考
Vue.js で REST API から何かデータを取得する場合、別ライブラリの[vue-resource]というライブラリを使っていたようですが、現在は推奨から外れているとのこと。
Vue.js を使ってAjax 通信を行うには、XMLHttpRequestやjQueryなどの、別ライブラリで行う必要があるようです。
(そのうちVue.jsにAjax通信用のライブラリか何かが実装されるのかもしれないけど)