Vue修饰符集合
2020/3/27 11:07:28
本文主要是介绍Vue修饰符集合,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
.sync
作用: 允许props数据的双向数据绑定 , 不能和表达式一起使用,例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的 复制代码
//子组件 this.$emit('update:title', newTitle) //父组件 <text-document v-bind:title="doc.title" v-on:update:title="doc.title = $event" ></text-document> //等价于上面的 <text-document v-bind:title.sync="doc.title"></text-document> 复制代码
当我们用一个对象同时设置多个 prop 的时候,也可以将这个 .sync 修饰符和 v-bind 配合使用:
<text-document v-bind.sync="doc"></text-document> 复制代码
这样会把 doc 对象中的每一个属性 (如 title) 都作为一个独立的 prop 传进去,然后各自添加用于更新的 v-on 监听器。
.lazy
作用: v-model双向数据绑定的时候, 只要输入框的数据改变,绑定的model数据也会随之改变, 而 lazy修饰符会在光标离开input框才会更新数据 复制代码
<input type="text" v-model.lazy="value"> 复制代码
.trim
作用: 输入框过滤首尾的空格 复制代码
<input type="text" v-model.trim="value"> 复制代码
.number
作用: 先输入数字 就会限制输入只能是数字, 先字符串就相当于没有加上number, 注意, 不是输入框不能输入字符串, 是这个数据是数字. 复制代码
<input type="text" v-model.number="value"> 复制代码
.stop
作用: 阻止事件冒泡, 相当于调用了调用了event.stopPropagation()方法 复制代码
<button @click.stop="test">test</button> 复制代码
.present
作用: 阻止默认行为, 相当于调用了event.preventDefault()方法,比如表单的提交,a标签的跳转就是默认事件 复制代码
<a @click.prevent="test">test</a> 复制代码
.self
作用: 只有元素本身触发时才触发方法,就是只有点击元素本身才会触发事件. 比如: div中有按钮, 并且div和按钮各自绑定了点击事件, 正常情况下, 点击按钮,也会触发div的点击方法, 但是如果在div的点击事件上加上self,那么就只有点击div本身时,该事件才会触发, 相当于变相的阻止事件冒泡. 复制代码
<div @click.self="test"></div> 复制代码
.once
作用: 只能用一次,无论点击几次,执行一次之后就不会再执行 复制代码
<div @click.once="test"></div> 复制代码
.capture
作用: 事件的完整机制是捕获-目标-冒泡,事件触发是目标往外冒泡 复制代码
<div @click="test(1)"> <button @click="test(2)">test</button></div> 点击顺序: 先2后1, 而capture的作用,则是让这个顺序相反 <div @click.capture="test(1)"> <button @click="test(2)">test</button></div> 点击顺序: 先1后2 复制代码
.passive
作用: 提升移动端的性能, 在每次滚动中都会有一个默认事件会触发,加上这个,则是告诉浏览器, 不需要查询, 不需要触发这个默认事件. 复制代码
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!-- 而不会等待 `onScroll` 完成 --> <!-- 这其中包含 `event.preventDefault()` 的情况 --> <div v-on:scroll.passive="onScroll">...</div> 复制代码
.native
作用: 让自定义组件可以响应到自身绑定的事件 复制代码
//没有加上native, 点击事件无效 <my-component @click.native="onClick"></my-component> 复制代码
鼠标.left、.reight、.middle
作用: 点击鼠标对应按键就会触发 复制代码
<button @click.left="test">test</button> 复制代码
.keyCode
作用: 监听按键的指令,在vue的官网可以看到对应的 键码对应表 复制代码
<input type="text" @keyup.enter="test(1)"> <button @click.enter="test(1)">test</button> 复制代码
注意: 只有你点击过一次或者聚焦到这个输入框才能使用键盘触发。 复制代码
.exact
作用: 系统修饰键,只要按着这个键然后用鼠标点击才会触发. 复制代码
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 --> <button @click.ctrl="onClick">A</button> <!-- 有且只有 Ctrl 被按下的时候才触发 --> <button @click.ctrl.exact="onCtrlClick">A</button> <!-- 没有任何系统修饰符被按下的时候才触发 --> <button @click.exact="onClick">A</button> 复制代码
这篇关于Vue修饰符集合的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南