Vue中的事件
使用v-on:xxx 或 @xxx绑定事件 其中xxx是事件名
·
一、 事件的基本使用
1.使用v-on:xxx 或 @xxx绑定事件 其中xxx是事件名
2.事件的回调需要配置在methods对象中 最终会在VM上
3.methods中配置的函数,不需要箭头函数 否则this就不是VM了
4.methods中配置的函数 都是被vue所管理的函数 this的指向是VM 或组件实例对象
5.@click="demo" 和 @click="demo($even,number)"效果是一样的 但是后者可以传参
二、 vue中的事件修饰符
1.prevent:阻止默认事件
2.stop:阻止事件冒泡
3.once:事件只触发一次
4.capture:使用事件的捕获模式
5.self:只有event.target是当前操作的元素时才触发事件
6.passive:事件的默认行为立即执行 无需等待事件回调执行完毕
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<!-- prevent:阻止默认事件 -->
<!-- 阻止链接跳转 -->
<a href="https://www.bilibili.com/video/BV1Zy4y1K7SH?p=15" @click.prevent="showInfo">点我提示信息</a>
<!-- stop:阻止事件冒泡 -->
<div @click="showInfo" class="demo1">
<button @click.stop="showInfo">点我提示信息</button>
<!--修饰符可以连续写 即阻止冒泡 又阻止跳转 -->
<a href="https://www.bilibili.com/video/BV1Zy4y1K7SH?p=15" @click.stop.prevent="showInfo">点我提示信息</a>
</div>
<!-- once:事件只触发一次 -->
<button @click.once="showInfo">点我提示信息</button>
<!-- capture:使用事件的捕获模式 -->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
<!-- self:只有event.target是当前操作的元素时才触发事件 -->
<div @click.self="showInfo" class="demo1">
<button @click="showInfo">点我提示信息</button>
</div>
<!-- passive:事件的默认行为立即执行 无需等待事件回调执行完毕 -->
<!-- @scroll="demo" 滚动条的滚动 @wheel="demo"鼠标滚轮的滚动-->
<ul class="list" @wheel.passive="demo">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
三、vue中常用的按键别名
回车 enter
删除 delete
退出 esc
空格 space
换行 tab(特殊 必须配合keydown使用)
上 up
下 down
左 left
右 right
1.vue中未提供别名的按键 可以使用按键原始的key值去绑定 但注意要转为kebab-case(短横线命名)
2.系统修饰键(用法特殊) ctrl alt shift meta
配合keyup使用:按下修饰键(win)的同时,再按下其他键 随后释放其他键 事件才被触发
配合keydown使用:正常触发
也可以使用keyCode去指定具体的按键(不推荐)
Vue.config.keyCode.自定义键名 = 键码 可以去定制键码
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<input type="text" name="" id="" placeholder="按下回车提示输入" @keyup.enter="showInfo">
</div>
更多推荐
已为社区贡献3条内容
所有评论(0)