Vue.js 入門　出力・ディレクティブ

# はじめに

今回の記事はVue.jsの出力までの流れと最大の特徴であるディレクティブの説明をしていきます。私もVue.jsを学習してから2ヶ月半しかたっておらず、まだまだ未熟ですが、初学者の目線に立って丁寧に解説していきます。

# まずは出力してみる

今回は[JSFiddle]((https://jsfiddle.net/))を使い、セットアップなしで説明していきます。

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

```

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

簡単な出力までの流れを説明します。

1.`Vue`インスタンスを作成

```javascript:js
new Vue({
・・・
})
```

2.`el`で指定したDOM要素にインスタンスを適用する

```javascript:js
{
  el: '#app'
}
```
3.UIの`data`を定義

```javascript:js
 data: {
    message: 'hello Vue.js!'
  }
```

4.`data`を展開する

```html:html
{{ message }}
```

画面に`Hello Vue.js!`と出たら成功です

# ディレクティブ

HTML要素に`v-`から始まる属性名(ディレクティブ)を追加することでDOM操作を行います。これがかなり便利なので、実用例とともに紹介していきます。

## `v-on`

`v-on:イベント名="実行したい関数名"`でイベントが発生した時、関数を呼ぶことができるものです。
`checkbox`がチェックされるというイベントが発生したら、`alert`が表示されるというプログラムを書いてみます。
※`v-on`は`＠`に省略可能

```html:html
<div id="sample">
  <h2>v-if/v-show</h2>
  <input type="checkbox" @click="changed">
　　　<!-- v-on:click="changed"とも書ける　-->
</div>
```

```javascript:js
new Vue({
  el: '#sample',
  data: {
    checked: true
  },
  methods: {
    changed (event) {
      alert("データが変更されました")
    }
  }
})
```

### 使い方

1.`checkbox`を`click`(チェック)した時に`changed`を呼び出す

```html:html
<input type="checkbox" @click="changed">
```

2.`changedメソッド`が呼ばれ`alert`が表示される

```javascript:js
methods: {
  changed (event) {
    alert("データが変更されました")
  }
}
```

## `v-bind`

特定の条件が成立する時、変数をHTMLに反映させ、`class`や`style`などを変えたい！そんな時に使えるのが`v-bind`です。
`checkbox`がチェックされた時に色を変えるようなプログラムを書いてみましょう。
※`v-bind`は `:`に省略可能

```html:html
<div id="sample">
  <h3>v-if/v-show</h3>
  <input type="checkbox" v-model="checked">
  <p :style="{ color:(checked ? '' : 'red') }">赤くなった</p>
<!-- v-bind:styleとも書ける　-->
</div>
```

```javascript:js
new Vue({
  el: '#sample',
  data: {
    checked: false
  }
})
 ```

### 使い方

1.`checkbox`がチェックされ`checked`の`Boolean`型の`data`が変更される(`false`->`true`)
 ※`v-model`の説明は後ほどいたします

```javascript:js
data: {
  checked: false
}
```

2.`checked`が`true`の時、文字列「赤くなった」の`style`が赤色に変更される

```html:html
<p :style="{ color: (checked ? '' : 'red') }">赤くなった</p>
```

## `v-model`

`v-bind:value`と`v-on:input`を一緒に記述するものになります。
実際に`v-model`を使いクライアントが`<input>`タグの中に打ち込んだ文字列を出力させるプログラムを書いていきます。

```html:html
<div id="sample">
  <h2>v-model</h2>
  <input type="string" v-model="message">
  <p>{{ message }}</p>
</div>
```

```javascript:js
new Vue({
  el: '#sample',
  data: {
    message: ''
  }
})
```

### 使い方

1.`message`が紐づけられた`<input>`タグ内にクライアントが文字列を打ち込む

```html:html
<input type="string" v-model="message">
```

2.空の`data`を用意した`message`に`<input>`タグ内に打ち込まれた文字列が更新される

```javascript:js
data: {
  message: ''
}
```

3.更新された`data`が`<p>`タグの中に出力される。

```html:html
<input type="string" v-model="message">
<p>{{ message }}</p>
```

##  `v-if/v-show`

要素の表示・非表示は`v-if/v-show`を使います。
ちなみに`v-if`と`v-show`の使い分け方は[公式サイト]((https://jp.vuejs.org/v2/guide/conditional.html)) を参照していただければご理解いただけるかと思います。簡単にまとめると表示を切り替える回数が多いと`v-show`、そうでなければ`v-if`を使いましょうと説明されています。

以下公式サイトから引用
> とても頻繁に何かを切り替える必要があれば `v-show` を選び、条件が実行時に変更することがほとんどない場合は、`v-if` を選びます

`checkbox`がチェックされたら表示、外されたら非表示にするプログラムを書いてみます。

```html:html
<div id="sample">
  <h2>v-if/v-show</h2>
  <input type="checkbox" v-model="checked">
  <p v-if="checked">v-if属性</p>
  <p v-show="checked">v-show属性</p>
</div>
```

```javascript:js
new Vue({
  el: '#sample',
  data: {
    checked: false
  }
})
```

### 使い方

1.`checked`が紐付けされた`checkbox`がチェックされる

```html:html
<input type="checkbox" v-model="checked">
```

2.`checked`の`Boolean`型の`data`が変更される(`false`->`true`)

```javascript:js
data: {
  checked: false
}
```

3.`<p>`タグの`v-if/v-show="checked"が`が`true`になったので`<p>`タグが出力される

```html:html
<p v-if="checked">v-if属性</p>
<p v-show="checked">v-show属性</p>
```

## 一連の流れ
![ezgif-4-a5c3a3b2b939.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/441587/01e1fff4-93aa-ab9d-4741-f40723ce767c.gif)

以上がディレクティブを使った実用例になります。まだまだ学ぶべきことは沢山あるのでどんどん記事書いていこうと思います!