一.事件处理器
1. stop
在事件处理中，使用 stop 可以阻止事件的进一步传播。当事件被触发后，调用 stop 方法可以停止事件的冒泡传播，从而防止其他父元素捕获该事件。
示例代码：
html
<button @click.stop=“handleClick”>点击按钮
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>
用了stop后，冒泡被阻止了
4. 按键修饰符
按键修饰符可以方便地处理特定按键触发的事件。通过在事件处理器后面添加 .key 后缀，指定特定的按键来触发相应的事件。
顺便提一嘴，vue允许为v-on在监听键盘事件时添加按键修饰符
全部的按键别名：
.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
示例代码：
html <input @keyup.enter=“handleEnterKey” placeholder=“按下回车键触发”>
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>
二.自定义组件
案例
自定义组件可以通过 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:'<button @click="clikeme">被{{m}}点击了{{n}}次 </button>', data:function(){ return { n:1 } }, methods:{ clikeme(){ this.n++; } } } }, data(){ return { msg:"11" } } }); </script> </body> </html>
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:'<button @click="clikeme">被{{m}}点击了</button>', 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>
