はじめに
Vue.jsのv-onの書き方のバリエーションが多かったので、整理のためにまとめました。
上から順番に読むと１つずつ変化するよう書いています。
この記事が役に立つ方
- Vue.js初心者
この記事のメリット
-
v-onの書き方のバリエーションが分かる
環境
- macOS Catalina 10.15.1
- Vue.js: 2.6.10
前提
ボタンを押すと、画面上の数字が１ずつ足されるだけのアプリを例にします。
ディレクトリ構成
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.nはdata内の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
変更なし
長くなりましたが以上です！
おわりに
最後まで読んで頂きありがとうございました
基本ですが、何度も使いそうな知識なのでまとめてみました。
どなたかの役に立てればと思います