Vue .js 2.0 event processor

Vue .js 2.0 event processor

Listen for events

You can use the v-on instruction to listen for DOM events to trigger some JavaScript code.

Example:

<div id="example-1">
  <button v-on:click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

Results:

This button has been clicked 0 times.

Method event processor

The logic of many event handling is complex, so it is not feasible to write JavaScript code directly in the v-on instruction. Therefore v-on can receive a defined method call.

Example:

<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      alert(event.target.tagName)
    }
  }
})
// 也可以用 JavaScript 直接调用方法
example2.greet() // -> 'Hello Vue.js!'

Results:

Inline processor method

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

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

Results:

Sometimes you also need to access native DOM events in an inline statement processor. You can pass $event method with a special variable:

<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>

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

Event modifier

Calling event.preventDefault() or event.stopPropagation() in an event handler is a very common requirement. Although we can easily implement this in methods, it is better to say that methods have pure data logic, not to handle the details of DOM events.

To solve this problem, Vue .js provides an event modifier for v-on. B y point (.) Represents the instruction suffix to call the modifier.

• .stop
• .prevent
• .capture
• .self

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

Key modifier

When listening for keyboard events, we often need to monitor common key values. Vue allows key modifiers to be added for v-on when listening to keyboard events:

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

Keeping in mind that all keyCodes are difficult, Vue provides an alias for the most commonly used keystrokes:

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

All key alias:

• enter
• tab
• delete (capture "delete" and "back" keys)
• Esc
• space
• up
• down
• left
• right

Key modifier alias can be customized from the global config.keyCodes object:

// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112

Why listen for events in HTML?

You may notice that this way of monitoring events goes against the traditional concept of separation of concerns. D on't worry, because all Vue.js event handling methods and expressions are strictly bound to ViewModel in the current view, it does not cause any maintenance difficulties. In fact, there are several benefits to using v-on:

1. A glance at the HTML template makes it easy to locate the methods that correspond in JavaScript code.
2. Because you don't have to bind events manually in JavaScript, your ViewModel code can be very pure logic, fully decoupled from the DOM, and easier to test.
3. When a ViewModel is destroyed, all event processors are automatically deleted. You don't have to worry about how to clean them up yourself.