Vue.jsのv-on【現役エンジニアが解説】
今回は、Vue.jsのv-onについて、簡単に解説していきます。
v-onとは
Vue.jsのv-onを使うとVueインスタンスのメソッドを発火できます。
例えば、v-on:clickにメソッドを指定すると、クリック時にメソッドが発火します。
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反転</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '123456789'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
上記のコードでは、反転ボタンをクリックするとmessageの内容が反転するようにしています。
引数の指定も可能
メソッド名の指定ではなく引数の指定も可能です。
通常のJavaScriptと同じ書き方がVue.jsでもできます。
<div id="app">
<button v-on:click="greet('Good morning')">午前の挨拶</button>
<button v-on:click="greet('Good afternoon')">午後の挨拶</button>
</div>
<script>
new Vue({
el: '#app',
methods: {
greet: function (message) {
alert(message)
}
}
})
</script>
上記のコードの例では、関数の呼び出し時に文字列を引数に指定しています。
DOMイベントを渡すこともできる
DOMイベントを引数で渡すこともできます。
DOMイベントを渡すには引数に$eventと書く必要があります。
<div id="app">
<button v-on:click="getButtonClickEvent($event)">
イベント情報のログ出力
</button>
</div>
<script>
new Vue({
el: '#app',
methods: {
getButtonClickEvent: function (event) {
if (event) {
event.preventDefault()
}
console.log(event)
}
}
})
</script>
上記の例では、getButtonClickEventメソッドを呼び出す際にDOMイベントも渡しています。