vue基础实践1：事件修饰符

最新推荐文章于 2024-12-11 13:47:08 发布

公子清

最新推荐文章于 2024-12-11 13:47:08 发布

阅读量264

点赞数

分类专栏：实践系列 Vue系列实践真题系列文章标签：事件修饰符 vue

本文链接：https://blog.youkuaiyun.com/Josiah_Yuan/article/details/106530800

版权

Vue系列同时被 3 个专栏收录

40 篇文章

订阅专栏

实践系列

33 篇文章

订阅专栏

实践真题系列

25 篇文章

订阅专栏

本文详细介绍了Vue中事件修饰符的使用方法，包括如何通过@keydown.prevent/stop和按键修饰符如@keydown.enter来控制事件行为，以及如何利用键盘码和组合按键进行更复杂的事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue基础实践1：事件修饰符

> v-on (简写@)：用来实现事件绑定的指令 v-on:click:xxx等价于@click='xxx' 1.事件触发的时候，需要传递参数信息，把方法加小括号，$event是事件对象 v-on:click='sum($event,10,20)' 2.事件修饰符常规修饰符：@keydown.prevent/stop = 'xxx' 按键修饰符：@keydown.enter /space/delect/up/right/down/left...='xxx' 键盘码：@keydown.alt.13 组合按键：@keydown.alt.67='func' //ALT+C


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <title>Document</title>
</head>
<body>
    <!-- v-on (简写@)：用来实现事件绑定的指令
       v-on:click:xxx等价于@click='xxx'
       1.事件触发的时候，需要传递参数信息，把方法加小括号，$event是事件对象
       v-on:click='sum($event,10,20)'
       2.事件修饰符
         常规修饰符：@keydown.prevent/stop = 'xxx'
          按键修饰符：@keydown.enter /space/delect/up/right/down/left...='xxx'
          键盘码：@keydown.alt.13
          组合按键：@keydown.alt.67='func' //ALT+C
        -->
    
    <div id="app">
        <button v-on:click='sum($event,10,20) ' ></button>
    
    <a href="baidu.com" @click.prevent.stop='func'>百度一下</a>

    <input type="text" placeholder="输入内容" v-model='text' @keydown.alt.67='func'>
</div> 
</body>

<script>
   let vm =  new Vue( {
       el:'#app',
       data :{
           text:''
       },
       methods: {
           //this是实例
           func(ev) {
            //    ev.preventDefault();
            // if(ev.keyCode === 13){
            //    alert('前端学习')};
            alert('前端学习')
           // console.log('FUNC');
           },
           sum(ev,n,m) {
            console.log(arguments);
           }
           
       }
   });
</script>
</html>