Note source ： Largo Education - Big front end employment training camp

Article content ： Notes in the learning process 、 Sentiment 、 And experience

Vue Event and form handling

Event handling - v-on

Event binding for elements

How to write ：v-on: Event name =" Event handler " It can be abbreviated as @ Event name =" Event handler "

When there is a lot of event code , You can encapsulate the code as a function and put it in methods in

<body>
<div id="app">
<!-- Data binding -->
<p>{{content}}</p>
<!-- Write in three ways click event -->
<!-- standard v-on Method -->
<button v-on:click="content=' New content 1'"> Am I </button>
<!-- @ Method shorthand -->
<button @click="content=' New content 2'"> Am I </button>
<!-- Using functions -->
<button @click="fn"> Am I </button>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
// data 
content: ' Default content '
},
methods: {
// function 
fn() {
this.content = ' New content 3'
}
}
})
</script>
</body>
 Copy code

Manipulate event objects

After setting the event program ,methods Functions in can receive a time object parameter

methods: {
// Function can take a parameter , This parameter is the event object 
fn(event) {
console.log(event)
this.content = ' New content 3'
}
}
 Copy code

If we want to be in the view （HTML） Middle pass parameter , Then we need to write the event object as $event（ Fixed writing ）, for example `@click="fn( The ginseng ,$ event )"`, When vue notice $event You will know that this is the object of the event

// We want to pass in parameters in the event handler , You also want to use event objects , We need to write the object of the event as $event
<button @click="fn2(200,$event)"> Am I </button>
// The following functions 
fn2(x, event) {
console.log(x)
console.log(event)
}
 Copy code

Form input binding - v-model

The following binding operations follow bidirectional binding

For giving input、textarea（ Text domain ）、select Element settings Two way data binding

body>
<div id="app">
<!-- Two way data binding v-model, Data modification on one side value Will change -->
<input type="text" v-model="value">
<textarea v-model="value" cols="30" rows="10"></textarea>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
// Bidirectional data binding data 
value: '123'
},
methods: {}
})
</script>
</body>
 Copy code

Input box binding

Single line input box input And multiline input boxes textarea

<body>
<div id="app">
<!-- Input box binding -->
<p>input The content of the input box is ：{{value1}}</p>
<input type="text" v-model="value1">
<p>textarea The content of the input box is ：{{value2}}</p>
<textarea v-model="value2"></textarea>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
// Bidirectional data binding data 
value1: '',
value2: ''
},
methods: {}
})
</script>
</body>
 Copy code

Radio button binding

<body>
<div id="app">
<!-- Radio button binding -->
<p> The data is ：{{value}}</p>
<!-- Write a pair of radio boxes -->
<!-- radio Represents a radio button ,id For and after label In the binding ,value Value , Two way binding data -->
<input type="radio" id="one" value="1" v-model="value">
<!-- label Bind radio button ,for Binding specifies id The elements of -->
<label for="one"> Options 1</label>
<input type="radio" id="tow" value="2" v-model="value">
<label for="tow"> Options 2</label>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
// data 
value: ''
},
methods: {}
})
</script>
</body>
 Copy code

When we click two radio buttons, the data changes , You can also change the view selection by modifying the data

Check box binding

Check boxes are divided into individual check boxes （ Often used to check user agreement ） And multiple check boxes

<body>
<div id="app">
<!-- Check box binding -->
<!-- situation 1: Only one check box （ for example ： Check the reading terms ） -->
<p> Only one check box , The data content is ：{{value1}}</p>
<input type="checkbox" id="onlyOne" value=" There is only one check box content " v-model="value1">
<label for="onlyOne"> Choose me </label>
<!-- situation 2: There are multiple check boxes -->
<p> Multiple check boxes , The data content is ：{{value2}}</p>
<input type="checkbox" id="one" value=" Content 1" v-model="value2">
<label for="one"> Choose me </label>
<input type="checkbox" id="tow" value=" Content 2" v-model="value2">
<label for="tow"> Choose me </label>
<input type="checkbox" id="three" value=" Content 3" v-model="value2">
<label for="three"> Choose me </label>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
// value1 Single option data 
value1: '',
// value Multiple options are arrays 
value2: []
},
methods: {}
})
</script>
</body>
 Copy code

matters needing attention ：

A single check box data is an empty string , Multiple check boxes need to be set to arrays
When there is only one check box , No matter what value What is it? , Check and cancel values are Boolean values , But the current value It also needs to be set
Multiple check boxes will turn the selected check box into value Value added to data In the array of data

Selection box binding

It is divided into two cases: single selection binding and multiple selection binding , Writing is also different

<body>
<div id="app">
<!-- Selection box binding -->
<!-- situation 1: Radio binding -->
<!-- p Tag binding data -->
<p> Radio binding , The data is ：{{value1}}</p>
<!-- selcet binding value1 -->
<select v-model="value1">
<!-- The first one is set to empty , Don't write data , Used to prompt the user -->
<option value=""> Please select </option>
<option value="1"> Options 1</option>
<option value="2"> Options 2</option>
<option value="3"> Options 3</option>
</select>
<!-- situation 2: Multiple choice binding -->
<p> Multiple choice binding , The data is ：{{value2}}</p>
<!-- Set up multiple Multiple choice is allowed -->
<select v-model="value2" multiple>
<option value="1"> Options 1</option>
<option value="2"> Options 2</option>
<option value="3"> Options 3</option>
</select>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
// value1 The radio 
value1: '',
// value Select multiple data as array 
value2: []
},
methods: {}
})
</script>
</body>
 Copy code

matters needing attention

Just like the check box , The radio data is an empty string , Multiple choice needs to be set to array
Radio data will put the selected option Of value Bind to data
Multiple selection data will be added to the array

summary

input Input box ： Binding string values
textarea Input box ： Binding string values
radio Radio button ： Binding string values
checkbox Check box ： Single binding Boolean , Multiple binding arrays
selrct Selection box ： Radio binding string , Multiple choice binding array

Modifier

An instruction suffix that starts with a dot , Used to set special operations for the current instruction , Depending on instructions

Event modifier

Official documents ：https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6

Just write it directly after the event , for example @click. Modifier

prevent Modifier
- Used to block default event behavior , amount to event.prevenDefault()
stop Modifier
- Stop the spread of events , amount to event.stopPropagation()
once Modifier
- Used to set that events can only be triggered once

<body>
<div id="app">
<!-- Event modifier -->
<!-- prevent Block default events , Here we can stop a Automatic jump operation of label , It can also be written directly as @click.prevent-->
<a href="http://www.baidu.com" @click.prevent="fn"> Jump </a>
<!-- stop Stop the spread of events -->
<div @click="console.log(' I'm the father ')" style="width: 100px;height: 100px;background: pink;">
<!-- add to stop Modifiers prevent events from bubbling -->
<button @click.stop="console.log(' I'm a son ')"> Button </button>
</div>
<!-- once Set events can only be executed once -->
<button @click.once="console.log(' You should only see me once ')">once Modifier </button>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {},
methods: {
fn() {
console.log(' Click on a The label ')
}
}
})
</script>
</body>
 Copy code

matters needing attention

If we just want to prevent default behavior , Then write directly prevent that will do , No event handler is written after that . for example @click.prevent Can be placed in a The default jump is blocked on the tag
Modifiers allow hyphenation , for example @click.prevent.stop=" Event program "

Key modifier

Official documents ：https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6

Key code ： Use the key code of the key as a modifier to indicate the operation mode of the key

General key modifiers

<body>
<div id="app">
<!-- Key （ code ） Modifier -->
<!-- Set only if the key code is 65 The buttons （a） The event will only be triggered when the event -->
<input type="text" @keyUp.65="fn">
<!-- If it's a letter key , You can use letters directly as modifiers -->
<input type="text" @keyUp.a="fn">
</div>
<script>
const vm = new Vue({
el: '#app',
data: {},
methods: {
fn() {
console.log(' Lift the button a 了 ')
}
}
})
</script>
</body>
 Copy code

Special keys

The keyboard is similar to esc、enter、delete、 Space 、 Up, down, left, right and so on , For better compatibility , Preferred built-in alias

<body>
<div id="app">
<!-- Special keys （ code ） Modifier , It is suggested to write alias directly , Please refer to official documents for details - Key modifier -->
<input type="text" @keyUp.esc="fn">
</div>
<script>
const vm = new Vue({
el: '#app',
data: {},
methods: {
fn() {
console.log(' The button is up ')
}
}
})
</script>
</body>
 Copy code

Be careful ： The key modifier can be linked , for example @keyUp.a.b.c="fn" Press down a/b/c Can trigger events

System modifier

Handle the modification of system keys , The system button refers to ctrl、alt、shift etc. , These buttons don't work when you click them alone , It must be used with other buttons

Official documents ：https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6

System modifiers can be used alone or in combination

<body>
<div id="app">
<!-- System modifier , This is a combination of .ctrl.q -->
<input type="text" v-model="value" @keyUp.ctrl.q="fn">
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
value: ''
},
methods: {
fn() {
this.value = ''
console.log(' I emptied the output box ')
}
}
})
</script>
</body>
 Copy code

Mouse button modifier

Set which button of the mouse triggers the click event

Common modifiers ：left left-click （ Default ）、right Right click 、middle In the key

<body>
<div id="app">
<!-- Mouse button modifier , Default no write means left click trigger , You can change the start button by adding modifiers -->
<button @click.right="fn"> Right click to trigger me </button>
<button @click.middle="fn"> Click the middle button to trigger me </button>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
value: ''
},
methods: {
fn() {
console.log(' Click. ')
}
}
})
</script>
</body>
 Copy code

v-model Modifier

trim Modifier

Automatic filtering to remove the user input at the beginning and end of the space , Generally used for input fields

lazy（ lazy ） Modifier

Is used to v-model The trigger mode changes from immediate to lost focus , This will save resources , Avoid unnecessary frequent data modification

number Modifier

Automatically convert user entered values to numeric types , If it can't be parseFloat() transformation , The original content is returned , It's very suitable for content that requires users to input numbers , There's no need for us to manually convert numbers

Part4 - module 1 - 03 - Vue event and form processing