Vue.jsの勉強をしたのでそのまとめ
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
算出プロパティを定義することができる(算出プロパティとは、あるデータや別の算出プロパティから計算される新たなデータのこと)。 「プロパティ」と言っているけどメソッドに近いものというイメージを持った方が理解しやすそう…?
「特定の値を算出したい」という目的であれば、メソッドでなく算出プロパティで定義した方がいいのかしら、と思って公式ドキュメント見たら、算出プロパティは結果をキャッシュする性質があるらしい。ここら辺注意が必要そう。
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)をチェックボックスに紐付けている例。
- js
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。
以下は、チェックボックスの状態が更新されたらそれをデータに反映させたい場合の例。
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。
イベント修飾子の種類は下記。
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>