# Vueチュートリアル

## Vue 基本

### 1. Mustach構文

HTML内で {{ }} で囲む事で宣言的にデータをDOMに描画する事ができます。

```markup
<div id="app">
  <!-- Hello Vue! と表示される -->
  {{ message }}
</div>
```

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

### 2. data

Vueの中で使えるデータ。data内に **変数名 : 初期値** と宣言する事で変数を扱えるようになる。

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

### 3. v-if, v-else

HTMLの要素に **v-if="条件"** を書く事で条件の真偽によって描画を切り替える事ができます。v-if は条件が **true** の場合のみ描画されます。

```markup
<p v-if="条件式">trueの時に表示</p>
<p v-else>falseの時に表示</p>
```

### 4. v-show

HTMLの要素に **v-show="条件"** を書くことで条件の真偽によって描画を切り替える事ができます。v-show は条件がtrueの場合にのみ描画されます。

```markup
<p v-show="条件式">trueの時に表示</p>
```

### 4.5 v-if v-show の使い分け

v-ifはfalseのとき**HTMLから要素ごと削除**されます。そのため v-if は表示し直すたびに要素が作り直されるます。

一方、v-showはfalseのとき**CSSスタイルのdisplay : none で見えなくされる**だけで、HTML要素としては存在し続けます。

つまり、切り替え頻度が多い場合 **v-show** を使う。切り替え頻度が少ない場合 **v-if** を使う。

[参考サイト](https://qiita.com/tsukiyama3/items/7d7a7803bcf4e1b10202)

### **5. v-on**

HTMLの要素に **v-on:click="関数"** と書く事でその要素が**クリックされた時**に **methods** 内で用意した関数を実行する事ができます。また v-on: ディレクティブはよく使う為 @で省略して書く事ができます。**@click="関数"**

### 6. v-for

HTMLの要素に **v-for="要素名 in 配列"** とする事で配列などの複数のデータを繰り返し表示させる事ができます。in には of を用いることもできます。

```markup
<ul id="app">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>
```

```javascript
new Vue({
  el: '#app',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
```