Foreword
In the last chapter vue study notes (c) class and style bindings content, we learned how to bind class and style in vue, we introduce the common binding method, class of array and object binding and binding style array of binding and binding objects, this blog will explain the use of vue about the event.
In fact, we are not familiar about the incident, when learning of JavaScript have come into contact with, such as click events, mouse events, keyboard events and touch event moving end, and so on. Before learning vue event handler we first look at how to bind event Javascript is it!
Javascript binding events
Method One: directly binding on the label
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button onclick="add()">你好</button> <script type="text/javascript"> function add(){ Alert ( ' Hello ' ) } </script> </body> </html>
Method two: dynamic binding by acquiring node
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button id="btn">问候</button> <script type="text/javascript"> document.getElementById('btn').onclick=function(){ Alert ( ' Hello ' ) } </script> </body> </html>
Method three: Use the addEventListener listener event
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button id="btn">问候</button> <script type="text/javascript"> document.getElementById('btn').addEventListener('click',function(){ Alert ( ' Hello ' ) },false) </script> </body> </html>
the difference:
- With "addeventlistener" can be bound to the same event multiple times, and will be executed.
- If the DOM structure to bind the two "onclick" event, only the implementation of the first.
- In the script by an anonymous bind function will only perform the last event.
vue bound event
Vue method of binding events and JavaScript, in fact binding events are similar, do not believe, let's look at an example to clear out.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <button @click="greet('你好')">问候</button> </div> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> const vm=new Vue({ on: ' #app ' , data:{ }, computed:{ }, methods:{ greet(msg){ alert(msg); } } }) </script> </body> </html>
Is not it almost feels now! vue events (method) by the unified management methods, any method of treatment must be written in the inside.
Next, I explain vue event processing with brackets and no difference in parentheses.
Example:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <button @click="greet('你好',$event)">问候</button> <button @click="say">打招呼</button> </div> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> const vm=new Vue({ on: ' #app ' , data:{ }, computed:{ }, methods:{ greet(msg,event){ alert(msg); console.log(event); }, say(event){ console.log(event); } } }) </script> </body> </html>
result:
Difference : that the event object parameter handling the event. Without parentheses, the first parameter to the function event, plus the brackets, the need to manually pass $ event to get the event object .
Event Modifier
Called in the event handler event.preventDefault() or event.stopPropagation() a very common requirement. Although we can easily achieve this point in the process, but is a better way: only pure data logic method, rather than the DOM event details.
To solve this problem, vue.js to provide event modifier . Mentioned earlier, by the command modifier suffix to indicate the beginning of a point, such as those below. v-on
.stop.prevent.capture.self.once.passive- .once
<-! Stop the click event continues to spread -> < A v-ON: click.stop = "doThis" > </ A > <! - an event not to reload the page -> < form v-ON: submit.prevent = "onSubmit" > </ form > <! - modifier in series -> < A V-ON: click.stop.prevent = "dothat" > </ A > <! - only modifier -> < form v-ON: submit.prevent > </ form > <! - use when adding an event listener event capture mode -> <-! That event triggered the first internal element in this process, before it handed over to the internal processing elements -> < div v-ON: the Click. Capture = "the doThis" > ... </ div > <! - only when event.target handler is triggered when the current element itself -> <! - that is, the event is not triggered from inside element -> < div v-ON: click.self = "dothat" > ... </ div > <-! click event will only be triggered once -> < A v-ON: click.once = "doThis" > </ A >
Example:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <button v-on:click.once="greet()">问候</button> </div> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> const vm=new Vue({ on: ' #app ' , data:{ }, computed:{ }, methods:{ greet:function(){ Alert ( ' Hello ' ) } } }) </script> </body> </html>
Example we click event called only once, when clicking a second time it will not have any reaction.
note:
When using the modifier, the order is important; the appropriate code is generated in the same order. Therefore, use will prevent all clicks , but only prevents clicks on the element itself. v-on:click.prevent.self v-on:click.self.prevent
Key modifiers
When listening keyboard events, we often need to check detailed button. vue allowed to add modifier keys while listening keyboard events. v-on
<! - only when calling `submit` key` is `Enter` () method` -> < the INPUT v-ON: keyup.enter = "the Submit" >
Example:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <button v-on:keyup.enter="greet()">问候</button> </div> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> const vm=new Vue({ on: ' #app ' , data:{ }, computed:{ }, methods:{ greet:function(){ Alert ( ' Hello ' ) } } }) </script> </body> </html>
Key code
In order to support older browsers, if necessary, Vue offers alias vast majority of commonly used keys code:
.enter .tab . The Delete (capture "Delete" and "backspace" key) .esc .space .up .down .left .right
System modifiers
Can be used as a modifier to achieve only trigger a mouse or keyboard event listener in the only press the corresponding button.
.ctrl
.alt
.shift
.meta
.exact modifier
.exact Modifier allows you to control events by a precise combination of modifiers systems triggered.
<! - will trigger even if the Alt or Shift is pressed together -> < the Button @ click.ctrl = "onClick" > A </ the Button > <! - and only when it is pressed Ctrl trigger -> < the Button @ click.ctrl.exact = "onCtrlClick" > A </ the Button > <! - no modifier is pressed when the system is triggered only -> < the Button @ click.exact = "onClick" > A </ the Button >
Mouse button modifier
.left
.right
.middle
These modifiers may limit processing function only in response to specific mouse button.