- 事件处理器
- 表单的综合案例
- 组件通信
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>
