vue 修饰符 整理
事件修饰符
.stop
- <!-- 阻止单击事件继续传播 -->
- <a v-on:click.stop="doThis"></a>
.prevent
- <!-- 提交事件不再重载页面 -->
- <form v-on:submit.prevent="onSubmit"></form>
.capture
- <!-- 添加事件监听器时使用事件捕获模式 -->
- <!-- 即元素自身触发的事件先在此处理,然后才交由内部元素进行处理 -->
- <div v-on:click.capture="doThis"></div>
.self
- <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
- <!-- 即事件不是从内部元素触发的 -->
- <div v-on:click.self="doThat"></div>
.once
- <!-- 点击事件将只会触发一次 -->
- <a v-on:click.once="doThis"></a>
.passive
- <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
- <!-- 而不会等待 `onScroll` 完成 -->
- <!-- 这其中包含 `event.preventDefault()` 的情况 -->
- <div v-on:scroll.passive="onScroll">...</div>
.passive 和 .prevent 不要 一起使用
.prevent 将会被忽略,同时浏览器可能会向你展示一个警告。请记住,.passive 会告诉浏览器你不想阻止事件的默认行为。
按键修饰符
- <!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
- <input v-on:keyup.13="submit">
全部的按键别名:
- .enter
- .tab
- .delete (捕获“删除”和“退格”键)
- .esc
- .space
- .up
- .down
- .left
- .right
可以通过全局 config.keyCodes 对象自定义按键修饰符别名:
- // 可以使用 `v-on:keyup.f1`
- Vue.config.keyCodes.f1 = 112
系统修饰键
- .ctrl
- .alt
- .shift
- .meta
修饰键与常规按键不同:
事件触发时修饰键必须处于按下状态,释放其它按键
- <!-- Alt + C -->
- <input @keyup.alt.67="clear">
- <!-- Ctrl + Click -->
- <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
- <div @click.ctrl="doSomething">Do something</div>
修饰符
-.exact
- <!-- 有且只有 Ctrl 被按下的时候才触发 -->
- <button @click.ctrl.exact="onCtrlClick">A</button>
- <!-- 没有任何系统修饰符被按下的时候才触发 -->
- <button @click.exact="onClick">A</button>
- .lazy
转变为使用 change 事件进行同步:
- <!-- 在“change”时而非“input”时更新 -->
- <input v-model.lazy="msg" >
onchange 和 oninput 事件区别在于 前者在输入值后失去焦点触发,并且支持select,后者输入值实时触发,只支持文本
- .number
自动将用户的输入值转为数值类型,如果这个值无法被 parseFloat() 解析,则会返回原始的值。
- .trim
自动过滤用户输入的首尾空白字符
- .native
一个组件的根元素上直接监听一个原生事件。根元素不支持原生事件(比如label) 监听器将静默失败。它不会产生任何报错,但是 处理函数不会如你预期地被调用。
- .sync
prop 进行“双向绑定”。
原理:
- //父
- <text-document
- v-bind:title="doc.title"
- v-on:update:title="doc.title = $event"
- ></text-document>
- //子
- this.$emit('update:title', newTitle)
.sync 修饰符的 v-bind 不能和表达式一起使用
- v-bind:title.sync="doc.title +'!'" //无效
- v-bind.sync="{ title: doc.title }"//无效
鼠标按钮修饰符
- .left
- .right
- .middle
使用 v-on 有几个好处:
- 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
- 因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。
- 当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何清理它们。
vue 修饰符 整理的更多相关文章
- 理解vue 修饰符sync
也是在vux中看到了这个sync 现在我们来看看vue中的sync 我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移 ...
- Vue 修饰符once的方法使用
once:只执行一次 代码: <!doctype html> <html lang="en"> <head> <meta charset= ...
- 深入理解vue 修饰符sync
[ vue sync修饰符示例] 在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 ...
- 事件&vue修饰符
JavaScript 事件 HTML事件是发生在HTML元素上的事情.当在HTML页面帐使用JavaScript时,javascript可以触发这些事件 HTML 事件 HTML事件可以是浏览器的行为 ...
- 深入理解vue 修饰符sync【 vue sync修饰符示例】
在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync .但是在 2.0 发 ...
- vue 修饰符
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation(). Vue.js通过由点(.) ...
- vue修饰符学习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Vue修饰符
为了方便大家写代码,vue.js给大家提供了很多方便的修饰符,比如我们经常用到的取消冒泡,阻止默认事件等等~ 目录 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符(实在不知道叫 ...
- vue 修饰符(转载)
大佬写的很详细,直接转载过来,随时可以参考, 原博:https://www.w3cplus.com/vue/vue-methods-and-event-handling.html 事件处理 如果需要在 ...
随机推荐
- Spring IOC机制使用SpEL
一.SpEL 1.1 简介 Spring Expression Language,Spring表达式语言,简称SpEL.支持运行时查询并可以操作对象图. 和JSP页面上的EL表达式.Str ...
- P2617 Dynamic Rankings 动态主席树
\(\color{#0066ff}{ 题目描述 }\) 给定一个含有n个数的序列a[1],a[2],a[3]--a[n],程序必须回答这样的询问:对于给定的i,j,k,在a[i],a[i+1],a[i ...
- clang -O3 for循环的LLVM IR
O3都是怪物,这里分析的是CLANG怪物,示例程序遍历数组每个元素然后放大. void foreach_scale(int arr[],int elem){ for(int i=0;i<elem ...
- C++在WINdow桌面绘制文字图形
[起因] 最近碰到一个项目,需要在电脑左面显示一些信息,因此在网上找了一些资料,成功实现在桌面绘制信息. [代码] #include "stdafx.h" #include < ...
- 查看php 相关信息
PHP系统常量 __FILE__ 当前PHP程序脚本的绝对路径及文件名称 __LINE__ 存储该常量所在的行号 __FUNCTION__ 存储该常量所在的函数名称 __CLASS__ 存储该常量所在 ...
- C# web项目添加*.ashx文件后报错处理
说明:我是菜鸟,博文水平有限,仅作学习过程中的备忘笔记 1.截图信息: ———————————————————————————————————————————————————————————————— ...
- 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 ...
- 毕业设计 python opencv实现车牌识别 形状定位
主要代码参考https://blog.csdn.net/wzh191920/article/details/79589506 GitHub:https://github.com/yinghualuow ...
- B. Sereja and Suffixes
B. Sereja and Suffixes time limit per test 1 second memory limit per test 256 megabytes input standa ...
- day23 模块
1. 模块 1. 首先,我们先看个老生常谈的问题. 什么是模块. 模块就是一个包含了python定义和声 明的文件, 文件名就是模块的名字加上.py后缀. 换句话说我们目前写的所有的py文件都可以 看 ...