最終更新:2018-03-26 (月) 17:01:40 (2221d)  

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?



検索：