Vue.jsを学ぶ - No.3

今回はイベント使えるようにしてみる。ここまで学ぶので、その過程をメモしていきます。

加工後の結果を返す算出プロパティ

算出プロパティはコンポーネントのcomputedのオプションの中に定義する

computed: { 算出プロパティ:  関数オブジェクト }

練習）うるう年かどうかを判定する

HTML
<div id="app">
    調べたい年：<input type="text" v-model="year"><br>
    {{year}}年は{{isUrudoshi？'うるう年です。' : 'うるう年ではありません'}}
</div>

JavaScript
var app = new Vue({
    el: '#app',

    data: {
        year: (new Data()).getFullyear()
    },
    computed: {
        isUrudoshi: function(){
            if((this.year%4 == 0) && (this.year%100 != 0) ||
                (this.year%400 == 0)) {
                return true;
                } else {
                return false;
            }
        }
    }
});

methodsは再描画のたびに実行されるが、算出プロパティcomputedはキャッシュされるので、最初の表示のまま変わらないらしい。

算出プロパティが適している時

ECサイトの商品一覧ページで、ユーザーが検索条件を指定して商品を絞り込んだ際の並べ替えのシーン。
並び変えるたびに商品リストを検索するよりも、一旦商品リストを絞り込んだ検索結果をキャッシュしておいて、それを元に並び替えをした方がパフォーマンスがいい。
つまり、加工したデータをテンプレート内で頻繁に利用する場面のことみたい。

イベントハンドリング

イベントとは、ユーザーの操作をきっかけに、ブラウザ内で発生する出来事のこと。
イベントハンドラとは、イベントの発生をプログラムが検知して何らかの処理を行うもの。

よく使われるイベント

blur：フォーム要素からフォーカスが外れた時
focus：フォーム要素にフォーカスが当たった時
select：フォーム要素内のテキストが選択された時
change：フォーム要素の選択肢や入力内容が変更された時
submit：フォームを送信しようとした時
reset：フォームがリセットされた時

load：画像、スクリプトなどのリソースの読み込みが完了した時
scroll：要素の内容がスクロールした時
resize：ウインドウのサイズが変更された時

click：要素をクリックした時
keydown：キーを押した時
keyup：キーを放した時
keypress：押していたキーを放した時（keyupよりも先に発生）

mousemove：マウスカーソルが要素ないで動いた時
mouseover：マウスカーソルが要素内に入った時
mousedown：要素をマウスでクリックした時
mouseout：マウスカーソルが要素の外に出た時
mouseup：要素内でマウスのボタンを放した時

touchstart：要素を指でタッチした時
touchmove：要素をタッチした指でドラッグした時
touchend：要素をタッチした指を離した時

使用例）

<button class="btn" v-on:click="onDeleteItem">削除<button>

data: {
    stock:10
},
methods: {
    onDeleteItem: function(){
        this.stock --;
    }
}

削除ボタンを押すたびに、ストックから1ずつ減っていく。

v-onディレクティブで登録できるイベントハンドラは

elオプションに指定したコンポーネントのスコープ内（<div id="#app"></div>）にある要素に限る。その為、ウインドウ自体に発生するイベント（createdやmountedなど）はaddEventListenerを使って登録し、Vueを介さずに登録したイベントハンドラ（beforeDestroyライフサイクルハックなど）は不要になったタイミングでremoveEventListener関数を使って解除する。