景点网站应该怎么做,手机免费网站建设哪家公司好,转运网站开发,赢展网站建设目录
一.事件处理
二.表单的综合案例
三.组件通信⭐⭐ 3.1 自定义组件 3.2 组件通信之父传子
3.3组件通信之子传父 一.事件处理 Vue通过由点(.)表示的指令后缀来调用修饰符#xff0c; .stop .prevent .capture .self .once 如下#xff1a; 阻止单击事件冒泡 a v-on…目录
一.事件处理
二.表单的综合案例
三.组件通信⭐⭐ 3.1 自定义组件 3.2 组件通信之父传子
3.3组件通信之子传父 一.事件处理 Vue通过由点(.)表示的指令后缀来调用修饰符 .stop .prevent .capture .self .once 如下 阻止单击事件冒泡 a v-on:click.stopdoThis/a 提交事件不再重载页面 form v-on:submit.preventonSubmit/form 修饰符可以串联 a v-on:click.stop.preventdoThat/a 只有修饰符 form v-on:submit.prevent/form 添加事件侦听器时使用事件捕获模式 div v-on:click.capturedoThis.../div 只当事件在该元素本身而不是子元素触发时触发回调 div v-on:click.selfdoThat.../div click 事件只能点击一次 a v-on:click.oncedoThis/a 来看一下单击冒泡事件 创建四个容器 !-- 定义边界 --div idcontectdiv classone clickfun1div classtwo clickfun2div classthree clickfun3div classfour clickfun4/div/div/div/div/div
给它们添加不同的颜色和大小
style typetext/css.one{background-color: lightpink;height: 400px;width: 400px;}.two{background-color: cyan;height: 300px;width: 300px;}.three{background-color: fuchsia;height: 200px;width: 200px;}.four{background-color: lime;height: 100px;width: 100px;}/style
最后写方法点击事件
script typetext/javascriptnew Vue({el:#contect,data(){return{};},methods:{fun1(){alert(fun1)},fun2(){alert(fun2)},fun3(){alert(fun3)},fun4(){alert(fun4)}}})/script
效果 这就冒泡事件如果要阻止就要通过.stop来实现 效果 其他的也是一样的大家可以试一试
二.表单的综合案例 首先先造一些数据
script typetext/javascriptnew Vue({el:#contect,data(){return{name:海绵宝宝,pwd:123123,sexList:[{name:公,id:1},{name:母,id:2},{name:未知,id:3}],sex:1,hobby:[{name:吹泡泡,id:1},{name:抓水母,id:2},{name:做蟹堡,id:3}],myHobby:[],address:[{name:太平洋,id:1},{name:大西洋,id:2},{name:北冰洋,id:3},{name:印度洋,id:4}],myAddr:null,sign:null,ok:false};}})/script
接着搭建界面;
!-- 定义边界 --div idcontect姓名input namename v-modelname/br /密码input typepassword v-modelpwd/br /性别span v-fors in sexListinput typeradio namesex v-modelsex :values.id/{{s.name}}/spanbr /地址select namemyAddr v-modelmyAddr option v-fora in address :valuea.id{{a.name}}/option/selectbr /爱好span v-forh in hobby input typecheckbox v-modelmyHobby namemyHobby:valueh.id/{{h.name}}/spanbr /个人简介textarea v-modelsign cols18 rows4/textarea br /同意input typecheckbox v-modelok/br /button v-showok clicksubmit() 提交/button/div 搭建好之后就来写方法 保存json格式数据
methods:{submit(){var obj{};obj.namethis.name;obj.pwdthis.pwd;obj.sexthis.sex;obj.addressthis.myAddr;obj.hobbythis.myHobby;obj.signthis.sign;console.info(obj);}}
最后打印看结果 三.组件通信⭐⭐ 3.1 自定义组件 原本是没有my-button这个按钮属性
div idcontectp自定义组件/pmy-button我的按钮/my-button/div 写方法实现
script typetext/javascriptnew Vue({el:#contect,components:{my-button:{template:button{{我的按钮}}/button}},})/script 3.2 组件通信之父传子
--父组件向子组件传递数据props和子组件向父组件传递数据事件。
在父组件中可以通过在子组件标签上使用属性来传递数据。子组件可以通过在组件定义的选项中声明 props 来接收父组件传递的数据。
加了一个属性me
!-- 定义边界 --div idcontectp组件通信父传子/pmy-button me潇洒姿/my-button/div
script typetext/javascriptnew Vue({el:#contect,components:{my-button:{props:[me],template:button{{me}}/button}}})/script 3.3组件通信之子传父 在子组件中可以通过触发自定义事件来将数据传递给父组件。父组件可以通过在子组件标签上监听对应的事件来接收子组件传递的数据。
div idcontectp组件通信子传父/pmy-button me潇洒姿 xxxgetParam/my-button/div
script typetext/javascriptnew Vue({el:#contect,components:{my-button:{props:[me],template:button clickclickMe{{me}}/button,methods:{clickMe(){let name张三;let bname我的高中暗恋故事;let price无价;this.$emit(xxx,name,bname,price)}}}},methods:{getParam(a,b,c){console.info(a,b,c);}}})/script
效果 今天的分享就到这啦
