2019/07/01
Vue.js とは JavaScript のフレームワークです。
2015年に Laravel のフロントエンドエンジンとして採用され知名度が上がりました。
Laravel をインストールすれば WebAPI を Laravel で作り、SPA ( Single Page Application ) 開発を Vue.js で行うことが可能となります。
また、Vue.js の人気は JavaScript フレームワークの中でもトップクラスに高く、開発現場に採用している企業も増えています。
そんなわけで、前回 Vue.js の用語と文の構成について解説しました。
しかし、実際に覚えるには写経をして動かしてみないと理解できません。
今回は Vue.js の Example 集です。
ひな形
ここからサンプルのソースコードを写経して学んでいくわけですが、以下のひな形を利用してコードを書いていきます。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Vue.js デモ</title>
</head>
<body>
<div id="app">
<!-- この#appの内側にテンプレートを書き込んでいく -->
</div>
<!-- Vue.js を読み込む -->
<script src="https://unpkg.com/vue"></script>
<!-- Vueアプリケーション -->
<script src="main.js"></script>
</body>
</html>
実際には main.js に Vue.js を書いていきます。
JavaScript ( main.js )
new Vue({
el: '#app'
// オプションを記述していく
})
ディレクティブ
Vue では、タグに v-* の属性を指定することができます。
これを ディレクティブ と呼びます。
１）テキストをレンダリングする (v-text)
v-text は包含するテキストのデータ名を指定します。
See the Pen
Jqxrby by Masanori Honjo (@masanori_honjo)
on CodePen.
２）HTMLの属性を指定( v-bind )
v-bind はHTML タグの属性値に変数名を割り当てます。
See the Pen
HTMLの属性を指定(v-bind) by Masanori Honjo (@masanori_honjo)
on CodePen.
３）HTMLをレンダリングする( v-html )
通常のテキストだと< > & が < > & に置換されて出力されます。
しかし、v-html を用いた場合はHTMLタグをレンダリングして出力します。
See the Pen
HTMLをレンダリングする(v-html) by Masanori Honjo (@masanori_honjo)
on CodePen.
４）イベント処理 ( v-on )
これを使えば各イベントに対応できるってことですね。
例えばクリックは v-on:click になります。
省略形は @click です。
See the Pen
イベント処理(v-on) by Masanori Honjo (@masanori_honjo)
on CodePen.
イベント種類
| 記述 | 発火タイミング | 備考 |
|---|---|---|
| @click | クリック時 | - |
| @change | 変更時 | inputで入力中には発火しません。フォーカスをずらすまで発火しません。 |
| @submit | サブミット時 | - |
５）入力フォームにモデルを割り当てる ( v-model )
v-model は、input、select、textarea に対して、Vue オブジェクトのデータとフォーム部品の値を関係づけます。
入力や選択をすると即座にデータ、そしてDOMに反映されます。
See the Pen
YbBrBd by Masanori Honjo (@masanori_honjo)
on CodePen.
６）条件分岐 ( v-if )
v-if は要素自体の有無を制御します。
See the Pen
条件分岐（v-if） by Masanori Honjo (@masanori_honjo)
on CodePen.
イベントハンドラ、イベントリスナとして設定したコールバック関数が受け取ることができる イベントオブジェクト です。
ただ、JavaScriptの関数は引数を指定しなくてもOKなのでイベントオブジェクトを書略してもエラーにはなりません。
// 関数の引数は自由に命名できます。
// $("#sample").click(function(event){ でも問題ありません。
$("#sample").click(function(e){
console.log(e);
});
コンソールを見るとjQuery.event というのが返ってきてます。これを開くとオブジェクトを可視化して確認できます。
７）ループ ( v-for )
data オプションに登録された配列やオブジェクトから要素を繰り返し描画できます。
See the Pen
ループ（v-for） by Masanori Honjo (@masanori_honjo)
on CodePen.
v-for でループ処理した変数をメソッドの引数に渡す場合は以下のようになります。
<div>
<p v-for="item in items">
<span v-on:click="addAct(item.created_at)">{{ item.name }}</span>
</p>
</div>
実用例
実用的な Vue の使用例です。
Vue.jsの 「ウォッチャ」 という機能を使った Example です。
１文字に満たなければ「必須項目です」
５文字より長ければ「長すぎます」のエラーメッセージを表示します。
See the Pen
Vue.js ウォッチャ by Masanori Honjo (@masanori_honjo)
on CodePen.
特定のデータまたは算出プロパティの状態を監視して、変化があったとき登録した処理を自動的に実行します。
つまり、データの変化をトリガにしたフックです。
new Vue({
：
watch: {
監視するデータ： function(新しい値, 古い値){
// value が変化したときに行いたい処理
},
'item.value': function(newVal, oldVal) {
// オブジェクトのプロパティも監視できる
}
}
})
以上です。
基礎から学ぶ Vue.js
僕は基本的にネットで勉強しているのですが、最終的に知識を整理するために、この本を手にとって知識を整理しました。表紙のVロゴより目立っている「ねこちゃん」は本文中でもよく登場します。一部では猫本と呼ばれているそうですね。中もカラフルで図表も多く、とても読みやすかったです。当サイトではVue.jsの解説を端折っているのでわかりずらいところがあるかもしれません。そういう方はこの本を読めば理解できるかと思います。
仕事で Laravel を使っています。気づいたことや新しい発見など情報を発信していきます。問い合わせはこちら。