CODEPREPでVue.jsの勉強をしたのでそのまとめ。

Vue.jsとはなんぞや

UI を構築するためのライブラリ。
<script src="https://unpkg.com/vue"></script>で読み込むことができる。
JavaScript内のデータとHTMLを自動的に結びつけ、複雑なUIの実装も簡単にできるのが特徴。
プログレッシブフレームワークとも呼ばれる。小さな Web ページから大きなアプリケーションまで、柔軟に適用できるように設計されている。
双方向データバインディング：html内のinput要素にv-modelという属性をつけることで、インスタンス上のデータとinput要素の入力値を同期できる。
v-modelのように先頭にv-が付いている属性はディレクティブと呼ばれ、通常のHTML属性とは異なった動作をする。

書き方は、（js側）

var vm = new Vue({ // Vueインスタンスをnewする
  el: '#app', // インスタンスを結びつけるhtmlの要素を指定する
  data: {
    message: 'Hello World!'
  }
});

なんかこんな感じ。（html側）

<div id="app">
  <p>{{ message }}</p> <!-- Mustache記法でデータを表示する -->
  <input type="text" v-model="message">
</div>

インスタンスを操作するオプション

methods

インスタンスメソッドを定義することができる。

computed

算出プロパティを定義することができる（算出プロパティとは、あるデータや別の算出プロパティから計算される新たなデータのこと）。「プロパティ」と言っているけどメソッドに近いものというイメージを持った方が理解しやすそう…？

「特定の値を算出したい」という目的であれば、メソッドでなく算出プロパティで定義した方がいいのかしら、と思って公式ドキュメント見たら、算出プロパティは結果をキャッシュする性質があるらしい。ここら辺注意が必要そう。

jp.vuejs.org

watch

指定することで、データや算出プロパティの変更を監視することができる（ウォッチャー）。
オプションのキーに変更を監視したいプロパティ名を設定すると、そのデータが更新された時に値に渡した関数が実行される。

テンプレートで使用する属性（ディレクティブ）

テンプレート＝ Vue.js のインスタンス上のデータを表示するためのHTMLファイル。

v-for

配列やオブジェクトなど、要素を繰り返し扱う。書き方は、

配列

<li v-for="(value, index) in array">
  <span>（{{ index }}）{{ todo.text }}</span>
</li>

オブジェクト

<li v-for="(value, key, index) in object">
  <span>（{{ index }}）{{ key }}：{{ value }}</span>
</li>

こんな感じ。
index（オブジェクトに対しての書き方だったらkeyも）は省略可能で、その場合は括弧も書かなくてよい。
また、inはofに書き換え可能とのこと（英語的に書くことができるってことかな…）。

v-bind

v-bind:属性名=データで、データを属性に紐付けることができる。
省略して書くことも可能で、省略する場合は:属性名のように属性名の頭にコロンをつければOK。

以下は、データ内の論理値（todos.completed）をチェックボックスに紐付けている例。

var vm = new Vue({
  el: "#app",
  data: {
    todos: [
      { completed: true, text: 'register' },
      { completed: false, text: 'login' }
    ]
  }
});

html

<div id="app">
  <ul>
    <li v-for="todo in todos">
      <input type="checkbox" :checked="todo.completed">
      <!--省略せずに書くなら下記-->
      <!--<input type="checkbox" v-bind:checked="todo.completed">-->
      <span>{{ todo.text }}</span>
    </li>
  </ul>
</div>

class、styleに対するv-bind

classやstyleの付与を、v-bindを通して行うことができる。

<!-- fooがtrueであれば、classにsome-classを付与する -->
<div :class="{ 'some-class': foo }"></div>

<!-- styleのcolorにfooを付与する -->
<div :style="{ color: foo }"></div>

v-on

v-on:イベント名=メソッド/処理で、あるイベントが発生した際に実行したい処理を指定できる。メソッドを指定することもできるし、処理内容をそのまま記述することもできる。

こちらも省略記法があり、@イベント名のようにイベント名の前に@をつければOK。

以下は、チェックボックスの状態が更新されたらそれをデータに反映させたい場合の例。

javascript

var vm = new Vue({
  el: "#app",
  data: {
    todos: [
      { completed: true, text: 'register' },
      { completed: false, text: 'login' }
    ]
  }
});

html

v-on内では$eventという特別な変数を通してイベントオブジェクトを操作することができる。

<div id="app">
  <ul>
    <li v-for="todo in todos">
      <input type="checkbox" v-bind:checked="todo.completed" v-on:change="todo.completed = $event.target.checked">
      <!--上記はv-modelでの書き換えも可能-->
      <!--<input type="checkbox" v-model="todo.completed">-->
      <span>{{ todo.text }}</span>
    </li>
  </ul>
</div>

v-onのイベント修飾子

イベント修飾子を使うことでpreventDefault()等を実行することができる。
書き方はv-on:click.preventというように、イベント名の後にドットで修飾子をつなげればOK。

イベント修飾子の種類は下記。

jp.vuejs.org

v-showとv-if

v-showで指定した値がfalseである場合、要素を非表示にすることができる。
v-ifでも、指定した値がfalseである場合、要素を非表示にすることができる。

この二つの違いとしては、v-showでfalseであればdisplay: none;でスタイル上で非表示とするが、v-ifはそもそも表示しないものとして扱うところ。

使い分けとしてはたとえば、falseであればそもそも読み込まなくていいよ〜（画像とか）という時なんかには、v-ifを使うといいらしい。なるほど〜。

<div id="app">
  <ul>
    <li v-for="todo in todos">
      <input type="checkbox" v-model="todo.completed">
      <span>{{ todo.text }}</span>
      <!--todo.completedがfalseであれば-->
      <strong class="red" v-show="todo.completed">
        done!
      </strong>
    </li>
  </ul>
</div>

目玉焼きに塩

おいしい

Vue.jsの勉強をしたのでそのまとめ