Vue.jsを触ってみる4 Ajaxを利用して 初期データを設定する

やりがいは不要

前回まででVue.jsの基本的な部分は動きは確認できたので今回はjQueryでも多用していたAJAXを利用した初期データの設定を試します。

ファイル構成
sample1.html 
/lib/vue.js
/lib/sample1.js

vue.jsのライフサイクルフックという機能を使えば初期データが設定できそうなのでまず下記のように記述してみました

sample1.js

var app = new Vue({
   el : "#initialData",
   data : {value : ""},
   mounted: function () {
       this.value = "初期データ";
   }
})

インスタンスの生成から破棄までの間に実行される関数のことをライフサイクルフックと呼ぶようで上記の中ではmounted が該当します。
インスタンスがマウントされた後にまずはこ固定の初期データが設定されるか確認します。

ライフサイクルの詳細は下記を参照


sample1.html

<!DOCTYPE html>
<html>
<head>
   <meta charset='utf-8'>
   <meta http-equiv='X-UA-Compatible' content='IE=edge'>
   <title>サンプル1</title>
   <script src='./lib/vue.js'></script>

</head>
<body>
   <div id="initialData">
       {{ value }} 
   </div>
</body>
<script src='./lib/sample1.js'></script>
</html>

sample1.htmlを開くと

画像1

初期値が設定されました。

初期表示時にデータを設定できるのが確認できたので後は固定で設定している個所をAJaxを利用するように変更すれば完成です。

"Vue.js Ajax"で検索するとaxiosを利用したサンプルが見つかったのでaxiosを利用してAjax通信を実装してみます。

下記からaxios.min.jsをダウンロードします。

他にデータ用のxmlファイルも用意しました。

ファイル構成
sample1.html 
/data/sample1.xml
/lib/vue.js
/lib/axios.min.js
/lib/sample1.js

sample1.xml

<?xml version="1.0" encoding="UTF-8"?>
<title>サンプル1</title>

sample1.xmlの内容をAjaxで取得してタイトルを表示するようにしました。

sample1.js

var app = new Vue({
   el : "#initialData",
   data : {value : ""},
   mounted: function () {
       axios.get("/data/sample1.xml").then(response => {
           var parser = new DOMParser();
           var doc = parser.parseFromString(response.data, "text/xml");
           var title = doc.getElementsByTagName("title");
           this.value = title[0].childNodes[0].nodeValue;
       })
   }
})

sample1.htmlを開くと

画像2

xmlのタイトルが表示されました。

いいなと思ったら応援しよう！