Method and event processor

Method processor

You can use thev-oncommand to monitor DOM events:

Copy after login

We are bound A click event handler to a methodgreet. 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!'

Copy after login

Inline statement processor

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

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

Copy after login

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$eventto pass it into the method:

Copy after login

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

Copy after login

Event modifier

often needs to be called in the event handlerevent.preventDefault()orevent.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 forv-on:.preventand.stop. Do you still remember that modifiers are command suffixes starting with a period?

Copy after login

1.0.16 Added two additional modifiers:

...

Copy after login

Key modifiers

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

Copy after login

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

Copy after login

All key aliases:

enter tab delete esc space up down left right

Copy after login

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

Copy after login

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, usingv-onhas several advantages:

You can easily locate the corresponding method in the JavaScript code by scanning the HTML template.
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.
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!