最終更新:2018-03-26 (月) 17:01:40 (2195d)
v-on
Top / v-on
<button v-on:click="reverseMessage">Reverse Message</button>
例
- v-on:click=Vue.methods?:メソッド名
<div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">Reverse Message</button> </div>
var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } })
イベント修飾子
- .prevent 修飾子は v-on ディレクティブに、イベントがトリガされた際 event.preventDefault() を呼ぶように伝えます:
<form v-on:submit.prevent="onSubmit"> ... </form>
その他
- .stop
- .prevent
- .capture
- .self
- .once
メモ
- v-on:keyup.enter="addNewTodo?"
省略記法
<!-- 完全な構文 --> <a v-on:click="doSomething"> ... </a> <!-- 省略記法 --> <a @click="doSomething"> ... </a>
キー修飾子
<input v-on:keyup.13="submit"> <!-- 上記と同じです --> <input v-on:keyup.enter="submit"> <!-- 省略記法も同様に動作します --> <input @keyup.enter="submit">
- .enter
- .tab
- .delete (“Delete” と “Backspace” キー両方をキャプチャします)
- .esc
- .space
- .up
- .down
- .left
- .right
関連
- Vue.methods?