10.v-on 的修饰符

最新推荐文章于 2024-04-18 23:45:00 发布

@司马懿

最新推荐文章于 2024-04-18 23:45:00 发布

阅读量95

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_40406929/article/details/118724331

版权

VUE 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

这篇博客介绍了Vue.js中事件修饰符的用法，包括.stop用于阻止事件冒泡，.prevent防止表单默认提交，.keyup监听键盘按键，以及.native监听组件根元素的原生事件，还有.once修饰符确保事件只执行一次。通过实例展示了这些修饰符在实际代码中的应用。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id ="vue">
  <!--.stop修饰符的使用-->
  <!--如果不加这个修饰符，那么先执行完 btnClick 事件后，会再执行 divClick 事件-->
    <div @click="divClick">
      222
      <button @click.stop="btnClick">btaClick</button>
    </div>
    <br>

  <!--prevent修饰符的使用-->
  <!--如果不加这个修饰符，那么会点击提交事件后，执行submitClick(),-->
  <!--执行完这个submitClick()方法，会再进行form表单默认的提交事件，并且会报404异常-->
  <!--总结：prevent会阻止form表单的默认事件，走我们自定义的提交事件-->
    <form action="baidu">
      <input type="submit" value="提交" @click.prevent="submitClick">
    </form>

  <!--监听某个键盘的键帽-->
  <!--任何键帽敲击都会触动事件执行-->
    <input type="text" @keyup="kyeuuuu">

  <!--监听某个键盘的键帽-->
  <!--enter 键 敲击后 会触动事件执行-->
  <input type="text" @keyup.enter="kyeEnter">

  <!--native 监听组件根元素的原生事件-->
  <!--注意是组件-->
  <cpn @click.native="cpnClick"></cpn>

  <!--once 限制只执行一次-->
  <br>
  <button @click.once="btn2click">按钮3</button>
</div>

<script src="../js/vue.js"></script>

<script>
    const app = new Vue({
        el:'#vue',
        data:{
            message:'你好！华为'
        },
        methods:{
          divClick(){
            console.log("divClick");
          },
          btnClick(){
            console.log("btnClick");
          },
          submitClick() {
            console.log("submitClick");
          },
          kyeuuuu(){
            console.log("onkeyup");
          },
          kyeEnter(){
            console.log("kyeEnter");
          },
          btn2click(){
            console.log("kyeEnter");
          }
        }
    });
</script>

</body>
</html>

@司马懿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10.v-on 的修饰符

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id ="vue">  <!--如果不加这个修饰符，那么先执行完 btnClick 事件后，会再执行 divClick 事.
复制链接

扫一扫

专栏目录