【Nuxt.js】Nuxt文法編：@click

前置き

「すごく勉強になる！😍」
とコメントいただけた
人気の文法編です💕
今回は@click！

❓どんな時に使うか
クリックでJSを実行したい時に使います🍒
使用率は高いのでぜひマスターしてください🌟

TODOリストをクリックで削除したり
https://note.com/aliz/n/nda7438249ca8
クリックでページ遷移したり
https://note.com/aliz/n/nd9f344e4686f
modalをクリックで開閉したり…！
https://note.com/aliz/n/nd6e771724cd7

@click

@click
v-on:click
どちらでも同じ意味です。
@はv-on:の省略です💡

v-on:hoge
hogeイベントが起きた時

v-on:
DOMイベントの発火時に
JavaScriptを実行🤖

v-on:click
クリックイベントが起きた時に
JavaScriptを実行🌟

実行式を直接記載

@click="実行式"
実行式を直接書きます✍️
ただ通常は次のmethodsを呼び出すのが一般的です！
それが何故かを理解するために、把握する程度でOK！

ここでdataのcounterを使う場合は
thisが不要です！
methods内で呼び出す場合は
必要になります💡

index.vue

<template>
 <div class="page">
   <p>{{ counter }}</p>
   <button @click="counter += 1">
     click!
   </button>
 </div>
</template>

<script>
export default {
 data () {
   return {
     counter: 0,
   }
 },
}
</script>

💡+=
　演算子です。
　変数の値(counter: 0)と
　式の値(1)を加算して
　その和を変数(counter)に代入します♠️
　counterの0に1を足して
　counter自体が1になります。
　そしてまた1を足すとcounterが2, 次は3…
　と続いていきます🐝

結果

メソッドイベントハンドラ

@click="methods名"
実行式が長くなることが多いため
methods名を呼び出せます🧞‍♀️

🌷パターン1🌷

index.vue

<template>
 <div class="page">
   <p>{{ counter }}</p>
   <button @click="countUp">
     click!
   </button>
 </div>
</template>

<script>
export default {
 data () {
   return {
     counter: 0,
   }
 },
 methods: {
   countUp () {
     this.counter += 1
   },
 },
}
</script>

結果
先ほどと同じです🙋‍♀️

🌷パターン2🌷

index.vue

<template>
 <div class="page">
   <button @click="alertMessage">
     alertMessage
   </button>
   <button @click="alertEvent">
     alertEvent
   </button>
 </div>
</template>

<script>
export default {
 data () {
   return {
     name: 'Nuxt.js'
   }
 },
 methods: {
   alertMessage () {
     alert (`Hello ${this.name}!`)
   },
   alertEvent (event) {
     alert (event.target.tagName)
   },
 },
}
</script>

💡テキスト${変数名}
　methodsのalertMessageで使用。
　テンプレートリテラルです。
　通常は文字列を''で囲み
　+で変数を連結しますが…
　いちいち''で囲むのは面倒😔
　'テキスト' + 変数名 + 'テキスト'

　テンプレートリテラルを使えば
　いちいち文字を''で区切らず
　``(バッククォート)で全体を囲み
　変数の部分だけ${変数名}にすれば
　簡単に連結できます🤗

💡event.target.tagName
　methodsのalertEventで使用。
　event.target
　クリックイベントが起きている物
　[object HTMLButtonElement]
　event.target.tagName
　buttonタグの名前
　buttonが表示されます🍒
　大文字で返されます。
　https://developer.mozilla.org/ja/docs/Web/API/Element/tagName

結果

インラインメソッドハンドラ

@click="methods名(引数に代入する物)"
インラインでJavaScript実行式を書けます！
文字列'hi'を表示させてます🌟

index.vue

<template>
 <div class="page">
   <button @click="say('hi')">
     Say hi
   </button>
 </div>
</template>

<script>
export default {
 methods: {
   say (message) {
     alert (message)
   },
 },
}
</script>

結果

💡say(変数)
　文字列ではなく変数でも⭕️
　say(name)にした場合は
　dataのnameが呼び出され
　表示は文字列'myName!'になります🌟
　data () {
　　return {
　　　name: 'myName!'
　　}
　},

💡ちなみにsayが変数、'hi'が変数名です！

インラインステートメントハンドラ

@click="methods名($event)"
$event変数でDOMイベントの参照ができます！

❓DOMイベントとは
　DOM：文字の色を変えたり、
　　　　プログラムからhtmlなどを操作できる仕組みのこと
　DOMイベント：操作するためのイベント

【イベントの種類】
　いくつか記載しましたが
　他にもまだまだ沢山あります！
　気になる方は調べてみてください😄

イベントハンドラ

JavaScriptイベントハンドラ/
--| mouseイベント(DOMイベント)/
-----| @click(type)
-----| @mousedown(type)
-----| @mouseup(type)
--| keyboardベント/
-----| @click
-----| @mousedown
-----| @mouseup
--| inputイベント/
-----| @input
-----| @change

【解説/index.vue】
・textChange (event)
　イベントを受け取る際は$が不要です💡
・event.target.value
　今回のMouseEventが起きている
　target(button)のvalue(りんご、みかん)

index.vue

<template>
 <div class="page">
   <p>{{ text }} が好き</p>
   <button
     value="りんご"
     @click="textChange($event)"
   >
     りんご
   </button>
   <button
     value="みかん"
     @click="textChange($event)"
   >
     みかん
   </button>
 </div>
</template>

<script>
export default {
 data () {
   return {
     text: 'りんご or みかん',
   }
 },
 methods: {
   textChange (event) {
     console.log(event)
     this.text = event.target.value
   },
 },
}
</script>

💡$eventは省略可能
　@click="methods名"だけでもOKです！

💡@click="textChange($event.target.value)"
　もちろんここで直接値を渡してもOKです！
　consoleの表示が変わるので見てみてください👀
　methodsの変更もお忘れなく〜🍀
　textChange (event) {
　　console.log(event)
　　this.text = event
　},

結果

💡console.log(event)
　今回はMouseEventが表示されています👀
　中身を見るとtype: "click"が出てきますよ🌟

イベント修飾子

@click.修飾子="methods名"
様々な修飾子(event modifiers)が使えます！

・stop
　ネストされた子要素のmethodsが
　親要素に伝搬するのを防ぎます

【index.vue】
親要素、子要素共に同じmethodsを使用してます。
stopなし：親と子の2回のalertが表示される
stopあり：子の1回のみalertが表示される

index.vue

<template>
 <div @click="handler">
   <button @click.stop="handler">
     イベント実行ボタン
   </button>
 </div>
</template>

<script>
export default {
 methods: {
   handler (element) {
     alert(element)
   },
 },
}
</script>

他にも色々あります！
・prevent
　Event.preventDefault()と同じです。
　@submit.preventでよく使います。　　　https://note.com/aliz/n/n5b9bd618399e

・capture
・self
・once
・passive