【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.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/7be08414-bf4a-d8c9-16e3-d017c7889619.gif)

# メソッドイベントハンドラ
**@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

**結果**
![@click2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/be41b793-f6b1-5320-81f1-5962abc49d01.gif)

# インラインメソッドハンドラ
**@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>
```

**結果**
![@click3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/f892db24-befe-e5ad-88ab-81eac68c3e33.gif)

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

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

# インラインステートメントハンドラ
**@click="methods名($event)"**
$event変数でDOMイベントの参照ができます！

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

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

```bash:イベントハンドラ
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
　},

**結果**
![@click4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/abb7fb15-1d99-4f18-fcc1-388fd5c797db.gif)

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