- 事件处理器
- 表单的综合案例
- 组件通信
1.事件处理器
实现功能：原来每点击一下最里面颜色外层，有几层会弹出几下，加上@click.stop后不管第几层只会弹一下；原本点击几下"点我"后台就会显示点了几下，加上@click.once后不管点击几下，后台只显示一次
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <title>事件处理</title> <style type="text/css"> .one{ background-color: red; height: 400px; width: 400px; } .two{ background-color: blue; height: 300px; width: 300px; } .three{ background-color: yellow; height: 200px; width: 200px; } .four{ background-color: pink; height: 100px; width: 100px; } </style> </head> <body> <div id="app"> <div class="one" @click.stop="fun1"> <div class="two" @click.stop="fun2"> <div class="three" @click.stop="fun3"> <div class="four" @click.stop="fun4"></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:{ fun1(){ alert("fun1"); }, fun2(){ alert("fun2"); }, fun3(){ alert("fun3"); }, fun4(){ alert("fun4") }, clickMe(){ console.log(this.msg) } } }); </script> </body> </html>
2.表单的综合案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <title>表单综合案例</title> </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 adress" :value="a.id">{{a.name}}</option> </select><br> 爱好：<div v-for="h in hobby" > <input type="checkbox" name="myLike" v-model="myLike" :value="h.id"/>{{h.name}} </div> <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:3 }], sex:1, hobby:[{ name:'保健',id:1 },{ name:'理发',id:2 },{ name:'洗头',id:3 },{ name:'养生',id:4 }], myLike:[], adress:[{ name:'湖南',id:1 },{ name:'陕西',id:2 },{ name:'江西',id:3 },{ name:'哈尔滨',id:4 }], myAddr:null, sign:null, ok:false }; }, methods:{ dosub(){ var obj={}; obj.name=this.name; obj.pwd=this.pwd; obj.sex=this.sex; obj.adress=this.adress; obj.love=this.myLove; obj.sign=this.sign; console.log(obj); } } }); </script> </body> </html>
3.组件通信
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <title>组件传参父传子</title> </head> <body> <div id="app"> <p>自定义组件</p> <my-button>xx</my-button> <p>组件通信父传子</p> <my-button ma='ss'></my-button> <p>组件通信父传子2</p> <my-button ma='ss' n="10"></my-button> </div> <script type="text/javascript"> new Vue({ el:'#app', components:{ 'my-button':{ props:['ma'], template:'<button @click="clickMe">被{{ma}}点击了{{n}}次</button>', data:function(){ return{ n:1 } }, methods:{ clickMe(){ this.n++; } } }, }, data(){ return{ msg:'hello 小兵' }; }, }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <title>组件传参子传父</title> </head> <body> <div id="app"> <p>组件通信子传父</p> <my-button ma='ss' @xxx="getParam"></my-button> </div> <script type="text/javascript"> new Vue({ el:'#app', components:{ 'my-button':{ props:['ma'], template:'<button @click="clickMe">被{{ma}}点击了</button>', data:function(){ return{ n:1 } }, methods:{ clickMe(){ let name='溜冰'; let bname='芊芊来了'; let price='免费'; this.$emit('xxx',name,bname,price) } } }, }, data(){ return{ msg:'hello 小兵', } }, methods:{ getParam(a,b,c){ console.log(a,b,c); } } }); </script> </body> </html>
