Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to achieve vuejs event monitoring, the article is very detailed, has a certain reference value, interested friends must read it!

In vuejs, you can use the "v-on" directive to implement event listening, which is used to bind event listeners; simply add the "v-on: event parameter =" event handler "statement to the tag template and use JavaScript to set the code that needs to be executed when triggered.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

When the template is rendered, you can bind and listen for events. The v-on instruction is used to listen for DOM events and is usually used directly within the template.

Say

Method and inline statement processor

Using the method in the v-on binding strength option property methods as the event handler, the v-on: parameter accepts all the native event names.

Say var vm = new Vue ({el: "# app", data: {msg: "hello vue.js"}, methods: {say:function () {alert (this.msg);})

V-on abbreviated form: @. @ click= "say"

V-on supports inline JavaScript statements, but only one statement.

Say var vm = new Vue ({el: "# app", data: {msg: "hello vue.js"}, methods: {sayFrom:function (from) {alert (this.msg +''+ from);})

It is possible to obtain native DOM event objects when directly binding methods functions and inlining JavaScript and bedroom.

Event event Say / / does not get event var vm = new Vue ({el: "# app", methods: {showEvent:function (event) {console.log (event);})

Multiple identical event functions can be bound on the same element through v-on, and the execution order is sequential.

Event modifier

1. Stop: call event.stopPropagation ().

2. Inventor: call event.preventDefault ().

3. Caputure: use capture mode to add event listeners.

...

4. .self: the recall is triggered only when the event is triggered from the listening element itself.

...

5 、. Once:

When using modifiers, order is important; the corresponding code is generated in the same order. Therefore, using @ click.prevent.self blocks all clicks, while @ click.self.prevent only blocks clicks on the element.

/ / example var vm = new Vue ({el:'# app', methods: {saySelf (msg) {alert (msg);}); / / HTML code button button key modifier

When listening for keyboard events, you need to monitor common key values.

/ / listens to the input of input and triggers the submit function when entering enter.

Remembering all the keyCide is difficult, so Vue provides aliases for the most commonly used keystrokes.

.enter

.tab

.delete (capture delete and backspace keys)

.esc

.space

.up

.down

.left

.right

You can customize the key modifier alias through the global config.keyCodes object:

/ / you can use the difference between v-on:keyup.f1 Vue.config.keyCodes.f1 = 112 and traditional event binding

1. There is no need to manage events manually. When the ViewModel is destroyed, all event handlers are automatically removed, freeing us from things like getting DOM bound events and unbinding them in certain cases.

two。 Decoupling. ViewModel code is pure logic code, which has nothing to do with DOM, so it is helpful for us to write automated test cases.

Vue.extend ()

For reused subcomponents, vue.js provides the Vue.extend (options) method to create "subclasses" of the underlying Vue constructor, and the parameter options object is basically the same as the parameter object that directly declares the Vue instance.

Var Child = Vue.extend ({teplate:'#child', / / the difference is that the el and data options need to be assigned through the function return value Avoid multiple component instances sharing one data data:function () {return {...}},...}) Vue.component ('child',child) / / Global Registration subcomponents / / how subcomponents are called within other components are all the contents of the article "how to implement vuejs event listening" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.