v-on

2024 5/11

2023.08.04 2024.05.11

記事の内容

v-on

v-onは、イベント発動時にコードを実行(イベントハンドラー)されるためのディレクティブになります。

記法

[ HTML ] =============================
　<要素名 v-on:イベント名=”メソッド名”>
　<要素名 @イベント名=”メソッド名”>※省略時

[ Vue.js ] =============================
　methods: {
　　メソッド名() {
　　　動作内容
　　},
　},

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-onについて</title>
  </head>
  <body>
    <div id="app">
      <button @click="onclick">ボタン</button>
      <p>{{ message }}</p>
    </div>

    <script src="./js/on.js"></script>
  </body>
</html>

Vue.createApp({
  data() {
    return {
      message: "",
    };
  },
  methods: {
    onclick() {
      this.message = "こんにちは";
    },
  },
}).mount("#app");

出力結果

主なイベント一覧

focus / blur

focus 要素にフォーカスが入ったとき
blur　要素からフォーカスが外れたとき

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/main.css" />
    <title>v-on focus/blurについて</title>
  </head>
  <body>
    <div id="app">
      <p>テキストボックスをクリックしたり、解除してください。</p>
      <input class="focus-area" @focus="focusMessage" @blur="blurMessage"/>
      <p>{{ message }}</p>
    </div>

    <!-- Vue3をCDNで使用 -->
    <script src="https://unpkg.com/vue@next"></script>
    <script src="./js/focus.js"></script>
  </body>
</html>

Vue.createApp({
  data() {
    return {
      message: "",
    };
  },
  methods: {
    focusMessage() {
      this.message = "フォーカスしましたね！";
    },
    blurMessage() {
      this.message = "フォーカスを外しましたね！";
    },
  },
}).mount("#app");

.focus-area {
  width: 40%;
  border: 1px solid black;
  cursor: pointer;
}

出力結果

テキストボックスをクリックしたり、解除してください。

change

change　要素の値を変更したとき

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-on changeについて</title>
  </head>
  <body>
    <div id="app">
      <p>選択メニューを変更してください。</p>
      <select @change="changeMessage">
        <option value="">ー</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      <p>{{ message }}</p>
    </div>

    <!-- Vue3をCDNで使用 -->
    <script src="https://unpkg.com/vue@next"></script>
    <script src="./js/change.js"></script>
  </body>
</html>

Vue.createApp({
  data() {
    return {
      message: "",
    };
  },
  methods: {
    changeMessage(e) {
      let change_value = e.target.value; // 値を取得
      // 三項演算子
      this.message =
        change_value == 0 
          ? "番号を選択してください！" 
          : change_value + "を選択しましたね！";
    },
  },
}).mount("#app");

出力結果

選択メニューを変更してください。

submit

submit　フォームから送信したとき

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-on submitについて</title>
  </head>
  <body>
    <div id="app">
      <form action="#" @submit="submitMessage">
        <p>送信ボタンを押してください。</p>
        <input id="text" type="text" />
        <button type="submit">送信</button>
      </form>
    </div>

    <!-- Vue3をCDNで使用 -->
    <script src="https://unpkg.com/vue@next"></script>
    <script src="./js/submit.js"></script>
  </body>
</html>

Vue.createApp({
  methods: {
    submitMessage() {
      let text_value = document.getElementById("text").value;
      window.confirm(`${text_value}で本当によろしいでしょうか？`);
    },
  },
}).mount("#app");

出力結果

click / dblclick

click 　要素をクリックしたとき
dblclick　要素をダブルクリックしたとき

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-on clickについて</title>
  </head>
  <body>
    <div id="app">
      <p>クリックかダブルクリックしてください。</p>
      <button @click="clickMessage" @dblclick="dblclickMessage">ボタン</button>
      <p>{{ message }}</p>
    </div>

    <!-- Vue3をCDNで使用 -->
    <script src="https://unpkg.com/vue@next"></script>
    <script src="./js/click.js"></script>
  </body>
</html>

Vue.createApp({
  data() {
    return {
      message: "",
    };
  },
  methods: {
    clickMessage() {
      this.message = "クリックしましたね！";
    },
    dblclickMessage() {
      this.message = "ダブルクリックしましたね！";
    },
  },
}).mount("#app");

出力結果

クリックかダブルクリックしてください。

mousedown / mouseup

mousedown マウスのボタンを押したとき
mouseupはマウスのボタンを離したとき

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/main.css" />
    <title>v-on mousedown upについて</title>
  </head>
  <body>
    <div id="app">
      <p class="mouse-area" @mousedown="downMessage" @mouseup="upMessage">
        マウスボタンを押したり離してりしてください。
      </p>
      <p>{{ message }}</p>
    </div>

    <!-- Vue3をCDNで使用 -->
    <script src="https://unpkg.com/vue@next"></script>
    <script src="./js/mousedown_up.js"></script>
  </body>
</html>

Vue.createApp({
  data() {
    return {
      message: "",
    };
  },
  methods: {
    downMessage() {
      this.message = "マウスを押しましたね！";
    },
    upMessage() {
      this.message = "マウスを離しましたね！";
    },
  },
}).mount("#app");

.mouse-area {
  width: 400px;
  border: 1px solid black;
  cursor: pointer;
}

出力結果

マウスボタンを押したり離してりしてください。

mouseover / mouseout

mouseover マウスカーソルを当てたとき
mouseout　マウスカーソルが外れたとき

入れ子要素にも反応する

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/main.css" />
    <title>v-on mouseover outについて</title>
  </head>
  <body>
    <div id="app">
      <p>外要素と内要素にマウスポインターを動かしてください。</p>
      <div class="outer-area" @mouseover="overMessage" @mouseout="outMessage">
        外要素
        <p class="inner-area">内要素</p>
      </div>
      <button @click="clearResult">結果クリア</button>
      <div v-html="result"></div>
    </div>

    <!-- Vue3をCDNで使用 -->
    <script src="https://unpkg.com/vue@next"></script>
    <script src="./js/mouseover_out.js"></script>
  </body>
</html>

Vue.createApp({
  data() {
    return {
      result: "",
    };
  },
  methods: {
    overMessage(e) {
      this.result += `over:${e.target.className}<br>`;
    },
    outMessage(e) {
      this.result += `out:${e.target.className}<br>`;
    },
    clearResult() {
      this.result = "";
    },
  },
}).mount("#app");

.outer-area {
  width: 300px;
  height: 200px;
  border: 1px solid black;
}
.inner-area {
  width: 150px;
  height: 150px;
  margin: auto;
  border: 1px solid black;
}

出力結果

外要素と内要素にマウスポインターを動かしてください。

外要素

内要素

mouseenter / mouseleave

mouseenter 　マウスカーソルを当てたとき
mouseleave　マウスカーソルが外れたとき

入れ子要素にも反応しない

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/main.css" />
    <title>v-on mouseleave enterについて</title>
  </head>
  <body>
    <div id="app">
      <p>外要素と内要素にマウスポインターを動かしてください。</p>
      <div
        class="outer-area"
        @mouseleave="leaveMessage"
        @mouseenter="enterMessage"
      >
        外要素
        <div class="inner-area">内要素</div>
      </div>
      <button @click="clearResult">結果クリア</button>
      <div v-html="result"></div>
    </div>

    <!-- Vue3をCDNで使用 -->
    <script src="https://unpkg.com/vue@next"></script>
    <script src="./js/mouseleave_enter.js"></script>
  </body>
</html>

Vue.createApp({
  data() {
    return {
      result: "",
    };
  },
  methods: {
    enterMessage(e) {
      this.result += `enter:${e.target.className}<br>`;
    },
    leaveMessage(e) {
      this.result += `leave:${e.target.className}<br>`;
    },
    clearResult() {
      this.result = "";
    },
  },
}).mount("#app");

.outer-area {
  width: 300px;
  height: 200px;
  border: 1px solid black;
}
.inner-area {
  width: 150px;
  height: 150px;
  margin: auto;
  border: 1px solid black;
}

出力結果

外要素と内要素にマウスポインターを動かしてください。

外要素

内要素

keyup / keydown

keyup　　キーを押したとき
keydown　キーを離したとき

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/main.css" />
    <title>v-on keyup downについて</title>
  </head>
  <body>
    <div id="app">
      <p>入力する瞬間の違いを確認してみてくさい。</p>
      <div>
        <input @keyup="keyupMessage" placeholder="keyup" />
        {{ keyup }}
      </div>
      <div>
        <input @keydown="keydownMessage" placeholder="keydown" />
        {{ keydown }}
      </div>
    </div>

    <!-- Vue3をCDNで使用 -->
    <script src="https://unpkg.com/vue@next"></script>
    <script src="./js/keyup_down.js"></script>
  </body>
</html>

Vue.createApp({
  data() {
    return {
      keyup: "",
      keydown: "",
    };
  },
  methods: {
    keyupMessage(e) {
      this.keyup = `キーコード:${e.keyCode}`;
    },
    keydownMessage(e) {
      this.keydown = `キーコード:${e.keyCode}`;
    },
  },
}).mount("#app");

出力結果

入力する瞬間の違いを確認してみてくさい。

scroll

scroll　ページや要素をスクロールしたとき

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/main.css" />
    <title>v-on scrollについて</title>
  </head>
  <body>
    <div id="app">
      <p>ボックス内をスクロールしてみてください。</p>
      <p>Y座標:{{ scrollY }}</p>
      <div id="box" @scroll="getScrollPosition">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi facilis
        voluptate nostrum eum rerum nobis maxime eligendi aut a quos.
      </div>
    </div>

    <!-- Vue3をCDNで使用 -->
    <script src="https://unpkg.com/vue@next"></script>
    <script src="./js/scroll.js"></script>
  </body>
</html>

Vue.createApp({
  data() {
    return {
      scrollY: 0,
    };
  },
  methods: {
    getScrollPosition() {
      let target = document.getElementById("box");
      this.scrollY = target.scrollTop;
    },
  },
}).mount("#app");

#box {
  width: 200px;
  height: 50px;
  overflow: auto; /* はみ出しはスクロール */
  border: 1px solid black;
}

出力結果

ボックス内をスクロールしてみてください。

Y座標:{{ scrollY }}

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi facilis voluptate nostrum eum rerum nobis maxime eligendi aut a quos.

contextmenu

contextmenu　コンテキストメニュー(右クリックメニュー)を表示する前

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-on contextmenuについて</title>
  </head>
  <body>
    <div id="app">
      <p @contextmenu="getMessage">右クリックしてください。</p>
      <p>{{ message }}</p>
    </div>

    <!-- Vue3をCDNで使用 -->
    <script src="https://unpkg.com/vue@next"></script>
    <script src="./js/contextmenu.js"></script>
  </body>
</html>

Vue.createApp({
  data() {
    return {
      message: "",
    };
  },
  methods: {
    getMessage() {
      this.message = "右クリックしましたね！";
    },
  },
}).mount("#app");

出力結果

右クリックしてください。