v-on

  • 缩写:@

  • 事件修饰符

    1. .stop - 调用 event.stopPropagation()。 //阻止冒泡
    2. .prevent - 调用 event.preventDefault()。 //阻止事件默认行为
    3. .capture - 添加事件侦听器时使用 capture 模式。
    4. .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
    5. .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
    6. .native - 监听组件根元素的原生事件。
    7. .once - 只触发一次回调。
    8. .left - (2.2.0) 只当点击鼠标左键时触发。
    9. .right - (2.2.0) 只当点击鼠标右键时触发。
    10. .middle - (2.2.0) 只当点击鼠标中键时触发。
    11. .passive - (2.3.0) { passive: true } 模式添加侦听器
      例子:
      <!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a>
      <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form>
      <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a>

    按键修饰符

    • .enter
    • .tab
    • .delete (捕获“删除”和“退格”键)
    • .esc
    • .space
    • .up
    • .down
    • .left
    • .right
      1. 例子:<!-- 只有在 `key` `Enter` 时调用 `vm.submit()`--!>
      2. <input v-on:keyup.enter="submit">
    • 你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名

      1. // 可以使用 `v-on:keyup.f1`
      2. Vue.config.keyCodes.f1 = 112
      1.  

vue的修饰符的更多相关文章

  1. Vue—事件修饰符

    Vue事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation(). Vue. ...

  2. Vue 时间修饰符之使用$event和prevent修饰符操作表单

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue事件修饰符(once:prev:stop)

    vue事件修饰符(once:prev:stop) stop修饰符  效果如下: 当你鼠标在这个div里的时候,x与y的值:会随着鼠标的变化而变化.但是当鼠标放在stopMoving的时候,x与y的值是 ...

  4. 深入理解vue 修饰符sync【 vue sync修饰符示例】

    在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync .但是在 2.0 发 ...

  5. Vue sync修饰符的使用

    父子组件传值,父组件可以给子组件传值,但是子组件是不能修改组件提供的值,这里vue提供了sync修饰符,以前父组件点击子组件显示,子组件关闭按钮,父组件再点击子组件就无法让子组件显示.因为子组件点击关 ...

  6. vue之修饰符

    修饰符 .lazy 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 .你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步: <!-- ...

  7. Vue2.0学习笔记:Vue事件修饰符的使用

    事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...

  8. vue .sync修饰符

    .sync 修饰符 对一个 prop 进行“双向绑定”时,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源. 那这个修饰符的原理是什么呢?其实还是vu ...

  9. vue .sync 修饰符和自定义v-model的使用

    VUE 是单向数据流 当我们需要对一个 prop 进行"双向绑定"时 vue 修饰符.sync 子组件:this.$emit('update:visible', visible), ...

  10. Vue事件修饰符详解

    整体学习Vue时看到Vue文档中有事件修饰符的描述,但是看了之后并没有理解是什么意思,于是查阅了资料,现在记录下来与大家分享 先给大家画一个示意图理解一下冒泡和捕获 (1) .stop修饰符 请看如下 ...

随机推荐

  1. Developer 转型记:一个开发平台的“魔力”

    摘要:开发者该如何借助AI技术,探索可沉淀的落地应用?在这AI技术浪潮下,实现完美的应用创新?我们一起来听听他的故事…… 随着政策的加持.技术快速的迭代,人工智能热潮正在蔓延.2020年,AI落地大考 ...

  2. PDOStatement::getColumnMeta

    PDOStatement::getColumnMeta — 返回结果集中一列的元数据(PHP 5 >= 5.1.0, PECL pdo >= 0.2.0)高佣联盟 www.cgewang. ...

  3. luogu P4206 [NOI2005]聪聪与可可 期望dp 记忆化搜索

    LINK:聪聪与可可 这道题的核心是 想到如何统计答案. 如果设f[i][j]表示第i个时刻... 可以发现还需要统计位置信息 以及上一次到底被抓到没有的东西 不太好做. 两者的位置都在变化 所以需要 ...

  4. 【AHOI2009】中国象棋 题解(线性DP+数学)

    前言:这题主要是要会设状态,状态找对了问题迎刃而解. --------------------------- 题目描述 这次小可可想解决的难题和中国象棋有关,在一个N行M列的棋盘上,让你放若干个炮(可 ...

  5. sqlzoo刷题 SELECT from Nobel Tutorial

    SELECT from Nobel Tutorial 1.Change the query shown so that it displays Nobel prizes for 1950. SELEC ...

  6. HashMap:从源码分析到面试题

    1 HashMap简介 HashMap是实现map接口的一个重要实现类,在我们无论是日常还是面试,以及工作中都是一个经常用到角色.它的结构如下: 它的底层是用我们的哈希表和红黑树组成的.所以我们在学习 ...

  7. 13、Visitor 访问者模式 访问数据结构并处理数据 行为型设计模式

    1.模式的定义与特点 访问者(Visitor)模式的定义:将作用于某种数据结构中的各元素的操作分离出来封装成独立的类,使其在不改变数据结构的前提下可以添加作用于这些元素的新的操作,为数据结构中的每个元 ...

  8. IndexFlatL2、IndexIVFFlat、IndexIVFPQ三种索引方式示例

    上文针对Faiss安装和一些原理做了简单说明,本文针对标题所列三种索引方式进行编码验证. 首先生成数据集,这里采用100万条数据,每条50维,生成数据做本地化保存,代码如下: import numpy ...

  9. LibSvm流程及java代码测试

    使用libSvm实现文本分类的基本过程,此文参考 使用libsvm实现文本分类 对前期数据准备及后续的分类测试进行了验证,同时对文中作者的分词组件修改成hanLP分词,对数字进行过滤,仅保留长度大于1 ...

  10. 6.深入k8s:守护进程DaemonSet

    转载请声明出处哦~,本篇文章发布于luozhiyun的博客:https://www.luozhiyun.com 最近也一直在加班,处理项目中的事情,发现问题越多越是感觉自己的能力不足,希望自己能多学点 ...