事件修饰符

.stop

  1. <!-- 阻止单击事件继续传播 -->
  2. <a v-on:click.stop="doThis"></a>

.prevent

  1. <!-- 提交事件不再重载页面 -->
  2. <form v-on:submit.prevent="onSubmit"></form>

.capture

  1.   <!-- 添加事件监听器时使用事件捕获模式 -->
  2.   <!-- 即元素自身触发的事件先在此处理,然后才交由内部元素进行处理 -->
  3.   <div v-on:click.capture="doThis"></div>

.self

  1.   <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
  2.   <!-- 即事件不是从内部元素触发的 -->
  3.   <div v-on:click.self="doThat"></div>

.once

  1.   <!-- 点击事件将只会触发一次 -->
  2.   <a v-on:click.once="doThis"></a>

.passive

  1.   <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
  2.   <!-- 而不会等待 `onScroll` 完成 -->
  3.   <!-- 这其中包含 `event.preventDefault()` 的情况 -->
  4.   <div v-on:scroll.passive="onScroll">...</div>

.passive 和 .prevent 不要 一起使用

.prevent 将会被忽略,同时浏览器可能会向你展示一个警告。请记住,.passive 会告诉浏览器你不想阻止事件的默认行为。

按键修饰符

  1.   <!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
  2.   <input v-on:keyup.13="submit">

全部的按键别名:

  • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

可以通过全局 config.keyCodes 对象自定义按键修饰符别名:

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

系统修饰键

  • .ctrl
  • .alt
  • .shift
  • .meta

修饰键与常规按键不同:

事件触发时修饰键必须处于按下状态,释放其它按键

  1.   <!-- Alt + C -->
  2.   <input @keyup.alt.67="clear">
  3.  
  4.   <!-- Ctrl + Click -->
  5.   <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
  6.   <div @click.ctrl="doSomething">Do something</div>

修饰符

-.exact

  1.   <!-- 有且只有 Ctrl 被按下的时候才触发 -->
  2.   <button @click.ctrl.exact="onCtrlClick">A</button>
  3.  
  4.   <!-- 没有任何系统修饰符被按下的时候才触发 -->
  5.   <button @click.exact="onClick">A</button>
  • .lazy

转变为使用 change 事件进行同步:

  1.   <!-- 在“change”时而非“input”时更新 -->
  2.   <input v-model.lazy="msg" >

onchange 和 oninput 事件区别在于 前者在输入值后失去焦点触发,并且支持select,后者输入值实时触发,只支持文本

  • .number

自动将用户的输入值转为数值类型,如果这个值无法被 parseFloat() 解析,则会返回原始的值。

  • .trim

自动过滤用户输入的首尾空白字符

  • .native

一个组件的根元素上直接监听一个原生事件。根元素不支持原生事件(比如label) 监听器将静默失败。它不会产生任何报错,但是 处理函数不会如你预期地被调用。

  • .sync

prop 进行“双向绑定”。

原理:

  1. //父
  2.   <text-document
  3.    v-bind:title="doc.title"
  4.    v-on:update:title="doc.title = $event"
  5.   ></text-document>
  6. //子
  7.   this.$emit('update:title', newTitle)

.sync 修饰符的 v-bind 不能和表达式一起使用

  1.   v-bind:title.sync="doc.title +'!'" //无效
  1.   v-bind.sync="{ title: doc.title }"//无效

鼠标按钮修饰符

  • .left
  • .right
  • .middle

使用 v-on 有几个好处:

  • 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
  • 因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。
  • 当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何清理它们。

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

  1. 理解vue 修饰符sync

    也是在vux中看到了这个sync 现在我们来看看vue中的sync 我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移 ...

  2. Vue 修饰符once的方法使用

    once:只执行一次 代码: <!doctype html> <html lang="en"> <head> <meta charset= ...

  3. 深入理解vue 修饰符sync

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

  4. 事件&vue修饰符

    JavaScript 事件 HTML事件是发生在HTML元素上的事情.当在HTML页面帐使用JavaScript时,javascript可以触发这些事件 HTML 事件 HTML事件可以是浏览器的行为 ...

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

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

  6. vue 修饰符

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

  7. vue修饰符学习

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. Vue修饰符

    为了方便大家写代码,vue.js给大家提供了很多方便的修饰符,比如我们经常用到的取消冒泡,阻止默认事件等等~ 目录 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符(实在不知道叫 ...

  9. vue 修饰符(转载)

    大佬写的很详细,直接转载过来,随时可以参考, 原博:https://www.w3cplus.com/vue/vue-methods-and-event-handling.html 事件处理 如果需要在 ...

随机推荐

  1. Spring IOC机制使用SpEL

    一.SpEL 1.1       简介 Spring Expression Language,Spring表达式语言,简称SpEL.支持运行时查询并可以操作对象图. 和JSP页面上的EL表达式.Str ...

  2. P2617 Dynamic Rankings 动态主席树

    \(\color{#0066ff}{ 题目描述 }\) 给定一个含有n个数的序列a[1],a[2],a[3]--a[n],程序必须回答这样的询问:对于给定的i,j,k,在a[i],a[i+1],a[i ...

  3. clang -O3 for循环的LLVM IR

    O3都是怪物,这里分析的是CLANG怪物,示例程序遍历数组每个元素然后放大. void foreach_scale(int arr[],int elem){ for(int i=0;i<elem ...

  4. C++在WINdow桌面绘制文字图形

    [起因] 最近碰到一个项目,需要在电脑左面显示一些信息,因此在网上找了一些资料,成功实现在桌面绘制信息. [代码] #include "stdafx.h" #include < ...

  5. 查看php 相关信息

    PHP系统常量 __FILE__ 当前PHP程序脚本的绝对路径及文件名称 __LINE__ 存储该常量所在的行号 __FUNCTION__ 存储该常量所在的函数名称 __CLASS__ 存储该常量所在 ...

  6. C# web项目添加*.ashx文件后报错处理

    说明:我是菜鸟,博文水平有限,仅作学习过程中的备忘笔记 1.截图信息: ———————————————————————————————————————————————————————————————— ...

  7. CodeForces-Zuhair and Strings(思维+枚举)

    Given a string ss of length nn and integer kk (1≤k≤n1≤k≤n). The string ss has a level xx, if xx is l ...

  8. 毕业设计 python opencv实现车牌识别 形状定位

    主要代码参考https://blog.csdn.net/wzh191920/article/details/79589506 GitHub:https://github.com/yinghualuow ...

  9. B. Sereja and Suffixes

    B. Sereja and Suffixes time limit per test 1 second memory limit per test 256 megabytes input standa ...

  10. day23 模块

    1. 模块 1. 首先,我们先看个老生常谈的问题. 什么是模块. 模块就是一个包含了python定义和声 明的文件, 文件名就是模块的名字加上.py后缀. 换句话说我们目前写的所有的py文件都可以 看 ...