Vue.js イベントハンドラ

v-on:click

基本形

入力された値をボタン押下でリスト表示する。

<div id="app1" class="frame">
<h1>イベントハンドラ</h1>
<input type="text" name="textData" v-model="textData"><button name="send" v-on:click="addData">送信</button>
<ul>
  <li v-for="item in listData">{{item}}</li>
</ul>
</div>

var app1 = new Vue({
  el: '#app1',
  data: {
    textData: "",
    listData: []
  },
  methods: {
    addData: function(){
      this.listData.unshift( this.textData );
      this.textData = "";
    }
  }
});

v-on:clickで引数付きメソッドを呼び出す

<div id="app1" class="frame">
<h1>イベントハンドラ</h1>
<input type="text" name="textData" v-model="argValue"><button name="send" v-on:click="addValue(argValue)">送信</button>
<ul>
  <li v-for="item in listData">{{item}}</li>
</ul>
</div>

var app1 = new Vue({
  el: '#app1',
  data: {
    argValue: "",
    listData: []
  },
  methods: {
    addValue: function(value){
      this.listData.unshift( value );
      this.argValue = "";
    }
  }
});

v-on:clickの中に文を記述

v-on:clickの中には文が書ける

<input type="text" name="textData" v-model="argValue"><button name="send" v-on:click="var up = argValue.toUpperCase();addValue(up)">大文字にして送信</button>

v-on イベントの種類

change : フォーム要素の変更を検知
click : マウスクリックを検知
dbclick : マウスのダブルクリックを検知
input : フォーム要素の変更完了を検知
keypress : キーボードのキーダウンを検知
keyup : キーボードのキーアップを検知
mousedown : マウスボタンのキーダウンを検知
mouseup : マウスボタンのキーアップを検知
mousemove : マウスカーソルの移動を検知
mouseover : マウスカーソルの侵入を検知
mouseout : マウスカーソルの離脱を検知

タグに複数のv-on イベントを設定する

例えば、mousedownとmouseup、mouseoverとmouseoutのように対となるイベントを定義したい時など。

普通に記述すれば良い。

<div v-on:mouseover="showDate" v-on:mouseout="currentDate = '';">今日は何月何日？</div>
<p>{{currentDate}}</p>

var app1 = new Vue({
  el: '#app1',
  data: {
    currentDate: ""
  },
  methods: {
    showDate: function(){
      var date = new Date();
      this.currentDate = date.getMonth() + "月" + date.getDate() + "日";
    }
  }
});

v-on イベント情報の取得

v-onイベント検知時の情報を取得。clientX、clientYといったイベントが発生した座標等が確認できる。

引数があるメソッドのイベントを取得するには、最終引数に$eventという予約変数を追加する必要がある。

<button name="event" v-on:click="eventDump">引数なしイベント情報</button>
<button name="event" v-on:click="eventDumpAndArg('test', $event)">引数ありイベント情報</button>

var app1 = new Vue({
  el: '#app1',
  data: {
    eventInfo: ""
  },
  methods: {
    eventDump: function(e){
      console.log(e);
    },
    eventDumpAndArg: function(str, e){
      console.log(str);
      console.log(e);
    }
  }
});

v-onのイベント情報で取得した位置に要素を動かす

親box内でクリックされた場所に子boxを移動させる。

Vueオブジェクト内でpositionに関するスタイルを定義し、v-bind:styleでpositionをリアクティブにする。

イベント発生時に発生場所にpositionを変更すれば良い。

<style>
    .parentArea{
      width: 100%;
      height: 300px;
      background-color: wheat;
      position: relative;
    }
    .moveBox {
      border-style: solid;
      background-color: cadetblue;
      width: 150px;
      height: 150px;
    }
</style>
<div class="parentArea" v-on:click="move">
  <div class="moveBox" v-bind:style="boxPosition"></div>
</div>

var app1 = new Vue({
  el: '#app1',
  data: {
    boxPosition: {
      position: "absolute", left: "0px", top: "0px", transition: "all 1s"
    }
  },
  methods: {
    move: function(e){
      this.boxPosition.top = ( e.offsetY - 75 )+ "px";
      this.boxPosition.left = ( e.offsetX - 75 )+ "px";
    }
  }
});

イベントの修飾子

v-on:イベントを1度のみ検知する。

<button v-on:click.once="methodName">一度だけ有効</button>

修飾子一覧

イベントハンドリング — Vue.js

サンプルコード

Vue-Samples/event.html at master · letitride/Vue-Samples · GitHub

リンク

追憶行