嗨!~ 大家好,我是YK菌 🐷 ,一个微系前端 ✨,爱思考,爱总结,爱记录,爱分享 🏹,欢迎关注我呀 😘 ~ [微信号:
yk2012yk2012
,微信公众号:ykyk2012
]
「这是我参与11月更文挑战的第20天,活动详情查看:2021最后一次更文挑战 (opens new window)」
今天我们主要来学习Vue中的事件处理,给按钮绑定各种事件并调用。
# 1. 绑定监听
事件的基本使用:
- 使用
v-on:xxx
或@xxx
绑定事件,其中xxx
是事件名; - 事件的回调需要配置在
methods
对象中,最终会在vm
上; methods
中配置的函数,不要用箭头函数!否则this
就不是vm
了;methods
中配置的函数,都是被Vue
所管理的函数,this
的指向是vm
或 组件实例对象;@click="demo"
和@click="demo($event)"
效果一致,但后者可以传参;
v-on:xxx="fun"
@xxx="fun"
@xxx="fun(参数)"
事件对象 默认事件形参:
event
隐含属性对象:$event
$event
就是当前触发事件的元素,即使不传$event
,在回调函数中也可以使用event
这个参数。
<body>
<div id="demo">
<h1>1. 绑定监听</h1>
<button @click="test1">test1</button>
<button @click="test2('abc')">test2</button>
<button @click="test3">test3</button>
<button @click="test4(123, $event)">test4</button>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>
new Vue({
el: "#demo",
data: {},
methods: {
test1() {
alert("hahah");
},
test2(msg) {
alert(msg);
},
test3(event) {
alert(event.target.innerHTML);
},
test4(number, event) {
alert(number + '---' + event.target.innerHTML);
}
}
})
</script>
</body>
# 2. 事件修饰符
prevent
:阻止默认事件(常用);event.preventDefault()
stop
:阻止事件冒泡(常用);event.stopPropagation()
once
:事件只触发一次(常用);capture
:使用事件的捕获模式;self
:只有event.target
是当前操作的元素时才触发事件;passive
:事件的默认行为立即执行,无需等待事件回调执行完毕;
<!-- 阻止事件冒泡 -->
<div id="big" @click="test">
<div id="small" @click.stop="test2"></div>
</div>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
# 3. 按键修饰符
Vue中常用的按键别名:
回车 => enter 删除 => delete (捕获“删除”和“退格”键) 退出 => esc 空格 => space 换行 => tab (特殊,必须配合keydown去使用) 上 => up 下 => down 左 => left 右 => right
Vue
未提供别名的按键,可以使用按键原始的key
值去绑定,但注意要转为kebab-case
(短横线命名)系统修饰键(用法特殊):
ctrl
、alt
、shift
、meta
- (1). 配合
keyup
使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。 - (2). 配合
keydown
使用:正常触发事件。
也可以使用
keyCode
去指定具体的按键(不推荐)Vue.config.keyCodes.自定义键名 = 键码
,可以去定制按键别名
<!-- 任何按键按下都会触发回调函数 -->
<textarea @keyup="testKeyup"></textarea>
<!-- 下面的两种写法效果是一致的 -->
<!-- 使用按键码,回车键的keyCode是13 -->
<textarea @keyup.13="testKeyup"></textarea>
<!-- 使用按键修饰符,因为回车键比较常用,所以vue为他设置了名称,可以直接使用enter来代替 -->
<textarea @keyup.enter="testKeyup"></textarea>
<body>
<div id="demo">
<h1>3. 按键修饰符</h1>
<input type="text" @keyup.13="test8">
<input type="text" @keyup.enter="test8">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>
new Vue({
el: "#demo",
data: {},
methods: {
test8(event) {
// if(event.keyCode===13){ // 原来的做法
// alert(event.target.value);
// }
alert(event.target.value);
}
}
})
</script>
</body>
最后,欢迎关注我的专栏,和YK菌做好朋友