目录
1.复习内容
2.Vue的事件修饰符连用
3.Vue的指定键盘事件连用触发
1.复习内容
前两节我们学习了Vue的事件修饰符和Vue的键盘事件，这一节我们来学习一下Vue事件修饰符以及键盘事件的扩展。以下是前两节的内容，大家可以复习一下。
2.Vue的事件修饰符连用
我们在14节中讲过一个事件冒泡的例子：
<!--阻止事件冒泡（常用）-->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">点击提示</button>
</div>
我们使用事件修饰符stop就可以阻止事件冒泡。否则点击一次button按钮，就会弹窗两次。那么如果我们换成下面这种情况会发生什么？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘事件</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h2>欢迎学习{{name}}</h2>
<!--阻止事件冒泡（常用）-->
<div class="demo1" @click="showInfo">
<a href="
@click.stop="showInfo">点击提示</a>
</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
Vue.config.keyCodes.huiche = 13;
const vm = new Vue({
el:'#root',
data:{
name:'Vue专栏'
},
methods: {
showInfo(e){
alert('点击提示')
}
},
})
</script>
</html>
执行效果：
我们可以看到它不仅执行了点击事件，而且还执行了a标签的默认跳转方法。所以这个时候我们不仅需要阻止事件冒泡，而且还需要阻止a标签的默认方法，也就是说我们需要同时用两个修饰符，那么这种情况该怎么办呢？
其实Vue中的事件修饰符是可以连用的。
所以我们就可以像下面这样使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘事件</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h2>欢迎学习{{name}}</h2>
<!--阻止事件冒泡（常用）-->
<div class="demo1" @click="showInfo">
<a href=
@click.stop.prevent="showInfo">点击提示</a>
</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
Vue.config.keyCodes.huiche = 13;
const vm = new Vue({
el:'#root',
data:{
name:'Vue专栏'
},
methods: {
showInfo(e){
alert('点击提示')
}
},
})
</script>
</html>
执行效果：
这样就可以同时用两个修饰符了。
3.Vue的指定键盘事件连用触发
我们在15节中讲过 Vue中用法特殊的系统修饰键在配合keyup使用的时候，需要按下修饰键的同时，再按下其他键，随后释放其他键，事件才会被触发。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘事件</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h2>欢迎学习{{name}}</h2>
<input type="text" placeholder="按下回车提示输入" @keyup.ctrl="showInfo">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
Vue.config.keyCodes.huiche = 13;
const vm = new Vue({
el:'#root',
data:{
name:'Vue专栏'
},
methods: {
showInfo(e){
alert('提示')
}
},
})
</script>
</html>
执行效果：
我们可以看到上述代码无论按住Ctrl+任意一个键再放开都会触发事件。
那么如果我们只希望按住ctrl+y再放开才会触发 该怎么办？
其实Vue的键盘事件也是可以连用的，我们可以像下面这样写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘事件</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h2>欢迎学习{{name}}</h2>
<input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
Vue.config.keyCodes.huiche = 13;
const vm = new Vue({
el:'#root',
data:{
name:'Vue专栏'
},
methods: {
showInfo(e){
alert('提示')
}
},
})
</script>
</html>
执行效果：
这样我们就实现了只按住ctrl+y的组合才会触发事件了。
