Vueチュートリアル

Vue 基本

1. Mustach構文

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

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

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

2. data

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

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

3. v-if, v-else

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

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

4. v-show

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

<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 を使う。

参考サイト

5. v-on

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

6. v-for

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

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

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