Vue event and form processing

Devil 2021-05-03 19:20:21
vue event form processing


Event handling v-on Instructions

  • Event binding for elements

The way of writing

  • Vue.js Also for v-on Instructions provide a way to abbreviate .
  • The event code is more a long time , Can be in methods Set function in , And set it as an event handler .
  • After setting the event handler , It can be downloaded from Parameter .
// vue.js Will be found automatically event Pass on 
fn(event){
console.log(event); // MouseEvent
this.content = ' This is the button 3 What to set up ';
}
 Copy code 
  • In the view, you can use the $event Access the event object
<button @click="fn2(200,$event)"> Button 4</button>
 Copy code 

v-on:click

  • Code demonstration
<button v-on:click="content=' New content '"> Button 1</button>
 Copy code 

@click=""( Shorthand way )

<button @click="content=' This is another thing '"> Button 2</button>
<!-- Separate data logic from view layer -->
<button @click="fn"> Button 3</button>
<button @click="fn2(200,$event)"> Button 4</button>
 Copy code 

Overall code demonstration

<body>
<div id="app">
<p>{{content}}</p>
<button v-on:click="content=' New content '"> Button 1</button>
<button @click="content=' This is another thing '"> Button 2</button>
<!-- Separate data logic from view layer -->
<button @click="fn"> Button 3</button>
<button @click="fn2(200,$event)"> Button 4</button>
</div>
<script src="lib/vue.js"></script>
<!-- v-on:click event -->
<script>
new Vue({
el:'#app',
data: {
content:' The original content '
},methods: {
// vue.js Will be found automatically event Pass on 
fn(event){
console.log(event); // MouseEvent
this.content = ' This is the button 3 What to set up ';
},
fn2(value,event){
console.log(value,event);
this.content = value;
}
}
});
</script>
</body>
 Copy code 

Form input binding v-model Instructions

adopt v-model Two way data binding for different form elements

Input box binding

  • For single line input boxes (input) and Multi-line input box (textarea) Two-way data binding
  • Code demonstration
<body>
<div id="app">
<p>input Content of input box :{{value1}}</p>
<input type="text" v-model="value1">
<p>textarea Content of input box :{{value2}}</p>
<textarea v-model="value2"></textarea>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data: {
value1:'',
value2:''
}
});
</script>
</body>
 Copy code 

Radio button binding

  • You can only choose one of multiple elements
<body>
<div id="app">
<p>{{value3}}</p>
<input type="radio" id="one" value="1" v-model="value3">
<label for="one"> Options 1</label>
<input type="radio" id="two" value="2" v-model="value3">
<label for="two"> Options 2</label>
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el:"#app",
data: {
value3: ''
}
});
</script>
</body>
 Copy code 

Check box binding

  • Elements : Check , It can be cancelled
  • When a single check box is bound , yes boolean value , No value
  • Multiple check box bound data , It needs to be stored in Array in , The value is the value of the current option value
<body>
<div id="app">
<p>{{value4}}</p>
<!-- Check box : Individual options -->
<input type="checkbox" id="item" value=" Select content " v-model="value4">
<label for="item"> Have read </label>
<!-- Check box : Multiple options -->
<p>{{value5}}</p>
<input type="checkbox" id="one" value=" Option one content " v-model="value5">
<label for="one"> Option one </label>
<input type="checkbox" id="two" value=" Option 2 content " v-model="value5">
<label for="two"> Option 2 </label>
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
value4: '',
value5:[]
}
});
</script>
</body>
 Copy code 

Selection box binding

  • Radio binding
  • Multiple choice binding
<body>
<div id="app">
<!-- The radio -->
<p>{{value6}}</p>
<select v-model="value6">
<option value=""> Please select </option>
<option value="1"> Options 1</option>
<option value="2"> Options 2</option>
<option value="3"> Options 3</option>
<option value="4"> Options 4</option>
</select>
<!-- multi-select -->
<p>{{value7}}</p>
<select v-model="value7" multiple>
<option value="1"> Options 1</option>
<option value="2"> Options 2</option>
<option value="3"> Options 3</option>
<option value="4"> Options 4</option>
</select>
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
value6: '',
value7:[]
}
});
</script>
</body>
 Copy code 

v-model Summary of instructions

  • input Input box : Binding character values value
  • textarea Input box : Binding character values value
  • radio: Binding string values value
  • checkbox: Single binding Boolean (checked), Multiple binding arrays (value)
  • select: Radio binding string , Multiple choice binding array (value\selected)
  • subject : Whatever form element ,v-model It's all about value attribute .(x)

Modifier

  • The modifier is with Let's start Instructions suffix , Used to set special operations for the current instruction .

Event modifier

.prevent Modifier

  • To prevent the default behavior of tags , amount to event.preventDefault()
  • Code demonstration
<body>
<div id="app">
<!-- Both writing methods can be -->
<a v-on:click.prevent href="https://www.ctrip.com/"> link </a>
<a @click.prevent href="https://www.ctrip.com/"> link </a>
</div>
<script>
// Be sure to write vue Instance bound app, Otherwise v-on:click There's no way to identify 
new Vue({
el: "#app",
data: {
},methods:{
}
});
</script>
</body>
 Copy code 
  • Remove the default behavior , Custom execution events
<body>
<div id="app">
<a v-on:click.prevent="fn" href="https://www.ctrip.com/"> link </a>
</div>
<script>
new Vue({
el: "#app",
data: {
},methods:{
fn(){
alert(' This is a a Click events for ');
}
}
});
</script>
</body>
 Copy code 

.stop Modifier

  • Actual case : After blocking default behavior , To stop the spread of the incident
  • Multiple modifiers concatenate , Realize multiple functions
<body>
<div id="app">
<!-- <a v-on:click.prevent href="https://www.ctrip.com/"> link </a>
<a v-on:click.prevent="fn" href="https://www.ctrip.com/"> link </a> -->
<div @click="fn1">
<!-- Use .stop, Stop the spread of events -->
<!-- <button @click.stop="fn"> Button </button> -->
<!-- Use multiple modifiers together -->
<a @click.prevent.stop="fn" href="https://www.ctrip.com/"> link </a>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
},methods:{
// fn(){
// alert(' This is a a Click events for ');
// }
fn(){
console.log(" Button Click events for ");
},
fn1(){
console.log("div Click events for ");
}
}
});
</script>
</body>
 Copy code 

.once Modifier

  • Setting events only triggers once

summary

  • You can go to Vue Learn more modifiers on the official website

Key modifier

  • Key codes refer to : Use the key code of the key as a modifier to identify the operation of the key .
  • Whether you're using numeric buttons or alphabetic buttons , Both can pass keycode To operate
  • review
    • complete key press The process is divided into two parts , Key pressed , Then the key is released and reset .
    • When the button is Release when , happen keyup event . It happens on the element that currently gets the focus
    • When the button is Press down when , happen keydown event .keydown() Methods the trigger keydown event , Or stipulate when keydown Function to run at event time .

Number buttons ( Content button )

<!-- Numbers 1 Key : Additional keycode -->
<input type="text" @keyup.49="fn">
 Copy code 

Letters, buttons ( Content button )

  • keycode
<!-- Letter a Key : Additional keycode -->
<input type="text" @keyup.65="fn">
 Copy code 
  • The letter itself ( More concise 、 intuitive )
<!-- Letter a Key : Additional keycode -->
<input type="text" @keyup.f="fn">
 Copy code 
  • Call continuously
<!-- Management and use , meaning : Click on f or a or c When , Event triggered -->
<input type="text" @keyup.f.a.c="fn">
 Copy code 

Special keys ( Function buttons )

  • Special buttons refer to : The keyboard is similar to esc、enter、delete And so on
  • For better compatibility ( In some browsers, the corresponding keycode Different ), Built in aliases should be preferred .
    • There are some buttons (.esc And all the directional keys ) stay IE9 There are different key value , If you want to support IE9, Alias preference .
<!-- Other buttons :.enter .tab .delete .esc .space .up .down .left .right -->
<input type="text" @keyup.left="fn">
 Copy code 

System modifier

  • refer to :ctrl、alt、shift Wait for the button .
  • Unlike content buttons ( Number buttons 、 Letters, buttons ), Just press once , It will take effect . System button click alone is invalid .
  • System buttons Usually used in combination with other buttons ( Press at the same time ).
  • Use key combinations to perform specific events
<body>
<div id="app">
<!-- System buttons : According to a specific combination , Perform specific events -->
<input type="text" @keyup.alt.c="fn" v-model="testValue">
</div>
<script>
new Vue({
el:'#app',
data: {
testValue:''
},methods: {
fn(event){
// console.log(event);
this.testValue = '';
}
}
});
</script>
</body>
 Copy code 

.ctrl Modifier

<!-- System buttons : Single click doesn't work , It needs to be used in combination with other buttons -->
<input type="text" @keyup.ctrl="fn">
 Copy code 

.alt Modifier

<!-- System buttons : Single click doesn't work , It needs to be used in combination with other buttons -->
<input type="text" @keyup.alt="fn">
 Copy code 

.shift Modifier

  • ditto

Mouse modifier

  • Used for setting up Click event By which mouse button to complete

.left Modifier

<!-- Mouse modifier -->
<button @click.left="fn"> Button </button>
 Copy code 

.right Modifier

<!-- Mouse modifier -->
<button @click.right="fn"> Button </button>
 Copy code 

.middle Modifier

<!-- Mouse modifier -->
<button @click.middle="fn"> Button </button>
 Copy code 

v-model Modifier

.trim Modifier

<body>
<div id="app">
<!-- trim see elements It's found that the leading and trailing spaces have been removed -->
<input type="text" v-model.trim="value">
<p>{{value}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
value: ''
},
methods: {
}
});
</script>
</body>
 Copy code 

.lazy Modifier

  • You can change v-model The trigger time of bidirectional data binding
    • from input Change the trigger form to change Trigger form
  • After losing focus , The new content is not the same as the original one , Then update to data
<body>
<div id="app">
<!-- After losing focus , The existing content is different from the original content , To update -->
<input type="text" v-model.lazy="value">
<p>{{value}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
value: ''
},
methods: {
}
});
</script>
</body>
 Copy code 

.number Modifier

  • Numeric modifiers for automatic data conversion
    • Convertible , Update data to data
    • Not convertible NAN, Give the original data to the data
  • Apply to : Pure value
  • Conversion mode :parseFloat
  • give an example :
    • Enter... In the text box 123,value="123", After the transformation :123
    • Enter... In the text box 123abc,value="123", After the transformation :123
    • Enter... In the text box abc,value="abc", Unable to convert , Keep the original value :abc
<body>
<div id="app">
<!-- Don't add .number when ,value In string form ; Add and convert to digital form -->
<input type="text" v-model.number="value">
<p>{{value}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
value: ''
},
methods: {
}
});
</script>
</body>
 Copy code 

summary

  • trim Modifier
    • It is used to automatically filter the spaces at the beginning and end of user input .
  • lazy Modifier
    • Is used to v-model The trigger mode of is controlled by input Event trigger changed to change Events trigger .
  • number Modifier
    • Used to automatically convert a user entered value to a numeric type , If it cannot be parseFloat() transformation , The original content is returned .
版权声明
本文为[Devil]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/05/20210503191543336M.html

  1. Analysis of MVC
  2. [middle stage] please stay and join me in the backstage
  3. Understanding front end garbage collection
  4. [continuous update] front end special style implementation
  5. Flutter product analysis and package reduction scheme
  6. XPath positioning
  7. 前端开发css中的flex布局的使用
  8. The use of flex layout in front end development CSS
  9. JQuery核心函数和静态方法
  10. JQuery core functions and static methods
  11. Node family - understanding of blocking and non blocking
  12. 热点微前端Microfrontend的讨论:谷歌AdWords是真实的微前端
  13. Vue source code analysis (2) initproxy initialization proxy
  14. What's TM called react diff
  15. Summary of common front end data structure
  16. Useeffect in hooks
  17. [encapsulation 02 design pattern] Command pattern, share meta pattern, combination pattern, proxy pattern, strategy pattern
  18. Front end notes: virtual Dom and diff of vue2. X
  19. The best code scanning plug-in of flutter
  20. The simplest plug-in for rights management of flutter
  21. 21. Object oriented foundation "problems and solutions of object traversal"
  22. Discussion on hot micro front end: Google AdWords is a real micro front end
  23. Usecallback and usememo for real performance optimization
  24. 【前端圭臬】十一:从规范看 JavaScript 执行上下文(下)
  25. [front end standard] 11: Javascript execution context from the perspective of specification (2)
  26. Hexagonal六角形架构ReactJS的实现方式 - Janos Pasztor
  27. Transaction of spring's reactive / imperative relational database
  28. The implementation of hexagonal hexagonal reactjs Janos pasztor
  29. HTTP状态码:402 Payment Required需要付款 - mozilla
  30. HTTP status code: 402 payment required - Mozilla
  31. Factory mode, constructor mode and prototype mode
  32. Build the scaffold of react project from scratch (Series 1: encapsulating a request method with cache function based on Axios)
  33. Cocos Quick Start Guide
  34. Comparison of three default configurations of webpack5 modes
  35. A case study of the combination of flutter WebView and Vue
  36. CSS: BFC and IFC
  37. A common error report and solution in Vue combat
  38. JS: this point
  39. JS: prototype chain
  40. JavaScript series -- promise, generator, async and await
  41. JS: event flow
  42. Front end performance optimization: rearrangement and redrawing
  43. JS - deep and shallow copy
  44. JavaScript异步编程3——Promise的链式使用
  45. JavaScript asynchronous programming 3 -- chain use of promise
  46. Vue.js组件的使用
  47. The use of vue.js component
  48. How to judge whether a linked list has links
  49. Element UI custom theme configuration
  50. Text image parallax effect HTML + CSS + JS
  51. Spring的nohttp宣言:消灭http://
  52. Vue3 intermediate guide - composition API
  53. Analysis of URL
  54. These 10 widgets that every developer must know
  55. Spring's nohttp Manifesto: eliminate http://
  56. Learn more about JS prototypes
  57. Refer to await to JS to write an await error handling
  58. A short article will directly let you understand what the event loop mechanism is
  59. Vue3 uses mitt for component communication
  60. Characteristics and thinking of ES6 symbol