vue快速入门(十六)事件修饰符

这篇具有很好参考价值的文章主要介绍了vue快速入门(十六)事件修饰符。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

注释很详细,直接上代码

上一篇

新增内容

  1. 事件修饰符之阻止冒泡
  2. 事件修饰符之阻止默认行为

源码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 挂载点 -->
  <div id="root">
    <!-- @click.stop 阻止冒泡-->
    <!-- 1.未阻止冒泡时:点击子容器时显示“子容器被点击,父容器被点击” -->
    <div style="height: 200px; width: 200px; background-color: aqua;" @click="click_1">
      <div style="height: 100px; width: 100px; background-color: blue;" @click="click_2"></div>
    </div>

    <!-- 2.阻止冒泡时:点击子容器只输出“子容器被点击” -->
    <div style="height: 200px; width: 200px; background-color: red;" @click="click_3">
      <div style="height: 100px; width: 100px; background-color: blue;" @click.stop="click_4"></div>
    </div>

    <!-- 阻止默认行为:此时是不会跳转链接的-->
    <a @click.prevent="click_5" href="https://www.baidu.com">链接</a>
  </div>

    <!-- 导入vue的js代码:不会下载的看专栏第一篇 -->
    <script src="./lib/vue2.js"></script>

    <script>
      const app = new Vue({// Vue实例
        el: '#root',// 挂载点
        data: {// 数据

        },
        methods: {// 方法
          click_1() {
            console.log('父容器被点击!')
          },
          click_2() {
            console.log('子容器被点击!')
          },
          click_3() {
            console.log('父容器被点击!')
          },
          click_4() {
            console.log('子容器被点击!')
          },
          click_5() {
            console.log('a标签被点击!')
          }
        }
      })
    </script>
</body>

</html>

效果演示

vue快速入门(十六)事件修饰符,vue,vue.js,javascript

下一篇文章来源地址https://www.toymoban.com/news/detail-850046.html

到了这里,关于vue快速入门(十六)事件修饰符的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Vue3 知识第四讲】数据双向绑定、事件绑定、事件修饰符详解

    什么是数据双向绑定? 当数据发生变化的时候,视图会相应的发生变化 当视图发生改变的时候,数据也会相应的同步变化 数字化管理平台 Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus 权限系统-商城 个人博客地址 双向绑定的指令 ​ v-model 指令实现数据双向绑定 双向绑定使用场景 ​

    2024年02月09日
    浏览(68)
  • Vue.js快速入门 (cdn引入)

    提示:以下是本篇文章正文内容,前端系列学习将会持续更新 官网 :https://cn.vuejs.org Vue 是一个框架,也是一个 响应式数据驱动 。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的,不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。

    2024年02月12日
    浏览(48)
  • Vue.js快速入门:构建现代Web应用

      Vue.js是一款流行的JavaScript框架,用于构建现代的、交互式的Web应用程序。它具有简单易学的特点,同时也非常强大,能够帮助开发者构建高效、可维护的前端应用。本篇博客将带你快速入门Vue.js,并演示如何构建一个简单的Vue应用。 步骤1:准备开发环境 Node.js:用于运

    2024年02月07日
    浏览(40)
  • 快速操控鼠标行为!Vue鼠标按键修饰符让你事半功倍

        🎬 江城开朗的豌豆 :个人主页  🔥 个人专栏  :《 VUE 》 《 javaScript 》  📝  个人网站  :《 江城开朗的豌豆🫛 》  ⛺️ 生活的理想,就是为了理想的生活 !         欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造

    2024年02月05日
    浏览(45)
  • 你评论,我赠书~【哈士奇赠书 - 16期】〖Vue.js 快速入门实战〗等你来拿

    推荐: Python全栈白宝书专栏, 免费阶段订阅数量4300+ , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:加入社区的小伙伴们,除了可以获取博主 所有 付费专栏的阅读权限 之外,还有机会加入 星荐官共赢计划 ,详情请戳我 。 推荐他人订阅,可获取扣除平台费

    2024年02月03日
    浏览(49)
  • OpenCV入门(十六)快速学会OpenCV 15 图像分割

    作者:Xiou 图像分割主要是指将图像分成各具特性的区域并提取出感兴趣目标的技术。图像分割是数字图像分析中的重要环节,在整个研究中起着承前启后的作用,既是对所有图像预处理效果的一个检验,也是后续进行图像分析与解译的基础。 图像阈值化分割是一种传统的、

    2024年02月09日
    浏览(80)
  • JS javascript 点击鼠标 鼠标事件 获取元素 获取元素Xpath

    js代码,鼠标在页面点击时,记录元素的Xpath 代码:  

    2024年02月15日
    浏览(48)
  • Javascript 、Vue —— 禁止鼠标右键点击事件!

    工作中碰见了奇葩的需求(见多了,也就不奇葩了哈哈)—— 用户让加上鼠标右键点击事件 1、oncontextmenu 事件 定义 : oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。 HTML :  JavaScript :  JavaScript 中, 使用 addEventListener() 方法:   注意:  Internet Explorer 8 及更早

    2024年02月07日
    浏览(50)
  • 前端学习 node 快速入门 系列 —— 事件循环

    本篇将对以下问题进行讨论: 浏览器有事件循环,node 也有事件循环,两者有什么异同? node 核心特性(事件驱动和非阻塞 I/O )和事件循环有什么关系? node 中的高并发和高性能和事件循环有关系吗? node 不适合什么场景? 有人说 Node 是单线程,有人又说 node 存在多线程,

    2024年02月06日
    浏览(40)
  • JavaScript 快速入门手册

    本篇文章学习: 菜鸟教程、尚硅谷。 前言: 本人目前算是一个Java程序员,但是目前环境… ε=(´ο`*))) 一言难尽啊,blog也好久好久没有更新了,一部分工作原因吧(外包真的狗都不干了)…,为了以后多一口饭还是要多学习呐; JS 依稀记得记忆中学习过 最初天真的我甚至认

    2024年02月04日
    浏览(28)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包