Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

【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

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

@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

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

@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

💡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
 },

結果
@click4.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

aLiz
★WPヘ移行しました★「ITで関わる人にワクワクを届ける」 aLizの公式アカウントです。 Vue.js/Nuxt.jsのあれこれを発信中! ご感想やご意見をいただけると嬉しいです。 ご意見にはできるだけ反応します。
http://nuxt.alizlab.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away