Vue.jsの学習記録　基本的な構文

最近Vue.jsを勉強しているので、備忘録として。

# Vue.jsを勉強しようと思った理由
- JavaScriptの基礎的な勉強を一通り終えた（TODOアプリを作れるレベル）ので、新しくJSのフレームワークに触れてみたかった。
- JSには様々なフレームワーク（Angular,Reactとか）と比べて、人気が高く、初学者でもとっつきやすい印象を受けたから。
- 独自のHTMLタグを作ることができ、データバインディングが非常に簡単という特徴があるから、開発の可能性が広がる。


といった点から、Vue.jsを学びました。
ちなみに、学習している教材は、udemyの<a href="https://www.udemy.com/course/learn-vuejs/">Vue JS入門決定版！jQuery を使わない Web 開発 - 導入からアプリケーション開発まで体系的に動画で学ぶ</a>を使って勉強しています。
# Vue.jsの導入
以下のURLからVue.jsのインストールができます。
<a href="https://jp.vuejs.org/v2/guide/installation.html">Vue.jsのインストール
</a>導入する方法は、直接ダウンロードする方法と、CDNによる読み込み、NPMを利用したダウンロード、CLIを利用したダウンロードの4つの方法があります。

学習を目的としている方は、直接ダウンロードする方法か、CDNによる読み込みの方法が比較的すぐ導入できるのでオススメです。


#初めに

##HTMLの記述

```html
<body>
  <div id="app">
      <!-- ここにVue.jsの内容を記述 -->
  </div>

</body>

```

`div`タグを作って、idを`"app"`とします。

##JavaScriptにVueのインスタンスを作成

```javascript
var app = new Vue({
  el: '#app'
})
```
JavaScriptにVueインスタンスを作成しました。`el`プロパティを使って、先ほどHTMLに記述したid`"app"`をマウント（id`"app"`が含まれている要素を結びつける）しています。

ここまでが、Vue.jsを書く初めの準備。

## Hello, Vue.js!と表示させたい
Vue.jsを使って、HTML上で`Hello, Vue.js!`と表示させます。

```html
<body>
  <div id="app">
      <p>{{ message }}</p>
  </div>

</body>
```

```javascript

new Vue({
  el: '#app',
  data: {
      message: 'Hwllo, Vue.js!'
  }
})
```

HTMLで、まずmustache構文`{{}}`を使ってオブジェクトを呼び出します。
JSで、`data`プロパティに`message`オブジェクトを定義し、`Hello, Vue.js!`と記述します。
以上がHTML上に`Hello, Vue.js!`と表示させる方法です。

# ディレクティブについて
ディレクティブとは、Vue独自の属性のことです。(v-bind、v-modelとか)
勉強してきたディレクティブを紹介します。

## v-bind
v-bindは`class`や`value`、`style`など、`v-bind:value`のようなかたちで属性を呼び出すことが可能です。
一部紹介

```html
<div id="#app">
    <!-- input欄の中にhogeの値を表示 -->
    <input type="text" v-bind:value="hoge">
    <!-- urlプロパティに記入した値のリンク先に飛ぶ -->
    <a v-bind:href="url">Googleに飛びます</a>
</div>
```

```javascript
new Vue({
   el: '#app',
   data: {
       hoge: 'hoge',
       url: 'https://www.google.com'
   }
})
```

こんな記述になります。

## v-model

`p`タグでの出力`hoge`とのデータバインディングができます。
以下のような記述です。

```html
<div id="app">
    <!-- pタグとinputタグ共に'ホゲー'の文字列が出力される -->
    <p>{{hoge}}</p>
    <input type="text" v-model="hoge">
</div>
```
```javascript
new Vue({
    el: '"app',
    data: {
        hoge: 'ホゲー'
    }
})
```

`input`タグの中で文字を変更した時、リアルタイムに`p`タグの文字列も影響します。

## v-if
Vue.jsで書く、`if`文ですね。

```html
<div id="app">
    <p v-if="hoge"> "hoge"がtrueなら表示されます！！ </p>
</div>
```

```javascript
new Vue({
    el: '#app',
    data: {
        hoge: true 
    }
})
```
`data`プロパティに`false`と記述すると、`p`タグが消えます。

## v-for
Vue.jsで書く、おなじみ`for`文ですね。

```html
<div id="app">
    <ul>
        <li v-for="friut in fruits">
        <!-- 配列'fruits'の中身が全て表示される -->
            {{ fruit }}
        </li>
    </ul>
</div>
```

```javascript
new Vue({
    el: '#app',
    data: {
        fruits: [ 
                'apple',
                'banana',
                'grape'
            ]
    }
})
```

##v-on
`v-on:イベントの種類=関数()`のようなかたちで、イベントを起こすことができます。
関数の呼び出しには`methods`プロパティを使用します。

```html
<div id="app">
    <input type="text" v-model="message">
    <button v-on:click="alert">click</button>
</div>
```

```javascript
new Vue({
    el: '#app',
    data: {
        message: ''
    },
    methods: {
        alert(this.message)
    }
})
```

`input`タグに文字を入力し、clickボタンを押すと、`input`の文字列を`message`オブジェクトに格納し、alertで`message`の文字列が出力されます。