#34 Vue.jsアウトプット

イベント修飾子

・Vue.jsが提供している仕組み。活用する事で可読性が向上する。
・"修飾子" とは、名詞または動詞の意味を修飾する内容語。
・ "修飾" とは、ある語句によって他の語句の意味を限定する事。
・"バブリング" とは、発生したイベントが上位の要素に伝播する事。親要素と子要素に1つずつイベントがある場合、子要素のイベントを発生させると、親要素に設定しているイベントも同時に発生する、JavaScriptにおけるデフォルトの挙動の事。
・ "伝播" とは、伝わり広がっていく事。バブリングの日本語版？JavaScriptにおける伝播の道筋なるものがあり、分かりやすく説明している記事がこちら。
https://qiita.com/irico/items/8a23071719aa28e3c032
・バブリングを防ぐためにイベント修飾子なるものを記述する事で、イベント発生時に伝播させない様にする。

イベント修飾子（stop）

・stopを記述する事で、バブリングを防ぐ事が出来る

■イベント修飾子（stop）を使用しない場合

//HTML//
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
  <p>現在{{ number }}回クリックされています</p>
  <button v-on:click="countUp(3)">カウントアップ</button>
  <p v-on:mousemove="changeMousePosition($event, 10)">マウスを載せてください<span>反応させないで下さい</span></p>
  <p>X:{{x}}、Y:{{y}}</p>
</div>


//JavaScript//
new Vue({
  el: '#app',
  data: {
    number: 0,
    x: 0,
    y: 0
  },
  methods: {
    countUp: function(times) {
   	  this.number += 1 * times
    },
    changeMousePosition: function(event, divideNumber) {
   	  this.x = event.clientX / divideNumber;
      this.y = event.clientX / divideNumber;
    }
  }
})

・HTMLファイルの5行目に記述しているpタグの「マウスを載せてください」とspanタグの「反応させないで下さい」にマウスをあてると、いずれも座標を取得して表示される様になる（パブリング）。

■イベント修飾子（stop）を使用せず、パブリングを防ぐ記述

//HTML//
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
  <p>現在{{ number }}回クリックされています</p>
  <button v-on:click="countUp(3)">カウントアップ</button>
  <p v-on:mousemove="changeMousePosition($event, 10)">マウスを載せてください<span v-on:mousemove="noEvent">反応させないで下さい</span></p>
  <p>X:{{x}}、Y:{{y}}</p>
</div>


//JavaScript//
new Vue({
  el: '#app',
  data: {
    number: 0,
    x: 0,
    y: 0
  },
  methods: {
    countUp: function(times) {
   	  this.number += 1 * times
    },
    changeMousePosition: function(event, divideNumber) {
   	  this.x = event.clientX / divideNumber;
      this.y = event.clientX / divideNumber;
    },
    noEvent: function(event) {
   	  event.stopPropagation()
    }
  }
})

・HTMLファイルの5行目に記述しているspanタグの記述を "<span v-on:mousemove="noEvent">" に変更、JavaScriptファイルの16行目〜18行目を追加する事でspanタグの「反応させないで下さい」にマウスをあてても、座標を取得しない様になる（パブリングを防ぐ）。

■イベント修飾子（stop）を使用する記述

//HTML//
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
  <p>現在{{ number }}回クリックされています</p>
  <button v-on:click="countUp(3)">カウントアップ</button>
  <p v-on:mousemove="changeMousePosition($event, 10)">マウスを載せてください<span v-on:mousemove.stop>反応させないで下さい</span></p>
  <p>X:{{x}}、Y:{{y}}</p>
</div>


//JavaScript//
new Vue({
  el: '#app',
  data: {
    number: 0,
    x: 0,
    y: 0
  },
  methods: {
    countUp: function(times) {
   	  this.number += 1 * times
    },
    changeMousePosition: function(event, divideNumber) {
   	  this.x = event.clientX / divideNumber;
      this.y = event.clientX / divideNumber;
    },
  }
})

・HTMLファイルの5行目に記述しているspanタグの記述を "<span v-on:mousemove.stop>" に変更、前述に記述したJavaScriptファイルの16行目〜18行目を削除する事でspanタグの「反応させないで下さい」にマウスをあてても、座標を取得しない様になる（パブリングを防ぐ）。
・イベント修飾子を活用する事で、可読性が向上する。

イベントの制御に関しては、実務においても頻繁に活用する記述みたいです。仕組みを理解し、使いこなせる様にしたいです。コードを書いて挙動を確認するのが楽しい😃

本日も最後まで読んで頂きありがとうございました。

■参考教材
Udemy「超Vue.js 2 完全パック」