v-on ディレクティブ

v-on ディレクティブは、イベントが発生した際に Vue のメソッドを実行するイベントハンドラです。

v-on ディレクティブは、よく使われるため省略形も用意されています。

v-on:click="プロパティ名"

// 省略形
@click="プロパティ名"

クリックされた回数を表示する

<!DOCTYPE html>
<html>
  <head>
<title><%= title %></title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
<div id="app">
  <p>{{ count }}</p>
  <button v-on:click="countUp">CountUp</button>
</div>

<!-- Vue アプリケーション -->
<script>
  const { createApp } = Vue;

  createApp({
    data: function(){
      return {
        count: 0
      };
    },
    methods: {
      countUp: function(){
        this.count++;
      }
    }
  }).mount('#app');
</script>
  </body>
</html>

一度しか押せないボタンの作成

<!DOCTYPE html>
<html>
  <head>
<title><%= title %></title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
<div id="app">
  <button value="hello" v-bind:disabled="isClick" v-on:click="onClick">hello</button>
</div>

<!-- Vue アプリケーション -->
<script>
  function hello(){
    alert("hello");
  }
  const { createApp } = Vue;

  createApp({
    data: function(){
      return {
        isClick: false
      };
    },
    methods: {
      onClick: function(){
        this.isClick = true;
        hello();
      }
    }
  }).mount('#app');
</script>
  </body>
</html>

メソッドに引数を渡す

<!DOCTYPE html>
<html>
  <head>
<title><%= title %></title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
<div id="app">
  <p>{{ price }}</p>
  <button v-on:click="showPrice(100)">リンゴ</button>
  <button v-on:click="showPrice(80)">みかん</button>
</div>

<!-- Vue アプリケーション -->
<script>
  function hello(){
    alert("hello");
  }
  const { createApp } = Vue;

  createApp({
    data: function(){
      return {
        price: 0
      };
    },
    methods: {
      showPrice: function(price){
        this.price = price;
      }
    }
  }).mount('#app');
</script>
  </body>
</html>

キー修飾子

<!DOCTYPE html>
<html>
  <head>
<title><%= title %></title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
<div id="app">
  <input type="text" v-on:keydown="showAlert" v-model="myText">
  <p>{{ myText }}</p>
</div>

<!-- Vue アプリケーション -->
<script>
  const { createApp } = Vue;

  createApp({
    data: function(){
      return {
        myText: ""
      };
    },
    methods: {
      showAlert: function(e){
        console.log(e.key);
      }
    }
  }).mount('#app');
</script>
  </body>
</html>

以下の場合は、押されたキーを取得することができます。

v-on:keydown="showAlert"

特定のキーが押されたときメソッドを実行するようにするには、キー修飾子を利用します。

以下の場合は、Enter が押された場合にメソッドを実行します。

v-on:keydown.enter="showAlert"

キー修飾子には、以下のようなものがあります。

.enter
.tab
.delete(Delete と Backspace)
.esc
.space
.up
.down
.left
.right
.48~.57(0~9)
.65~.90(A~Z)

システム修飾子キー

イベントにシステム修飾子キーを指定すると、このキーが押されながらキー入力が行われたときにだけメソッドを実行することができます。

システム修飾子キーには、以下のようなものがあります。

.ctrl
.alt
.shift
.meta(windowsキー/commandキー)

<!DOCTYPE html>
<html>
  <head>
<title><%= title %></title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
<div id="app">
  <input type="text" v-on:keyup.enter.shift="showAlert" v-model="myText">
  <p>{{ myText }}</p>
</div>

<!-- Vue アプリケーション -->
<script>
  const { createApp } = Vue;

  createApp({
    data: function(){
      return {
        myText: ""
      };
    },
    methods: {
      showAlert: function(){
        alert("Shift + Enter が押されました。");
      }
    }
  }).mount('#app');
</script>
  </body>
</html>