中国摄影在线网站,网站的总体方案,网络营销工具和方法,注册公司流程和资料个人名片#xff1a; #x1f60a;作者简介#xff1a;一名大二在校生 #x1f921; 个人主页#xff1a;坠入暮云间x #x1f43c;座右铭#xff1a;懒惰受到的惩罚不仅仅是自己的失败#xff0c;还有别人的成功。 #x1f385;**学习目标: 坚持每一次的学习打卡 文章… 个人名片 作者简介一名大二在校生 个人主页坠入暮云间x 座右铭懒惰受到的惩罚不仅仅是自己的失败还有别人的成功。 **学习目标: 坚持每一次的学习打卡 文章目录 前言侦听事件1.事件的基本使用2.v-on 事件修饰符关键修饰符 前言 在vue的学习过程中我们常会用到事件处理比如在表单提交按钮中列表多级菜单折叠等都是需要监听点击事件才可以实现。之前学习js中也常用到各种事件在vue中我们将事件处理可以通过事件来控制数据帮助我们更好的实现 侦听事件
1.事件的基本使用
使用 v-on:xxx 或 xxx 绑定事件其中xxx是事件名事件的回调需要配置在methods对象中最终会在vm上methods中配置的函数不要用箭头函数否则this就不是vm了methods中配置的函数都是被Vue所管理的函数this的指向是vm 或 组件实例对象clickdemo 和 clickdemo($event) 效果一致但后者可以传参
2.v-on
语法button v-on:需要响应的事件名处理事件的函数名/button 缩写 注意处理时间的函数名必须写在methods中要让当前组件实例可访问 代码演示 div idapph2点击数{{counter}}/h2h2/h2button clickincrement/buttonbutton clickdecrement-/button/divscript/*v-on指令作用绑定事件监听器缩写 语法 Function|Inline Statement|Object参数 event*/const app new Vue({el:#app,data:{counter:0},methods:{increment(){this.counter},decrement(){this.counter--}}})/script事件修饰符
语法button v-on:事件名.事件修饰符处理函数/button
prevent阻止默认事件常用event.preventDefault()stop阻止事件冒泡常用event.stopPropagation()once事件只触发一次常用capture使用事件的捕获模式self只有event.target是当前操作的元素时才触发事件passive事件的默认行为立即执行无需等待事件回调执行完毕
修饰符也可以同时使用多个
button v-on:事件名.事件修饰符1.事件修饰符2.事件修饰符3处理函数/button代码示例 div idapp!-- .stop 修饰符 阻止事件冒泡 --div clickdivClickbutton click.stopbtnClick按钮/button/div!-- .prevent修饰符使用 提交时间不在重载页面 --form actionbaiduinput typesubmit value提交 click.preventsubmitClickbutton click.preventsubmitClick按钮1/button/form!-- 监听某个键盘的键帽点击 --input typetext keyup.enterkeyup!-- once 只触发一次使用 --button click.oncebtn2Click按钮2/button/divscriptconst app new Vue({el:#app,data:{message:你好啊},methods:{btnClick(){alert(btnClick);},divClick(){alert(divClick)},submitClick(){alert(submitClick)},keyup(){alert(keyup)},btn2Click(){alert(btn2Click)}}})/script关键修饰符
回车 enter删除 delete (捕获“删除”和“退格”键)退出 esc空格 space换行 tab (特殊必须配合keydown去使用)上 up下 down左 left右 right
