Vueと共通

【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

+=

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

表示


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

@click="methods名"

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

コード

) pages

パターン1

表示

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

パターン2

表示

テキスト${変数名}

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

表示

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

解説

  • 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が表示される

prevent

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

他にも色々

  • capture
  • self
  • once
  • passive

-Vueと共通
-,

© 2020 aLiz Nuxt