Vue.js——事件修饰符

最新推荐文章于 2024-06-04 10:37:05 发布
最新推荐文章于 2024-06-04 10:37:05 发布
阅读量228 收藏
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MirabelleZWH/article/details/87514606
版权

跑马灯效果

  1. HTML结构：

<div id="app">
    <input type="button" value="开启" v-on:click="go">
    <input type="button" value="停止" v-on:click="stop">
    
	<h4>{{ msg }}</h4>
  </div>
  1. Vue实例：
    注意：在 VM实例中，如果想要获取 data 上的数据，或者 想要调用 methods 中的 方法，必须通过 this.数据属性名 或 this.方法名 来进行访问，这里的this，就表示 我们 new 出来的 VM 实例对象
    注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】
<script>
	// 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({

      el: '#app',
      data: {
        msg: '猥琐发育，别浪~！',
        intervalId: null   // 在data上定义 定时器Id
      },

      methods: {
        go() {
        
          // 如果当前有定时器在运行，则直接return
          if (this.intervalId != null) return;
          
          // 开始定时器
          this.intervalId = setInterval(() => {
            //var start = this.msg.substring(0, 1)
            // 获取到 后面的所有字符
            //var end = this.msg.substring(1)
            // 重新拼接得到新的字符串，并赋值给 this.msg
            //this.msg = end + start
            this.msg = this.msg.substring(0, 1) + this.msg.substring(1)
          }, 500);
        },
        
		// 停止定时器
        stop() {
          clearInterval(this.intervalId);
          // 每当清除了定时器之后，需要重新把 intervalId 置为 null
          this.intervalId = null;
        }
      }

    });
</script>

Vue指令之事件修饰符

  <style>
    .inner {
      height: 150px;
      background-color: darkcyan;
    }
  </style>
  • .stop 阻止冒泡
<div class="inner" @click="div1Handler">
      <input type="button" value="戳他" @click.stop="btnHandler">
</div>
  • .prevent 阻止默认事件
<a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>
  • .capture 添加事件侦听器时使用事件捕获模式(从外到里)
<div class="inner" @click.capture="div1Handler">
      <input type="button" value="戳他" @click="btnHandler">
</div>
  • .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
<div class="inner" @click.self="div1Handler">
      <input type="button" value="戳他" @click="btnHandler">
</div>
  • .once 事件只触发一次
<a href="http://www.baidu.com" @click.once="linkClick">有问题，先去百度</a>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        div1Handler() {
          console.log('这是触发了 inner div 的点击事件')
        },
        btnHandler() {
          console.log('这是触发了 btn 按钮 的点击事件')
        },
        linkClick() {
          console.log('触发了连接的点击事件')
        }
      }
    });
  </script>

演示： .stop 和 .self 的区别

<head>
  <style>
    .inner {
      height: 150px;
      background-color: darkcyan;
    }

    .outer {
      padding: 40px;
      background-color: red;
    }
  </style>
</head>

<div id="app">
    <div class="outer" @click="div2Handler">
      <div class="inner" @click="div1Handler">
        <input type="button" value="戳他" @click.stop="btnHandler">
      </div>
    </div> 
    
    <!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为 -->
    <!-- <div class="outer" @click="div2Handler">
      <div class="inner" @click.self="div1Handler">
        <input type="button" value="戳他" @click="btnHandler">
      </div>
    </div> -->
</div>

<script>
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        div2Handler() {
          console.log('这是触发了 outer div 的点击事件')
        }
      }
    });
</script>
六道轮回 -- 鼬
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
VUE.JS的事件修饰符介绍
AKIM一枚
03-02 1578
事件修饰符： .stop 阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事件在该元素本身（比如不是子元素）触发时触发回调 .once 事件只触发一次 .stop 阻止冒泡 &lt;!-- 使用 .stop 阻止冒泡 --&gt; &lt;di...
Vue.js学习笔记之修饰符详解
12-09
在本篇学习笔记中，我们将深入探讨Vue.js中两个重要指令——`v-model`和`v-on`的修饰符，这些修饰符可以增强它们的功能，提供更灵活的使用方式。 **一、v-model的修饰符** 1. **.lazy**： `.lazy` 修饰符改变了`v...
Vue事件修饰符
xiaowude_boke的博客
03-09 466
如果没有 self 修饰符，点击按钮时，事件会向上传播，导致 div 上的事件也会被触发。而现在点击按钮不会触发 div 上的事件，只有点击内容才能执行 div 上的事件。阻止事件冒泡：当一个元素执行某个事件的时候，这个事件会一直向上传播，如果它的父元素也有相同的事件，也会被触发执行。如果不想让事件向上传播，就需要阻止事件冒泡了。配合 keyup 使用时，需要在按下修饰键的同时，再按下其它键，随后释放其它键，事件才能被触发。：如果没有 capture 修饰符，事件默认冒泡阶段触发，会先执行内，后执行外。
在JS（JavaScript）中，常见的点击事件（click）修饰符
最新发布
weixin_52231116的博客
06-04 719
本文主要介绍在JS（JavaScript）中，常见的点击事件（click）修饰符。
vue.js入门（6）事件修饰符
yiyiyixin的博客
05-15 263
//index.html&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue@
vue.js常用的事件修饰符
mumu42的博客
02-06 249
.stop .prevent .capture .self .once .enter .tab .delete (捕获 “删除” 和 “退格” 键) .esc .space .up .down .left .right
Vue.js事件修饰符
qq_41304579的博客
12-08 149
事件修饰符 .stop 阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当时间在该元素本身（比如不是子元素）触发时触发回调 .once 事件只触发一次 代码案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
vue.js 简单的组件和点击事件应用
03-21
除了简写`v-on`为`@`，Vue还支持事件修饰符，比如`.stop`阻止事件冒泡，`.prevent`阻止默认行为，`.once`只执行一次等。例如，阻止按钮的默认提交行为： ```html <form @submit.prevent="onSubmit"> <!-- 表单内容...
vue.js入门（3）——详解组件通信
11-27
此外，Vue还支持在组件上监听原生DOM事件，通过在`v-on`后加上`.native`修饰符，如： ```html <my-component v-on:click.native="doTheThing"> ``` 这会使得`doTheThing`方法在用户点击`my-component`这个组件的根...
网页模板——vue.js创建事项清单表单特效源码.zip
11-23
你可以看到事件修饰符（如`.prevent`阻止默认行为，`.stop`阻止事件冒泡）的使用。 5. **表单输入绑定**：Vue提供便捷的表单输入绑定，如v-model，它将表单元素的值与数据模型连接起来。在事项清单表单中，可能有...
面试题：Vue.js 中的双向数据绑定是如何实现的？
02-16
除此之外，Vue.js 还允许在 `v-model` 指令后添加修饰符来改变其默认行为。例如，`v-model.lazy` 会在失去焦点时才更新数据，而不是每次输入时；`v-model.number` 会确保输入值始终是数字类型；`v-model.trim` 则会...
vuejs 事件修饰符
bluck Huang
09-03 173
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。 .stop .prevent .c...
Vue.js常见事件修饰符
small red red的博客
12-07 268
【代码】Vue.js常见事件修饰符。
前端框架vue.js系列（4）：事件修饰符与按键修饰符
@黄小泽的个人博客
09-27 1333
vue修饰符是指在触发事件或按键时额外的触发条件或回调。比如点击事件只允许触发一次，可以使用@click.once。   原生事件对象 vue可以通过以下方式，获取原生的事件对象： &lt;button @click="getEventDom($event);"&gt;getEventDom&lt;/button&gt; &lt;script&gt; var vue = new Vu...
vue.js中的事件修饰符的使用
落日夕霞的博客
12-26 654
vue.js中的事件修饰符的使用
Vue中的事件修饰符
qq_63533863的博客
01-15 106
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初识vue</title> <!--引入vue--> <script type="text/javascript"src="../js/vue.js"></script> <style> *{ .
工作日记：javaScript-事件修饰符（.prevent .stop .once .capture .self）
m0_67992720的博客
11-02 1153
阻止浏览器的默认事件：移动端浏览器的下拉刷新事件、点击超链接会跳转页面.......
【Vue.js学习笔记】4：事件修饰符,键盘事件,键值修饰符
LauZyHou的笔记
12-22 597
事件修饰符 在Vue的官方文档中给出了引入v-on:的事件修饰符的理念是，不希望在方法中去处理DOM细节。 事件冒泡 事件在事件源上发生，处理事件的方法并未绑定在该事件源上，事件就要向外或者向内传播（propagation），也称事件冒泡。在JS里，可以用事件对象的stopPropagation()方法来阻止事件的进一步传播。 index.html &lt;!DOCTYPE html&gt; &l...
Vue.js教程之事件修饰符
有点騒的程序员
09-03 269
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。event.preventdefault()：阻止默认事件发生，例如：a标签默认会刷新，表单的提交。event.stopPropagation()：终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。即不会再产生捕获和冒泡事件。如图所示：嵌套div，每一个d
"掌握Vue.js核心知识——VUE面试题集与解析
Vue.js是一种流行的JavaScript前端框架，用于构建用户界面。它被设计为一种轻量级框架，可以与现有项目很好地集成。Vue.js的主要优点包括易用性、灵活性和性能。首先，Vue.js非常易于学习和上手，新手可以很快上手并...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值