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>