Vue.js のディレクティブを使ってみた

# 初めに
最近フロントエンドに興味を持ち、Vue.jsについて勉強を始めました。
直近で学んだことのアウトプットとしての記事を投稿します。

# いろいろなディレクティブ

ここからは `v-for`, `v-bind`, `v-if`, `v-on`, `v-model` について簡単な動作確認をしてみます。

## v-for

```html
  <div id="app">
    <ul>
      <li v-for="fluit in fluits">{{ fluit.name }}</li>
    </ul>
  </div>
```

```js
var app = new Vue({
  el: "#app",
  data: {
    fluits: [
      {name: 'Peaches'},
      {name: 'Apples'},
      {name: 'Plums'}
    ]
  }
})
```

- 表示内容

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/2a104cf8-5e18-3fd7-8ea8-97160737fda4.png)


## v-bind

- `input` タグ属性書き換え

```html
  <div id="app">
    <input type="button" v-bind:value="btnValue">
  </div>
```

```js
var app = new Vue({
  el: '#app',
  data: {
    btnValue: 'ボタン'
  }
})
```

- 表示内容

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/9e7c9d19-7a0e-7bfe-6a90-8ad4a165202e.png)

- `p` タグ属性書き換え

```html
  <div id="app">
    <p v-bind:title="message">John Smith</p>
  </div>
```

```js
var app = new Vue({
  el: '#app',
  data: {
    message: 'Counry Prefecture 19xx～19yy'
  }
})
```

- マウスホバー時

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/c759e6b6-3ae3-a7c2-95b2-bf8c7fbd678a.png)

- `style` 属性書き換え

```html
  <div id="app">
    <p v-bind:style="styleObject">{{ message }}</p>
  </div>
```

```js
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    styleObject: {
      margin: '100px',
      color: 'rgb(100, 50, 200)',
      fontSize: '100px',
      fontFamily: 'Playfair Display'
    }
  }
})
```

※font は https://fonts.google.com/ を使用

- 表示内容

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/312180d0-bcae-10f5-1831-2836c274dc0e.png)


## コンポーネント

```html
  <div id="app">
    <greeting></greeting>
  </div>
```

```js
Vue.component('greeting', {
  template: '<h1>Hello Vue!</h1>'
})
var app = new Vue({
  el: '#app'
})
```

- 表示内容

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/9822aa1a-e73c-2acc-d96a-b5dec902beca.png)

## v-for, v-bind, コンポーネント組み合わせ

```html
  <fruits-list 
    v-for="favoriteFruit in favoriteFruitsList"
    v-bind:fruit="favoriteFruit">
  </fruits-list>
```


```js
Vue.component('fruits-list', {
  props: ['fruit'],
  template: '<li>{{ fruit.name }}</li>'
})
var app = new Vue({
  el: "#app",
  data: {
    favoriteFruitsList: [
      {name: 'Peaches'},
      {name: 'Apples'},
      {name: 'Plums'}
    ]
  }
})
```

- 表示内容

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/1509d4f3-436c-901e-5fe0-2bc3e14e0509.png)

## v-if

```html
  <div id="app">
    <p v-if="display">Hello Vue!</p>
  </div>
```

```js
var app = new Vue({
  el: "#app",
  data: {
    display: true
  }
})
```

- コンソールログ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/e4687b2f-079d-03ed-4b1d-537d8e091e03.png)

- 表示内容

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/d67e9c70-e8b5-381b-0135-8d39c3ef782a.png)

- コンソールログにて操作(この場合画面表示なし)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/e798aeac-019e-548d-7311-ebb1d431d703.png)

## v-on

```html
  <div id="app">
    <p>{{ message }}</p>
    <button v-on:click="greetingCycle">greeting</button>
  </div>
```

```js
var app = new Vue({
  el: '#app',
  data: {
    message: 'Good mornig!',
    count: 0,
    greetingList: [
      'Good mornig!',
      'Hello!',
      'Good evening!'
    ]
  },
  methods: {
    greetingCycle: function() {
      this.count = (this.count + 1) % 3;
      this.message = this.greetingList[this.count];
    }
  }
})
```

- ボタン押下回数 0 回

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/39ed2d0e-77f3-5454-ae88-9810b7600d85.png)

- ボタン押下回数 1 回

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/527ef648-64b3-6e4c-8546-8e87cb747f98.png)

- ボタン押下回数 2 回

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/0a91cf40-ce99-4476-e12f-328e4f50647c.png)

- ボタン押下回数 3 回

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/39ed2d0e-77f3-5454-ae88-9810b7600d85.png)


## v-if, v-on 組み合わせ

```html
  <div id="app">
    <input type="text" v-if="display">
    <input
      type="button"
      v-if="display"
      v-bind:value="submit"
      v-on:click="displayOnOff">
    <p v-if="completeMessage" v-bind:style="styles">{{ message }}</p>
  </div>
```

```js
var app = new Vue({
  el: '#app',
  data: {
    message: 'お疲れ様でした!',
    submit: '回答する',
    display: true,
    completeMessage: false,
    styles: {
      color: 'rgb(255, 255, 255)',
      backgroundColor: 'blue',
      padding: '20px'
    }
  },
  methods: {
    displayOff: function() {
      this.display = false;
      this.completeMessage = true;
    }
  }
})
```

- ボタン押下前

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/f2c628f9-2490-9108-d8f1-ae421a23e5a2.png)

- ボタン押下後

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/799f1761-391c-b84d-1109-735c2813d45b.png)

## v-model

```html
  <div id="app">
    <input v-model="message" type="text" size="50">
    <p :style="fonts">{{ message }}</p>
  </div>
```

```js
var app = new Vue({
  el: '#app',
  data: {
    message: '',
    fonts: {
      fontFamily: 'Parisienne'
    }
  }
})
```

※`:style` は `v-bind:style` の省略記法。
※font は https://fonts.google.com/ を使用

- 表示内容

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/43ad2236-03fa-3f68-9525-f2406c3dea53.png)


# 参考記事
- 日本語版 Vue.js ドキュメント
https://jp.vuejs.org/v2/guide/

- MDN Web Docs JavaScript
https://developer.mozilla.org/ja/docs/Web/JavaScript