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

Big stone 2021-02-23 16:12:09
part4 module vue event form


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 e v e n t ( Fixed writing ), for example @ c l i c k = " f n ( The ginseng , 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

版权声明
本文为[Big stone]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/02/20210223155148644E.html

  1. RxHttp - 轻量级、可扩展、易使用、完美兼容MVVM、MVC架构的网络封装类库
  2. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  3. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  4. 前端面试常考题:JS垃圾回收机制
  5. Frequently asked questions in front end interview: JS garbage collection mechanism
  6. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  7. Java之HTTP网络编程(一):TCP/SSL网页下载
  8. HTTP network programming in Java (1): TCP / SSL web page download
  9. Java之HTTP网络编程(一):TCP/SSL网页下载
  10. HTTP network programming in Java (1): TCP / SSL web page download
  11. 使用vite搭建vue项目
  12. 在组件中展示pdf文件:vue-pdf (由于未找到方法滑动加载下一页,只能点击加载下一页pdf文件)
  13. 在 vue 中通过 express 连接数据库
  14. Using vite to build Vue project
  15. Display PDF file in component: Vue pdf
  16. Connecting database through express in Vue
  17. 2021届秋招哈啰出行前端面经(一面)
  18. vue使用sdk进行七牛云上传
  19. Javascript性能优化【内联缓存】 V8引擎特性
  20. Small true wireless smart headset evaluation: put intelligence into the ear
  21. The front end experience of the 2021 autumn recruitment
  22. Vue uses SDK to upload Qi Niu cloud
  23. 深入理解 Web 协议 (三):HTTP 2
  24. dhtmlxGantt如何重新排序任务
  25. JavaScript performance optimization [inline cache] V8 engine features
  26. 深入理解 Web 协议 (三):HTTP 2
  27. Deep understanding of Web protocol (3): http 2
  28. 深入理解 Web 协议 (三):HTTP 2
  29. How dhtmlxgantt reorders tasks
  30. 深入理解 Web 协议 (三):HTTP 2
  31. JavaScriptBOM操作
  32. JavaScriptBOM操作
  33. Deep understanding of Web protocol (3): http 2
  34. Deep understanding of Web protocol (3): http 2
  35. dhtmlxGantt甘特图重新排序任视频教程
  36. vue实现七牛云上传图片功能
  37. vue.js环境配置步骤及npm run dev报错解决方案
  38. Deep understanding of Web protocol (3): http 2
  39. JavaScript BOM operation
  40. JavaScript BOM operation
  41. Dhtmlxgantt reordering video tutorial
  42. Vue to achieve seven cattle cloud upload image function
  43. vue.js Environment configuration steps and NPM run dev error reporting solution
  44. 什么是HTTPS以及如何实施HTTPS?
  45. vue使用sdk进行七牛上传
  46. JavaScript 邮箱验证 - 正则验证
  47. Codeless development platform cloud watch sets off a "new revolution" in enterprise Digitalization
  48. Codeless development of cloud watch for enterprise digital solution
  49. What is HTTPS and how to implement it?
  50. Vue uses SDK to upload seven cows
  51. JavaScript mailbox verification - regular verification
  52. JavaScriptBOM操作
  53. JavaScript BOM operation
  54. How to create a new NPM package and publish it to the NPM community
  55. vue --tinymce 解决上传图片的方法
  56. Vue development
  57. A simple solution for vite to batch introduce SVG symbol
  58. Building 3D rendering engine from scratch with JS (2)
  59. Vue -- tinymece solution to upload pictures
  60. Common configuration of nginx