【Vue.js 2.9】はじめてのVue.js イベント修飾子利用例

・イベント修飾子の一部内容紹介
・once,prevent,stop

はじめに

イベントハンドリングの中では1回のみの実行や対象のイベントでは行わないようにするなどの要件に対応するにはイベント修飾子を使います。

【Vue.js 2.9】はじめてのVue.js イベントハンドリング・onClickイベントの記法・クリックイベント以外のイベントはじめに今回はクリックなどのイベント時のハンドリングに...

環境情報

名前	詳細
Vue.js	開発バージョン（https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js）
エディタ	JSFiddle（https://jsfiddle.net/）

イベント修飾子の書き方

once

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <button v-on:click.once='getNowDateTime'>
    現在日時取得
  </button>
  <p>
    取得結果：{{ now }}
  </p>
</div>

var app = new Vue({
    el: '#app',
    data: {
      now: ''
    },
    methods: {
    	getNowDateTime: function(){
      	  this.now = new Date().toLocaleString()
        }
    }
})

onceはイベントに対して1度のみフックされます。
once修飾子の設定は簡単で、v-on:clickのあとにonceを追加するだけです。
clickに限らずイベントハンドリングに対してならonceを追加出来ます。

画像では分かりにくいですがボタンを2度押しても、1度目の結果が表示され続けます。

prevent

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <a href='https://www.google.co.jp/' v-on:click.prevent='testPrevent'>Link</a>
</div>

var app = new Vue({
    el: '#app',
    methods: {
    	testPrevent: function(event){
      	  console.log('testPrevent Exec');
        }
    }
})

prevent修飾子では既定の動作（AタグやSubmitの画面遷移など）をキャンセルします。
Javascriptでいうところの「preventDefault()」に当たります。

こちらも画像では分かりにくいですが、Link部分をクリックするとGoogleページに遷移しません。
（動作していることが分かるようにクリックするとログを出力ようにしています）

stop

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <div id='oya' v-on:click='testStopOya'>
    <p id='ko' v-on:click.stop='testStopKo'>
      Stop修飾子
    </p>
  </div>
</div>

var app = new Vue({
    el: '#app',
    methods: {
    	testStopOya: function(){
      	  console.log('testStopOya 親');
        },
        testStopKo: function(){
      	  console.log('testStopKo 子');
        }
    }
})