Issues with Vue methods and event handling

Method and event processor

Method processor

You can use the v-on command to monitor DOM events:

<p id="example">
  <button v-on:click="greet">Greet</button>
</p>

We are bound A click event handler to a method greet. Define this method in the Vue instance below:

var vm = new Vue({
  el: '#example',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // 方法内 `this` 指向 vm
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      alert(event.target.tagName)
    }
  }
})

// 也可以在 JavaScript 代码中调用方法
vm.greet() // -> 'Hello Vue.js!'

Inline statement processor

In addition to directly binding to a method, you can also use inline JavaScript statements:

<p id="example-2">
  <button v-on:click="say(&#39;hi&#39;)">Say Hi</button>
  <button v-on:click="say(&#39;what&#39;)">Say What</button>
</p>

new Vue({
  el: &#39;#example-2&#39;,
  methods: {
    say: function (msg) {
      alert(msg)
    }
  }
}

Similar to inline expressions, event handlers are limited to one statement.

Sometimes it is also necessary to access native DOM events in an inline statement processor. You can use the special variable $event to pass it into the method:

<button v-on:click="say(&#39;hello!&#39;, $event)">Submit</button>

// ...
methods: {
  say: function (msg, event) {
    // 现在我们可以访问原生事件对象
    event.preventDefault()
  }
}

Event modifier

often needs to be called in the event handler event.preventDefault() or event.stopPropagation(). Although we can easily do this within a method, it would be better to have the method be pure data logic and not deal with DOM event details.

In order to solve this problem, Vue.js provides two event modifiers for v-on: .prevent and .stop. Do you still remember that modifiers are command suffixes starting with a period?

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat">

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

1.0.16 Added two additional modifiers:

<!-- 添加事件侦听器时使用 capture 模式 -->
<p v-on:click.capture="doThis">...</p>

<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<p v-on:click.self="doThat">...</p>

Key modifiers

When listening for keyboard events, we often need to detect keyCode. Vue.js allows adding key modifiers for v-on:

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

It is difficult to remember all the keyCode, Vue.js provides aliases for the most commonly used keys:

<!-- 同上 -->
<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->
<input @keyup.enter="submit">

All key aliases:

enter
tab
delete
esc
space
up
down
left
right

1.0.8+: Supports single-letter key aliases.

1.0.17+: You can customize the key alias:

// 可以使用 @keyup.f1
Vue.directive('on').keyCodes.f1 = 112

Why listen for events in HTML?

You may notice that this way of event monitoring goes against the tradition Concept "separation of concern". Don't worry, since all Vue.js event handlers and expressions are strictly bound to the current view's ViewModel, it won't cause any maintenance difficulties. In fact, using v-on has several advantages:

1. You can easily locate the corresponding method in the JavaScript code by scanning the HTML template.

2. Because you don’t need to manually bind events in JavaScript, your ViewModel code can be very pure logic, completely decoupled from the DOM, and easier to test.

3. When a ViewModel is destroyed, all event handlers will be automatically deleted. You don’t have to worry about cleaning them yourself.

The above is the detailed content of Issues with Vue methods and event handling. For more information, please follow other related articles on the PHP Chinese website!