Help us understand the problem. What is going on with this article?

【Vue.js】v-onの書き方まとめ【初心者向け】

はじめに

Vue.jsのv-onの書き方のバリエーションが多かったので、整理のためにまとめました。

上から順番に読むと1つずつ変化するよう書いています。

参考:Vue.js 公式ドキュメント

この記事が役に立つ方

  • Vue.js初心者

この記事のメリット

  • v-onの書き方のバリエーションが分かる

環境

- macOS Catalina 10.15.1
- Vue.js: 2.6.10

前提

ボタンを押すと、画面上の数字が1ずつ足されるだけのアプリを例にします。

ディレクトリ構成
count
├ index.html
└ main.js

基本構文

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Count App</title>
  </head>
  <body>
<!-- 以後ここから -->
    <div id="app"> 
      <button v-on:click=" n++ ">Count</button>
      <p>{{ n }}</p>
    </div>
<!-- ここまでで記載 -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="main.js"></script>
  </body>
</html>
main.js
var app = new Vue({
    el: '#app',
    data: {
        n: 0
    },
// 以後ここから
    methods: {
    }
// ここまでで記載
})

短縮形

以後、v-on:click=>@clickと短縮形で記載します。

index.html
    <div id="app"> 
      <button @click=" n++ ">Count</button>
      <p>{{ n }}</p>
    </div>

メソッドを渡す

もともとは数式をそのままhtml側に記載していました。
後々のことを考え、メソッドに変更します。

index.html
    <div id="app">
      <button @click="countUp">Count</button>
      <p>{{ n }}</p>
    </div>
main.js
    methods: {
        countUp: function() {
            this.n += 1
        }
    }

ここで、this.ndata内のnを参照しています。

メソッドを引数付きで渡す

ボタンを押すとアラートが発動するようにします。

index.html
    <div id="app">
      <button @click="countUp('Get money!')">Count</button>
      <p>${{ n }}</p>
    </div>
main.js
    methods: {
        countUp: function(comment) {
            this.n += 1
            alert(comment)
        }
    }

この数字はお金($)だったようですね!

イベント修飾子を使う

喜びは束の間。

無限にお金が湧いてくるなんて虫のいい話はないので、一回しかボタンを押せないようにします。

index.html
    <div id="app">
      <button @click.once="countUp('Get money!')">Count</button>
      <p>${{ n }}</p>
    </div>
main.js
変更なし

キーを使う

クリックではなく、Enterキーを押すとカウントされるようにします。

index.html
    <div id="app">
      <button @keyup.enter.once="countUp('Get money!')">Count</button>
      <p>${{ n }}</p>
    </div>
main.js
変更なし

キーを使う

さらにガードを固くしましょう。
Shift + Enterキーでカウントされるようにします。

index.html
    <div id="app">
      <button @keyup.shift.enter.once="countUp('Get money!')">Count</button>
      <p>${{ n }}</p>
    </div>
main.js
変更なし

長くなりましたが以上です!

おわりに

最後まで読んで頂きありがとうございました:bow_tone1:

基本ですが、何度も使いそうな知識なのでまとめてみました。
どなたかの役に立てればと思います:relaxed:

参考にさせて頂いたサイト(いつもありがとうございます)

terufumi1122
小売業経験8年。異業種から未経験・完全独学でサーバーサイドエンジニアになった人。 ストックついでに「いいね!」もしてもらえると嬉しいです。 HTML/CSS/JavaScript/Vue.js/Ruby/Ruby on Rails #駆け出しエンジニアとつながりたい #元転勤族
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした