首页 > 其他分享 >12_Vue事件总结

12_Vue事件总结

时间:2022-10-26 08:33:29浏览次数:51  
标签:总结 12 修饰符 Vue 事件 按键 冒泡

事件总结

事件修饰符连携

准备工作

html

<!-- 定义一个容器 -->
  <div class="app">
    <!-- 事件修饰符连携 -->
    <div class="box" @click="toBaidu">
      <a href="https://www.baidu.com" @click.stop="toBaidu">这是一个链接</a>
    </div>
  </div>

js

<script>
  var vm = new Vue({
    el: '.app',
    data: {
      name: 'wavesbright'
    },
    methods: {
      // 事件冒泡
      toBaidu(e) {
        alert("即将前往百度.......");
      },
  });
</script>

测试

现在我只是阻止了事件冒泡,但是他依然会进行跳转到百度

10-24-6

我需要将这个默认行为也去掉,怎么办?

事件连携

事件修饰符是可以一直写的

image-20221025003316085

10-24-7

系统修饰符

  • 关于修饰keyup的系统修饰符
  • 想让事件触发,需要,同时按住系统修饰符按键 + 其他按键,松开其他按键,事件启动
  • 我现在就想让 ctrl + y 触发 事件,那么上述的就肯定不行

image-20221025003612755

10-24-8

标签:总结,12,修饰符,Vue,事件,按键,冒泡
From: https://www.cnblogs.com/wavesbright/p/16827044.html

相关文章

  • 【Java技术总结】Spring事务失效总结
    事务方法必须是public,private、protected、default都会失效。@ServicepublicclassUserService{@Transactionalprivatevoidadd(UserModeluserModel){......
  • 【转】VUE 动态绑定 html 的 class
            ......
  • Go中结构体基础知识总结
    什么是结构体结构是表示字段集合的用户定义类型。它可以用于将数据分组为单个单元而不是将每个数据作为单独的值的地方。例如,员工有firstName、lastName和age。将这三个属......
  • CF1612E(概率,独立贡献计算+枚举)
    CF1612E(概率,独立贡献计算+枚举)Problem-1612E-Codeforces题目Monocarp是\(n\)个学生的导师。现在有很多条消息,Monocarp希望第\(i\)个学生阅读编号为\(m_i\)......
  • Vue入门简易命令
    Vue入门简易命令style和class<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="https://cdn.bootcdn.n......
  • Vue
    目录前端发展Vue的使用插值语法指令系统文本指令事件指令属性指令属性条件渲染列表渲染双向数据绑定事件处理事件修饰符按键修饰符前端发展1.前端发展史1.1HTML(5)+c......
  • 1224. 交换瓶子
    https://www.acwing.com/problem/content/1226/首先是暴力做法,O(N^2),对于1e4勉强可以过#include<iostream>#include<algorithm>usingnamespacestd;constintN=......
  • vue2- style 和class - 条件渲染 - 列表渲染 - v-for 循环,数组,循环字符串,数字,对象 -
    style和class条件渲染列表渲染v-for循环,数组,循环字符串,数字,对象数组的检测与更新双向数据绑定事件处理过滤案例事件修饰符按键修饰符1.style和class<!DOCT......
  • 【2022.10.25】Vue基础学习(2)
    今日详情1.style和class2.条件渲染3.列表渲染3.1v-for循环数组,循环字符串,数字,对象3.2数组的检测与更新4.双向数据绑定5.事件处理5.1过滤案例5.2事件修饰......
  • chrome插件 vue-devtools zip 编译
    背景,工程代码在内网无法联网百度等,需要离线安装该工具开发vuejs工程 一、从有网络的地方拷贝插件xxxxx.crx,觉得这种比较合理注意,网上说的从chrome://extensions/查看......