Vue.js ディレクティブの基礎１
前回の記事はこちら
Vue.js データバインディングの基礎
今回もディレクティブについて紹介します。
条件分岐 v-show
jsfiddleで実際に記述しながら読むことをおすすめします。
<div id="app">
<p v-show="toggle">
Hello
</p>
</div>
<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
var app = new Vue({
el:'#app',
data:{
toggle:false
}
})
v-ifと結果は同じですが非表示にする際に
CSSのdisplay:noneを使用している点が異なります。
DOMの書き換えがない分v-ifに比べて
描画コストがかからないことがポイントです。
繰り返しの描画 v-for
配列の繰り返し
<div id="app">
<ol>
<li v-for='color in colors'>{{color}}</li>
</ol>
</div>
<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
var app = new Vue({
el:'#app',
data:{
colors:['Red','Green','Blue']
}
})
v-forディレクティブで配列colorsの中身を１つずつ取り出し
colorという変数に格納してマスタッシュ構文で描画しています。
colorsやcolorの名称は任意でつけられますが
単数複数を統一することでコードの視認性が担保できます。
オブジェクトの繰り返し
<div id="app">
<ul>
<li v-for="value in user">{{value}}</li>
</ul>
<hr>
<ul>
<li v-for="(value,key) in user">{{key}} : {{value}}</li>
</ul>
<hr>
<ul>
<li v-for="(v,k) in user">{{k}} : {{v}}</li>
</ul>
</div>
<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
var app = new Vue({
el:'#app',
data:{
user:{
firstName:'Taro',
lastName:'yamada',
age:28
}
}
})
v-forを使用してオブジェクトのkeyとvalueを取得して表示しています。
値だけでなくkeｙも取り出すことができます。
v-forの中のvalueとkeyには任意の名前をつけることができますが
順番はvalue,keyとなりますので気をつけましょう。
インデックス番号付きの繰り返し
v-forの仮変数には規定で配列要素がセットされます。
仮変数を２個用意することで配列要素、インデックス番号の順で
セットすることが可能です。
<div id="app">
<table>
<th>No</th><th>書籍番号</th><th>書名</th><th>価格</th>
<tr v-for="(book,i) in books"> <!--book：配列要素 i:インデックス番号-->
<td>{{ i + 1 }}</td>
<td>{{book.id}}</td>
<td>{{book.title}}</td>
<td>{{book.price}}円</td>
</tr>
</table>
</div>
<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
var app = new Vue({
el: '#app',
data: {
books:[
{
id:'789876',
title:'Vue.js参考書',
price:3000
},
{
id:'876544',
title:'Javascript参考書',
price:2800
},
{
id:'364758',
title:'Ruby参考書',
price:2300
}
]
}
})
実行結果
オブジェクトのプロパティを順に処理する
v-forではオブジェクトのプロパティを順に処理も可能です。
下記はオブジェクトbookのキーとバリューを順にリストにしています。
<div id="app">
<ul v-for="(value, key, i) in book">
<li>{{key}}:{{value}}</li>
</ul>
</div>
<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
var app = new Vue({
el: '#app',
data: {
book:{
id:'789876',
title:'Vue.js参考書',
price:3000
}
}
})
実行結果
イベントの基本 v-on
Vue.jsで利用できる主なイベントは以下です。
v-onイベント一覧
| 分類 | イベント名 | 概要 |
|---|---|---|
| フォーム | focus | 要素にフォーカスが入った時 |
| フォーム | blur | 要素からフォーカスが外れた時 |
| フォーム | change | 値を変更した時(input/select/textareaなど) |
| フォーム | select | テキストボックス/エリアのテキストを選択した時 |
| フォーム | submit | フォームから送信した時 |
| マウス | click | 要素をクリックした時 |
| マウス | dbclick | 要素をダブルクリックした時 |
| マウス | mousedown | マウスのボタンを押した時 |
| マウス | mouseover | 要素にマウスポインターが乗った時 |
| マウス | mouseenter | 要素にマウスポインターが乗った時 |
| マウス | mouseleave | 要素からマウスポインターが外れた時 |
| マウス | mouseout | 要素からマウスポインターが外れた時 |
| マウス | mouseup | マウスのボタンを離した時 |
| キー | keydown | キーを押した時 |
| キー | keyup | キーを離した時 |
| キー | keypress | キーを押し続けている時 |
| その他 | resize | ウィンドウのサイズを変更した時 |
| その他 | scroll | ページや要素をスクロールした時 |
| その他 | error | ページ内でエラーが発生した時 |
| その他 | contextmenu | コンテキストメニューを表示する前 |
ボタンを押したら現在時刻を取得する
ボタンを押したら現在時刻を表示するプログラムを記述してみます。
<div id="app">
<button v-on:click="onclick">
Click
</button>
<p>{{ now }}</p>
</div>
<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
var app = new Vue({
el:'#app'
data:{
now:'',
},
methods:{
onclick:function(){
this.now= new Date().toLocaleString();
}
}
})
実行結果
このようにv-onディレクティブでonclickメソッドを呼び出して
クリックでnowの中身を表示しています。
onclick部分は任意の名前に変更可能です。
マウスホバーで画像を切り替える
<div id="app">
<img v-bind:src="path" alt="画像1"
v-on:mouseenter="onmouseenter" v-on:mouseleave="onmouseleave">
</div>
<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
var app = new Vue({
el:'#app',
data:{
path:'https://picsum.photos/id/237/200/300'
},
methods:{
onmouseenter:function(){
this.path = "https://picsum.photos/seed/picsum/200/300"
},
onmouseleave:function(){
this.path = "https://picsum.photos/id/237/200/300"
}
}
})
実行結果
v-bindディレクティブで画像のパスをデフォルト値に設定し
マウスホバー（mouseenter）で別画像を表示
マウスホバー解除（mouseleave）で元の画像のパスを取得しています。
イベントオブジェクト
イベントオブジェクトとはjavascriptで自動生成されるイベントに関わる
情報を管理するためのオブジェクトです。
イベントに関する情報にアクセスしたりイベントハンドラーの挙動を操作ができます。
ボタンクリック時にイベントオブジェクトをログ出力してみましょう
<div id="app">
<button v-on:click="onclick">クリック</button>
</div>
<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
var app = new Vue({
el: '#app',
methods: {
onclick: function(e) {
console.log(e)
}
}
})
実行結果
イベントハンドラーからイベントオブジェクトを参照するには
第１引数にeやevを設置するだけです。
主なイベント一覧
| メンバー | 概要 |
|---|---|
| target | イベント発生元の要素 |
| type | イベントの種類（click/focusなど） |
| timeStamp | イベントの作成日時を取得 |
| clientX | イベント発生時のブラウザーでのX座標 |
| clientY | イベント発生時のブラウザーでのY座標 |
| screenX | イベント発生時のスクリーン上でのX座標 |
| screenY | イベント発生時のスクリーン上でのY座標 |
| pageX | イベント発生時のページ上でのX座標 |
| pageY | イベント発生時のページ上でのY座標 |
| offsetX | イベント発生時の要素上でのX座標 |
| offsetY | イベント発生時の要素上でのY座標 |
| stopPropagation() | イベントの親要素への伝搬を中止 |
| preventDefault() | イベントの規定の動作をキャンセル |
次回は双方向データバインディングです。
Vue.js ディレクティブの基礎２