-
【Vue】修饰符&表单提交方式&自定义组件
一.事件处理器
1. stop
在事件处理中，使用 stop 可以阻止事件的进一步传播。当事件被触发后，调用 stop 方法可以停止事件的冒泡传播，从而防止其他父元素捕获该事件。
示例代码：
html
2. prevent
使用 prevent 可以阻止事件的默认行为。当事件被触发后，调用 event.preventDefault() 方法可以取消事件的默认行为，比如阻止表单的提交或者链接的跳转。
示例代码：
html
示例代码：
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script> <style type="text/css"> .f30{ font-size: 30px; } .one{ background-color: red; height: 400px; width: 400px; } .two{ background-color: blue; height: 300px; width: 300px; } .three{ background-color: pink; height: 200px; width: 200px; } .four{ background-color: yellow; height: 100px; width: 100px; } style> head> <body> <div id="app"> <div class="one" @click="f1"> <div class="two" @click.stop="f2"> <div class="three" @click.stop="f3"> <div class="four" @click.stop="f4">div> div> div> div> <input :value="msg"> <button @click.once="clickme">点我button> div> <script type="text/javascript"> new Vue ({ el:'#app', data(){ return { msg:'hello', }; }, methods:{ f1(){ alert("f1"); }, f2(){ alert("f2"); }, f3(){ alert("f3"); }, f4(){ alert("f4"); }, clickme(){ console.log(this.msg) } } }); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
用了stop后，冒泡被阻止了
4. 按键修饰符
按键修饰符可以方便地处理特定按键触发的事件。通过在事件处理器后面添加 .key 后缀，指定特定的按键来触发相应的事件。
顺便提一嘴，vue允许为v-on在监听键盘事件时添加按键修饰符
全部的按键别名：
.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
示例代码：
html
5. 表单案例
绑定值与取值
示例代码：
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script> <style type="text/css"> .f30{ font-size: 30px; } style> head> <body> <div id="app"> 姓名<input name="name" v-model="name"/> <br> 密码<input type="password" v-model="pwd"> <br> 性别<span v-for="s in sexlist"> <input type="radio" name="sex" v-model="sex" :value="s.id"/> {{s.name}} span> <br> 籍贯：<select name="myaddr" v-model="myaddr"> <option v-for="a in address" :value="a.id">{{a.name}}option> select> <br> 爱好<span v-for="h in hobby" > <input type="checkbox" v-model="mylike" name="mylike" :value="h.id"> {{h.name}} span> <br> 个人简介：<textarea v-model="sign" cols="10" rows="5">textarea> <br> 同意：<input type="checkbox" v-model="ok"/> <br> <button v-show="ok" @click="dosub">提交button> div> <script type="text/javascript"> new Vue ({ el:'#app', data(){ return { name:'小猪', pwd:'123456', sexlist:[{ name:'男',id:1, }, { name:'女',id:2, }, { name:'保密',id:0, }], sex:1, hobby:[{name:'洗浴',id:1}, {name:'洗头',id:2}, {name:'大保健',id:3}], mylike:[], address:[{name:'湖南',id:1}, {name:'湖北',id:2}, {name:'福建',id:3}], myaddr:null, sign:null, ok:false }; }, methods:{ dosub(){ var obj={}; obj.name=this.name; obj.pwd=this.pwd; obj.sex=this.sex; obj.address=this.myaddr; obj.hobby=this.mylike; obj.sign=this.sign; console.log(obj); } } }); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
二.自定义组件
案例
自定义组件可以通过 Vue 的组件系统来进行封装和复用。下面是一个简单的自定义组件案例，实现了一个计数器。上述代码定义了一个名为 Counter 的自定义组件，在模板中包含三个元素：两个按钮和一个用于显示计数值的 元素。通过绑定按钮的点击事件来实现计数器的增减功能，计数值保存在组件的 count 数据中。
三.组件通信
1.父传子
父组件可以通过 props 将数据传递给子组件。子组件通过定义 props 来接收来自父组件的数据。
示例代码：
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script> <style type="text/css"> .f30{ font-size: 30px; } style> head> <body> <div id="app"> {{msg}} <my-button>my-button> <br> <my-button m='ks'n="10">my-button> div> <script type="text/javascript"> new Vue ({ el:'#app', components:{ 'my-button':{ props:['m','n'], template:'', data:function(){ return { n:1 } }, methods:{ clikeme(){ this.n++; } } } }, data(){ return { msg:"11" } } }); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定
`
2.子传父
示例代码：
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script> <style type="text/css"> .f30{ font-size: 30px; } style> head> <body> <div id="app"> {{msg}} <my-button>my-button> <br> <my-button m='ks' @xxx='getParam'>my-button> div> <script type="text/javascript"> new Vue ({ el:'#app', components:{ 'my-button':{ props:['m'], template:'', data:function(){ return { n:1 } }, methods:{ clikeme(){ let name='刘兵'; let bname='看见你的是'; let price='白嫖'; this.$emit('xxx',name,bname,price) } } } }, data(){ return { msg:"11" }; }, methods:{ getParam(a,b,c){ console.log(a,b,c); } } }); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
-
相关阅读:
【Liunx系统编程】命令模式3
windows cmd命令安装
Inception V3 闭眼检测
关于工作方法和高效工作的建议
数字图像处理实验目录
内置模板市场，DataEase开源数据可视化分析平台v1.13.0发布
Redis缓存
内网渗透知识 ——（一）、工作组、域、域控、活动目录
魔百盒九联UNT402A_S905L3_线刷固件包_语音蓝牙正常
vim 从嫌弃到依赖(22)——自动补全
- 原文地址：https://blog.csdn.net/m0_74018330/article/details/133072430
