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イベントも渡しています。