【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:
DOMイベントの発火時に
JavaScriptを実行🤖

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

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

実行式を直接記載

@click="実行式"

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

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

コード

) pages

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

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

<p>{{ counter }}</p>

click!

</button>

</div>

</template>

export default {

data () {

return {

counter: 0,

}

</script>

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

表示

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

@click="methods名"

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

コード

) pages

パターン1

<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>

<p>{{ counter }}</p>

click!

</button>

</div>

</template>

export default {

data () {

return {

counter: 0,

}

methods: {

countUp () {

this.counter += 1

}

</script>

表示

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

パターン2

<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>

alertMessage

</button>

alertEvent

</button>

</div>

</template>

export default {

data () {

return {

name: 'Nuxt.js'

}

methods: {

alertMessage () {

alert (`Hello ${this.name}!`)

alertEvent (event) {

alert (event.target.tagName)

}

</script>

表示

テキスト${変数名}

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

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

event.target いろいろ

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'を表示させてます🌟

コード

) pages

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

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

Say hi

</button>

</div>

</template>

export default {

methods: {

say (message) {

alert (message)

}

</script>

表示

say(変数)

文字列ではなく変数でも⭕️
say(name)にした場合は
dataのnameが呼び出され
表示は文字列'myName!'になります🌟
ちなみにsayが変数、'hi'が変数名です！

　data () {
　　return {
　　　name: 'myName!'
　　}
　},

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

@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

コード

) pages

<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>

<button

value="りんご"

@click="textChange($event)"

りんご

</button>

<button

value="みかん"

@click="textChange($event)"

みかん

</button>

</div>

</template>

export default {

data () {

return {

text: 'りんご or みかん',

}

methods: {

textChange (event) {

console.log(event)

this.text = event.target.value

}

</script>

解説

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

$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が
親要素に伝搬するのを防ぎます

コード

) pages

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

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

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

イベント実行ボタン

</button>

</div>

</template>

export default {

methods: {

handler (element) {

alert(element)

}

</script>

prevent

Event.preventDefault()と同じです。
@submit.preventでよく使います。

【Nuxt.js】v-model実践編：オリジナルフォームの簡単な作り方

他にも色々

capture
self
once
passive