１０分で基礎がわかるVue.js-入門

#はじめに
皆さん、こんにちは！Webシステム開発エンジニアの蘭です！
今日はVue.jsについて語りたいと思います。

昔Webシステム開発技術が始まった時、バックエンドではPHPやRubyを使い直接OracleやMySQLの内部のデータベースにSELECT,INSERT,UPDATE,DELETEを実行してた時代でした。

それが今はSaasの時代になり、内部データを直接弄るだけではなく、
フロントバックエンドの合化、外部連携の柔軟性が整ってる便利なREST APIファースト開発が主になり、フロントで「サイト更新の速度」や直感的なリ「アルタイムの更新」がサイト品質に関してもはや欠かせない物になりました。
　参考：[APIファーストで開発する7つのメリット](https://developer.ntt.com/ja/blog/API%E3%83%95%E3%82%A1%E3%83%BC%E3%82%B9%E3%83%88%E3%81%A7%E9%96%8B%E7%99%BA%E3%81%99%E3%82%8B7%E3%81%A4%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88)

####やりたいこと：【サイト更新速度の向上、直感的なアルタイムの更新】
バックエンドではサーバーに対するリクエストはAPIでプロパティを渡し、
フロントではJavascriptを使い、最小限の範囲で非同期にVirtual DOMを更新する事が現在APIファーストの開発では重要な事です。

　参考：
　　　[JavaScript初心者でもすぐわかる！DOMとは何か？](https://eng-entrance.com/what-is-dom)
　　　[VirtualDOMの仕事ってなに？表示速度がはやい理由](https://developer.ntt.com/ja/blog/API%E3%83%95%E3%82%A1%E3%83%BC%E3%82%B9%E3%83%88%E3%81%A7%E9%96%8B%E7%99%BA%E3%81%99%E3%82%8B7%E3%81%A4%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88)

##何故Vue.js
理由は比較的に簡単
>・Javascriptがあまり分からない初心者でも学べるJavascriptフレームワーク
 ・単一ファイルコンポーネントで、HTML、CSS、Javascriptが同一のファイルで管理できる。
![alt](https://jp.vuejs.org/images/vue-component.png)

もちろん、自分に合ったJavascriptフレームを選択するのが一番ですね。　　
参考：
　　　[JavaScript: フレームワーク React/Vue/Angularについて](https://qiita.com/gumiTECH/items/13eb7da8224bf93c67b5)
　　　[Vue・React・Angularのパフォーマンス比較検証](https://ics.media/entry/190731/)

##始めよう！Vue.js
###Vue.jsって何？
>・Webアプリケーションでユーザーインターフェースを構築するため、オープンソースのJavascriptフレームワーク。
・Axios等他のJavascriptライブラリが導入できる。
・高機能なシングルページアプリケーション（SPA）を構築することができる。
・vue-routerやvue-validation,vuex等組み合わせることで、大規模なWebアプリ開発のニーズまでサポートする統合的な環境を提供し、作者Evan氏の「Progressive Framework」の概念を活かす。
・ECMAScript 5をベースに、現在のブラウザーではほぼ使える。
　　※ES6で書くと、動かない場合があります。（特にIE）
参考：
　　　[作者Evan氏のVue.js Progressive Framework](https://qiita.com/mikakane/items/3bd6af69259f5af6fecb)
　　　[ECMAScript 5](https://caniuse.com/#feat=es5)
　　　[ES5とES6の違いをまとめてみた](https://qiita.com/rifutan/items/a55f132d4dae7e2f1941)

###Vue.jsのインストール
こちらについては以下の公式記事を参考してください。
　　　[Vue.jsのインストール](https://jp.vuejs.org/v2/guide/installation.html)

実際の開発ではnpmでインストールしますが、練習用はCDNでもできます。

```Vue.js_cdn
 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"> 
 </script>
```

###ドキュメント
Vue.jsは日本語版で、内容は充実。
　[Vue.jsの公式マニュアル](https://jp.vuejs.org/v2/guide/)


###1.Hello World
【以下のコードは[こちら](https://www.hypertextcandy.com/vuejs-introduction-el-data)の記事を引用してます。】
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="uramaya" data-slug-hash="oNNgaPO" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue_Hello World">
  <span>See the Pen <a href="https://codepen.io/uramaya/pen/oNNgaPO">
  Vue_Hello World</a> by Uramaya (<a href="https://codepen.io/uramaya">@uramaya</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

###2.テンプレート
####v-if / v-else-if / v-else
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="uramaya" data-slug-hash="qBBEJvv" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue_Template">
  <span>See the Pen <a href="https://codepen.io/uramaya/pen/qBBEJvv">
  Vue_Template</a> by Uramaya (<a href="https://codepen.io/uramaya">@uramaya</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="uramaya" data-slug-hash="rNNaqgr" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue_Template_V-if_2">
  <span>See the Pen <a href="https://codepen.io/uramaya/pen/rNNaqgr">
  Vue_Template_V-if_2</a> by Uramaya (<a href="https://codepen.io/uramaya">@uramaya</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

####v-show
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="uramaya" data-slug-hash="oNNgarr" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue_Template_V-Show">
  <span>See the Pen <a href="https://codepen.io/uramaya/pen/oNNgarr">
  Vue_Template_V-Show</a> by Uramaya (<a href="https://codepen.io/uramaya">@uramaya</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


####繰り返し:v-for
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="uramaya" data-slug-hash="ZEEYqgR" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue_Template_V-for">
  <span>See the Pen <a href="https://codepen.io/uramaya/pen/ZEEYqgR">
  Vue_Template_V-for</a> by Uramaya (<a href="https://codepen.io/uramaya">@uramaya</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

###3.クラスとスタイル

####HTMLクラス
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="uramaya" data-slug-hash="abbzQoX" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue_Template_V-HTMLClass">
  <span>See the Pen <a href="https://codepen.io/uramaya/pen/abbzQoX">
  Vue_Template_V-HTMLClass</a> by Uramaya (<a href="https://codepen.io/uramaya">@uramaya</a>)
  on <a ="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


####style属性
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="uramaya" data-slug-hash="WNNbYGX" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue_Template_V-Style">
  <span>See the Pen <a href="https://codepen.io/uramaya/pen/WNNbYGX">
  Vue_Template_V-Style</a> by Uramaya (<a href="https://codepen.io/uramaya">@uramaya</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

###4.フォーム入力
####テキストボックス、エリアに文字入力
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="uramaya" data-slug-hash="YzzPRNw" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue_Template_V-From-text">
  <span>See the Pen <a href="https://codepen.io/uramaya/pen/YzzPRNw">
  Vue_Template_V-From-text</a> by Uramaya (<a href="https://codepen.io/uramaya">@uramaya</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


####セレクトボックス
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="uramaya" data-slug-hash="qBBEQrW" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue_Template_V-SelectBox">
  <span>See the Pen <a href="https://codepen.io/uramaya/pen/qBBEQrW">
  Vue_Template_V-SelectBox</a> by Uramaya (<a href="https://codepen.io/uramaya">@uramaya</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

####チェックボックス
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="uramaya" data-slug-hash="JjjoeNP" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue_Template_V-From-checkbox">
  <span>See the Pen <a href="https://codepen.io/uramaya/pen/JjjoeNP">
  Vue_Template_V-From-checkbox</a> by Uramaya (<a href="https://codepen.io/uramaya">@uramaya</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

####ラジオ
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="uramaya" data-slug-hash="KKKwrme" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue_Template_V-From-radio">
  <span>See the Pen <a href="https://codepen.io/uramaya/pen/KKKwrme">
  Vue_Template_V-From-radio</a> by Uramaya (<a href="https://codepen.io/uramaya">@uramaya</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

####ファイル
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="uramaya" data-slug-hash="GRRgwEr" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue_Template_V-From-file">
  <span>See the Pen <a href="https://codepen.io/uramaya/pen/GRRgwEr">
  Vue_Template_V-From-file</a> by Uramaya (<a href="https://codepen.io/uramaya">@uramaya</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

####その他
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="uramaya" data-slug-hash="ExxaOXz" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="ExxaOXz">
  <span>See the Pen <a href="https://codepen.io/uramaya/pen/ExxaOXz">
  ExxaOXz</a> by Uramaya (<a href="https://codepen.io/uramaya">@uramaya</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


###5.イベントとmethods
####タブ -click
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="uramaya" data-slug-hash="MWWYzvz" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue_Template_V-Click">
  <span>See the Pen <a href="https://codepen.io/uramaya/pen/MWWYzvz">
  Vue_Template_V-Click</a> by Uramaya (<a href="https://codepen.io/uramaya">@uramaya</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

####フォーム -submit
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="uramaya" data-slug-hash="qBBEQVE" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue_Template_V-submit">
  <span>See the Pen <a href="https://codepen.io/uramaya/pen/qBBEQVE">
  Vue_Template_V-submit</a> by Uramaya (<a href="https://codepen.io/uramaya">@uramaya</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

####ファイルプレビュー -change
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="uramaya" data-slug-hash="MWWYzOz" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue_Template_V-Change">
  <span>See the Pen <a href="https://codepen.io/uramaya/pen/MWWYzOz">
  Vue_Template_V-Change</a> by Uramaya (<a href="https://codepen.io/uramaya">@uramaya</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

###6.算出プロパティ

computed に定義した関数は、関数内部で参照しているプロパティが更新された時に自動的に呼ばれます。こちらではbirthday プロパティの値に変更があるたびに呼ばれています。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="js,result" data-user="MasahiroHarada" data-slug-hash="RQPxYB" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue Computed">
  <span>See the Pen <a href="https://codepen.io/MasahiroHarada/pen/RQPxYB">
  Vue Computed</a> by Masahiro Harada (<a href="https://codepen.io/MasahiroHarada">@MasahiroHarada</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="uramaya" data-slug-hash="vYYEQRy" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue_Template_V-Calculate">
  <span>See the Pen <a href="https://codepen.io/uramaya/pen/vYYEQRy">
  Vue_Template_V-Calculate</a> by Uramaya (<a href="https://codepen.io/uramaya">@uramaya</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


###7.ウォッチャ
機能としてはcomputed と変わりません。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="uramaya" data-slug-hash="Jjjoevo" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Jjjoevo">
  <span>See the Pen <a href="https://codepen.io/uramaya/pen/Jjjoevo">
  Jjjoevo</a> by Uramaya (<a href="https://codepen.io/uramaya">@uramaya</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


###8.コンポーネント
内容は以下を引用
　　[Vue.jsでSPAへの移行-コンポーネントを使ってみよう](https://orizuru.io/blog/vue-js/component/)
　　[Vue.js「コンポーネント」入門](https://qiita.com/kiyokiyo_kzsby/items/980c1dc45e00d2d3cbb4)

>コンポーネントとは簡単に説明すると、UI(ユーザーインターフェース)を作成する要素がまとまったものです。HTML、データ、ロジック、CSSを要素としてコンポーネントに含むことができます。そのコンポーネントを組み合わせることで、Webアプリケーションを作成することができます。作成したコンポーネントには名前が付けられます。その名前を登録し呼び出すことで、必要な時に何度でもアプリケーション内で使用することができます。

####以下の利点があります。
 ・再利用が可能：
   作成したコンポーネントは、必要なだけ何度でも再利用することができます。例えば、入力フォームのコンポーネントを作成すれば、そのフォームが必要なページにコンポーネントを登録し、HTML内にタグを追加することでフォームが追加されます。同じ構造や機能を開発し直すコストを軽減することができ、開発効率向上。
 ・コンポーネント単位で開発を行うことが可能：
   コンポーネントごとに構造や機能が振り分けられているため、コンポーネント単位で複数人での開発を並行して進めることが可能です。また、Webアプリケーション内で何か問題が発生した際に、コンポーネント単位で切り分けて問題を対処することができます。

![alt](https://orizuru.io/wp/wp-content/uploads/2018/08/Vue10.png)
![alt](https://orizuru.io/wp/wp-content/uploads/2018/08/Vue11.png)

####コンポーネントの構造
基本的にこのvueファイル一つで一つのコンポーネントを構成します。
>vueファイルは主に
・templateタグ：コンポーネントのhtml要素を埋め込む
・scriptタグ：javascriptを記載する
・styleタグ：cssを記載する

```xx.vue
<template>
<!-- ここにhtmlを記載します -->
</template>


<script>
// ここにjavascriptを記載します
</script>


<style>
/* ここにcssを記載します */
</style>
```

####コンポーネントを作成してみよう
######Header.vue
```Header.vue
<template>
    <div>
        <h1>{{ title }}</h1>
        <p>{{ text }}</p>
    </div>
</template>

<script>
export default {
    data(){
        return {
            title: "Header",
            text: "Hello Vue.js!"
        }
    }
}
</script>

<style scoped>
div{
    border: 1px solid blue
}
h1{
    color: blue
}
p{
    color:blue
}
</style>
```
######Body.vue
```Body.vue
<template>
    <div>
        <h2>{{ title }}</h2>
        <p>{{ text }}</p>
    </div>
</template>

<script>
export default {
    data(){
        return {
            title: "Body",
            text: "Have a good day!"
        }
    }
}
</script>

<style scoped>
div{
    border: 1px solid red
}
h2{
    color: red
}
p{
    color: red
}
</style>
```
######App.vue
先ほど作成したHeader.vueとBody.vueをApp.vueからまとめて呼び出します。

```App.vue
<template>
  <div>
    <Header></Header>
    <Body></Body>
    <Body></Body>
  </div>
</template>

<script>
import Header from './Header.vue'
import Body from './Body.vue'

export default {
  components: {
    Header,
    Body
  }
}
</script>
```
######イメージとしては以下になります。
![alt](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F214279%2F2b8edf56-b2e0-375d-c0e8-5473d070a25f.png?ixlib=rb-1.2.2&auto=compress%2Cformat&gif-q=60&w=1400&fit=max&s=df6b4603e99778b7fc913ee33b1f074b)

####コンポーネント間のデータ受け渡し

####1.親→子
#####【親→子】親側のデータ渡し口（タグ属性）

```App.vue
<template>
  <div>
　　//★【親→子】親側のデータ渡し口（タグ属性）
    <Header :username='name'></Header>
    〜略〜
  </div>
</template>

<script>
〜略〜

export default {
  data(){
    return {
      name: "kiyokiyo"
    }
  },
  〜略〜
}
</script>
```

#####【親→子】子側のデータ受け取り口（props）
　子コンポーネント側ではpropsを使ってデータを受け取ります。

```Header.vue
<template>
    <div>
        〜略〜
        <p>Welcome! {{ username }}!</p>
    </div>
</template>

<script>
export default {
　　//★子コンポーネント側ではpropsを使ってデータを受け取ります。
    props: {
        username: String
    },
    〜略〜
}
</script>
```

######イメージとしては以下になります。
![alt](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F214279%2Fd7e41371-b51d-abad-d2b2-31168ac5b6ba.png?ixlib=rb-1.2.2&auto=compress%2Cformat&gif-q=60&w=1400&fit=max&s=b339519e793d84298745d36a4ffbd481)

####2.子→親

```App.vue
<template>
  <div>
    <Header :username='name'></Header>
    //★親側のデータ受け取り口（イベントと関数引数）
    <Body @add="add1"></Body>
    <Body @add="add2"></Body>
    <p>total : {{ totalcount }} </p>
  </div>
</template>

<script>
import Header from './Header.vue'
import Body from './Body.vue'

export default {
  data(){
    return {
      name: "kiyokiyo",
      count1: 0,
      count2: 0,
      totalcount: 0
    }
  },
  components: {
    Header,
    Body
  },
  methods:{
    add1(count){
      this.count1 = count;
      this.totalcount = this.count1 + this.count2;
    },
    add2(count){
      this.count2 = count;
      this.totalcount = this.count1 + this.count2;
    }
  }

}
</script>
```

```Body.vue
<template>
    <div>
        <h2>{{ title }}</h2>
        <p>{{ text }}</p>
        <p><button @click="increment">+1</button> {{ count }} </p>
    </div>
</template>

<script>
export default {
    data(){
        return {
            title: "Body",
            text: "Have a good day!",
            count: 0
        }
    },
    methods: {
        increment(){
            this.count += 1;
            //★子側のデータ渡し口（$emit）
            this.$emit("add",this.count);
        }
    }
}
</script>
```

######イメージとしては以下になります。
![alt](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F214279%2Fddd8b4e4-3030-7f04-84fe-e45665f2d2f4.gif?ixlib=rb-1.2.2&auto=compress%2Cformat&gif-q=60&w=1400&fit=max&s=c34b4edbf85a9654768d8a5cdeb6f204)


###8.VueでREST API通信
VueでAPI通信はAPIでJsonデータを取得する際に使われます。
こちらに関しては以下の記事を見てくださいね。

　[１０分でわかる：Vue.jsとaxios を利用した API の使用-初心者向け](https://qiita.com/moyegogo1020/items/f8a93c8e78489d30dd93)


###9.Vueのライフサイクルフックについて
Vueインスタンスが作成の際に、フックが実行されるタイミングがわかり、メソッドを実行する時どのフックを使えばいいか理解できます。

![ライフサイクルダイアグラム](https://jp.vuejs.org/images/lifecycle.png)

 ・以下の記事を参考してください。
　　[Vueのライフサイクルについて](https://qiita.com/chan_kaku/items/7f3233053b0e209ef355)
　　[ライフサイクルダイアグラム](https://jp.vuejs.org/v2/guide/instance.html#%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB%E3%83%80%E3%82%A4%E3%82%A2%E3%82%B0%E3%83%A9%E3%83%A0)

#まとめ
いかがでしょうか。
今回はVue.jsについての簡単な紹介をしました。
こちら説明を入れる時間がなくてすみません。
Vue.jsが好きなっていただければ、嬉しいです。：D
（ちょっと現場の仕事で時間が足りなく、土日も...また説明を加えます。）