**
New learning and new journey, let us embark on the new long march of learning vue.js together
Encounter vue.js -------- Awen's vue.js study notes (1)-----First time vue.js
Meet vue.js -------- Awen's vue.js study notes (2-1)-Basic use [1]
Meet vue.js -------- Awen's vue.js study notes (2-2) ----- Basic usage [2]
… … …
Meet vue.js -------- Awen's vue.js study notes (directory)
Pay attention to me, we learn and progress together.
**
Now comes the event handling, it must be recalled that we previously learned v-onbind event listener (used to listen for DOM events, and when triggered, run some js code)
1. Incident handling method
Supplement: Our v-on can be abbreviated as @, the effect of the two is the same
Here we give a simple example: there is a button, when clicked, a pop-up "I was clicked"
Of course there are times when you encounter it directly to the js code is written in the
v-oninstructions, but when we want to execute js code becomes complex and varied, so writing is not desirable, so we generally use the form of method invocation , the following method of creating a data, then the abovev-onmethod calls directly to the instruction.
When we need to pass parameters in the method, you can use inline handler method
Simple example: The same is a popup, but the content that pops up this time is no longer dead, but based on the parameters passed in when the method is called after v-on.
When we sometimes need inline statement processor access to the original DOM event, you can use special variables $eventto put it passed to the method
Simple example: here event.type is to view the properties of the event
In fact, these two methods are similar, except that one can pass parameters, and the other cannot pass parameters.
2. Event modifier
Event modifiers can simply handle the details of some DOM events
Our event modifier is written directly after the bound instruction .事件修饰符
1. .stop prevents bubbling
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
<style>
#b1{
background-color: greenyellow;
height: 300px;
width: 300px;
}
#b2{
background-color: red;
height: 150px;
width: 150px;
}
</style>
</head>
<body>
<div id="a">
<div id="b1" v-on:click="fn2">
<div id="b2" v-on:click="fn1"></div>
</div>
</div>
<script>
new Vue({
el:"#a",
data:{
},
methods:{
fn1:function(){
alert("内部被点击")
},
fn2:function(){
alert("外部被点击")
}
}
})
</script>
</body>
</html>
Execution result: When we click inside, in addition to the internal function being executed, the external function is also called, which is a bubbling event.
We can stop bubbling by adding .stop
2. .prevent prevents the default behavior
Simple example:
every time our submit is submitted, the page will be refreshed and reloaded.
But after adding it like the following, it will be blocked and will not be refreshed directly.
<form v-on:submit.prevent="onSubmit"></form>
Of course, in addition to the two common above, here are a few more:
.selfIt only works on yourself.
.captureUse event capture mode when adding event listeners.
onceOnly execute once
2. Key modifier
When we are listening to keyboard events, we often need to check the detailed keystrokes. Vue allows v-on to add key modifiers when listening to keyboard events:
For example: we create an input box, and then when we enter the content and press enter, the input data will be passed into the information in front of the input box, and each time it is passed in, the last input data will be reset
According to our previous writing, we need to use if to make judgments
The code is as follows: In
this case, we can also omit the following if judgment statement and write directly on it: the result of execution is exactly the same.<input v-on:keyup.13="mm1">
Of course, we
Vuealso provide a number of aliases commonly used keys code:
.enterEnter key
.tabTAB key
.delete(to capture the "Delete" and "backspace" key)
.escExit
.spacethe spacebar
.upon
.downthe lower
.leftleft
.rightand right
3. System modifier keys
We can use the following system modifiers to implement a listener that triggers mouse or keyboard events only when the corresponding system modifier key is pressed, and then the other is pressed.
There are four system modifier keys:
| .ctrl | |
|---|---|
| .alt | |
| .shift | |
| .meta |
To give a simple example: modify on the basis of our above example
<input v-on:keyup.alt.enter="mm2">
After this writing, it means that we need to press the altfoundation under then press the enter button and release the enter key after , we mm2 事件will be triggered.
**
Follow the campus official account, reply to the web front-end to receive a free 50G front-end learning materials, let's learn and make progress together.
**