Table of contents
1. There are two ways to write the click event
2. Prevent the default event submitted by the form form
1. Event binding
1. There are two ways to write the click event
@click="handleClick"
@click="handleClick($event)"
$event can get the dom element or modify the attribute of the label
2. Prevent the default event submitted by the form form
1. Bind event @click="handleClick" on the form, write e.preventDefault() in the method
2. Bind the event @click.prevent directly on the form
event modifier
click.prevent
click.stop prevents the event from bubbling outward
click.self only clicks on the bound label itself to trigger the event
click.once is a one-time event, which will be bound after execution
click.capture captures events and executes from outside to inside, which is the opposite of bubbling
click.native can bind native events to components
key modifier
@keydown triggers an event when a key is pressed
keydown.enter triggers an event when the Enter key is pressed
keydown.tab triggers an event when the tab key is pressed
system modifier
keydown.ctrl Press and hold the ctrl key at the same time, the event will be triggered
keydown.alt
keydown.shift
keydown.mate
mouse button modifier
@click.right/left/middle Mouse right click/left click events are triggered respectively
2. Form binding
v-model can be bound to labels such as single-line text box, multi-line text box, radio, check, select, etc.
vue form binding modifier
1. v-model.lazy //Render when the text box loses focus
2. v-model.number //Convert the input content into a digital type
3. v-model.trim // Read the content of the input box, and then remove the spaces at the beginning and end