vue.jsのメソッドとAPI

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

最近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)
}

　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);
 }
},

HTML

<li v-for="info in infos">

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

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

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