categories:
- vue基础
tags: - 事件修饰符
- 按键修饰符
事件修饰符
实际上，使用 v-on 有几个好处：
- 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
- 因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
- 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-on事件修饰符</title>
<style>
</style>
</head>
<body>
<div id="app">
<div>阻止单击事件继续传播</div>
<!-- 阻止单击事件继续传播 -->
<input type="text" v-on:click.stop="handlerClick">
<hr>
<div>提交事件不再重载页面</div>
<!-- 提交事件不再重载页面 -->
<button type="submit" v-on:click.prevent="handlerPrevent">点击提交</button>
<hr>
<div>修饰符可以串联</div>
<!-- 修饰符可以串联 -->
<button type="submit" v-on:click.stop.prevent="handlerClickPrevent">修饰符可以串联</button>
<hr>
<div>点击事件将只会触发一次</div>
<!-- 点击事件将只会触发一次 -->
<button v-on:click.once="handlerOnce">点击事件将只会触发一次</button>
<hr>
</div>
<!-- 1. 引包-->
<script src="./vue.js"></script>
<script>
// 2.初始化
const vm = new Vue({
el: '#app',
// 数据属性
data: {
},
methods:{
handlerClick(){
console.log("阻止单击事件继续传播");
},
handlerPrevent(){
console.log("提交事件不再重载页面");
},
handlerClickPrevent(){
console.log('修饰符可以串联');
},
handlerOnce(){
console.log('点击事件将只会触发一次');
}
}
})
</script>
</body>
</html>
按键修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-on按键修饰符</title>
<style>
</style>
</head>
<body>
<div id="app">
<div>阻止单击事件继续传播</div>
<!-- 阻止单击事件继续传播 -->
<input type="text" v-on:keyup.up="keyup" v-on:keyup.down="keydown">
<hr>
</div>
<!-- 1. 引包-->
<script src="./vue.js"></script>
<script>
// 2.初始化
const vm = new Vue({
el: '#app',
// 数据属性
data: {
},
methods:{
keyup(){
console.log('up');
},
keydown(){
console.log('keydown');
}
}
})
</script>
</body>
</html>