こんにちは、ゆきねこです。

最近Vue.jsを導入して開発を進めているので、技術をまとめていきたいと思います。

今回のソースコードはこんな感じ。

var id = "test_user";
var baseuri = "https://api-server.jp";
var url = baseuri + "/view/porsonal" + "&id=" + id;

var mv = new Vue({
 el:'#vue',
 data:{
  infos:void(0)
 }
 ,
 created: function(){
  axios.get(url).then((response) => {
  this.info = response.info;
 })
 .catch( (response) => {
  console.log(response);
  });
 },
 methods:{
  date_normalise(date){
   return date.substr(0,10);
  }
 },
})
<script src="https://unpkg.com/vue@2.5.17"></script><br>

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>

<div class="app">
<section>
 <h2 class="title">infomation</h2>
 <ul class="info">
   <li v-for="info in infos">
    <dl>
     <dd>
      <h3>{{ info.name }}</h3>
      <span class="date">{{ date_normalise(info.regist_date) }}</span>
      <span class="date">{{ info.gender }}</span>
     </dd>
    </dl>
    </a>
  </li>
 </ul>
</section>
</div>

<script src="/js/vue.js" type="text/javascript"></script>

解説していきます。

Vue.js

new Vue({
 el:'#vue',
 data:{
  infos:void(0)
}

この部分がVue.jsのコア?的なところです。

dataの部分で描画するデータを定義するのですが、今回はAPIでデータを取ってくるため、このようになっています。

 created: function(){
   axios.get(url).then(
    (response) => {   this.info = response.info;
  })  
    .catch( (response) => {
    console.log(response);
  });
},

次にこの部分です。

createdはvue.jsが呼ばれてHTMLにデータを渡す前にデータを整形する部分です。

キャッシュとして保持されて渡されるようなので現在はあまり重い処理は書きたくない印象です。

そして、axiosですが、こちらはjQueryでいう$.ajaxです。

htmlファイルであらかじめ読んでおいて、この部分でAPIを叩きます。

帰ってきたresponseを先ほどのdataに格納します。

methods:{
 date_normalise(date){
  return date.substr(0,10);
 }
},

そしてmethodですが、こちらはあらかじめ定義しておいて、HTML内の関数が呼ばれている部分で初めて処理が実行されます。

HTML

HTML側ですが以下の部分で配列をループします。
<li v-for="info in infos">

そしてinfoのデータを以下のように描画していきます。

<h3>{{ info.name }}</h3>

<span class="date">{{ date_normalise(info.regist_date) }}</span>

 <span class="date">{{ info.gender }}</span>

date_normaliseで先ほど定義したvue.jsの関数を呼び出しているかんじです。

 

あと、ハマった点はCDNでソースを読み込む順番ですね。

実行するvueファイルはデータを埋め込む箇所の後にしないと認識されないです。

カテゴリー: JavaScript

0件のコメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です