• v-on的修饰符

     

    1.stop修饰符的使用——阻止冒泡事件

    1. "app">
    2.  <div @click="divClick">
    3.    <button @click="btnClick">按钮button>
    4.  div>
  • <script src="../js/vue.js">script>
  • <script>
  • const app=new Vue({
  • el:"#app",
  • data://注意此处的花括号
  • {
  • message:"这是一个vue模板"
  • },
  • methods:{
  • divClick(){
  • console.log("divClick");
  • },
  • btnClick(){
  • console.log("btnClick");
  • }
  • }
  • })
  • script>

    • 点击按钮，事件冒泡，两个都发生 

     

     希望达到只有点击“点击这里”时，divClick才执行，而不是点击按钮时执行。达到此效果需要阻止按钮的事件冒泡。

    1. "app">
    2.  <div @click="divClick">
    3.    点击这里<button @click="btnClick">按钮button>
    4.  div>

添加修饰符stop 后再次点击按钮

  1. "app">
  2.  <div @click="divClick">
  3.    点击这里<button @click.stop="btnClick">按钮button>
  4.  div>

 2.prevent修饰符的使用——阻止默认事件

不希望代码点击提交按钮后自动提交，希望自己手动提交

  1. "baidu">
  2.   <input type="submit" value="提交">
  3. form>

此时有打印有提交 

  1. "baidu">
  2.   <input type="submit" value="提交" @click="submitClick">
  3. form>
  4.     submitClick(){
  5.       console.log(submitClick);
  6.     }

添加prevent修饰，此时只有打印没有提交

  1. "baidu">
  2.   <input type="submit" value="提交" @click.prevent="submitClick">
  3. form>
  4.           submitClick(){
  5.             console.log("submitClick");
  6.           }

3.keyup——监听键盘某个键的点击

监听所有按钮，准确说是手抬起的次数

  1.           
  2.   "text" @keyup="keyUp">
  3. keyUp()
  4.           {
  5.             console.log("keyUp");
  6.           }

只监听回车按钮 

  "text" @keyup.enter="keyUp">

4.once——只触发一次回调

希望只有第一次点按钮有反应，之后无反应

  <button @click.once="btn2Click">按钮2button>

  1. html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Titletitle>
  6. head>
  7. <body>
  9. <div id="app">
  10.  <div @click="divClick">
  11.    点击这里<button @click.stop="btnClick">按钮button>
  12.  div>
  14. <form action="baidu">
  15.   <input type="submit" value="提交" @click.prevent="submitClick">
  16. form>
  17.  
  20.   <input type="text" @keyup.enter="keyUp">
  22.   <button @click.once="btn2Click">按钮2button>
  23. div>
  24.  
  25.  
  26. <script src="../js/vue.js">script>
  27. <script>
  28.   const app=new Vue({
  29.     el:"#app",
  30.     data://注意此处的花括号
  31.         {
  32.           message:"这是一个vue模板"
  33.         },
  34.         methods:{
  35.       divClick(){
  36.         console.log("divClick");
  37.       },
  38.           btnClick() {
  39.             console.log("btnClick");
  40.           },
  41.           submitClick(){
  42.             console.log("submitClick");
  43.           },
  44.           keyUp()
  45.           {
  46.             console.log("keyUp");
  47.           },
  48.           btn2Click(){
  49.             console.log(" btn2Click");
  50.           }
  51.         }
  52.  
  53.     }
  54.   )
  55. script>
  56.  
  57. body>
  58. html>

 

  • 相关阅读:
    Bracket Sequence ——卡特兰数
    PHP8新特性
    最大流=最小割 简单证明
    transformers - 预测中间词
    图文结合丨Prometheus+Grafana+GreatSQL性能监控系统搭建指南(上)
    如何在 Ubuntu 上安装和使用 Nginx？
    nginx配置详解
    java 冒泡排序
    Apache Spark 中的 RDD是什么
    一文搞懂 Vue3 defineModel 双向绑定：告别繁琐代码！
  • 原文地址：https://blog.csdn.net/weixin_54327001/article/details/127793144