Skip to content

[vue] vue常用的修饰符有哪些?列举并说明 #290

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

[vue] vue常用的修饰符有哪些?列举并说明

Activity

xn213

xn213 commented on Jun 18, 2019

@xn213

v-model: .trim .number
v-on: .stop .prevent
鼠标键盘的修饰符: ..

ccllff

ccllff commented on Jul 4, 2019

@ccllff

.trim .number .stop .prevent

ccllff

ccllff commented on Jul 4, 2019

@ccllff

.once

DanielLeefu

DanielLeefu commented on Dec 25, 2019

@DanielLeefu

.trim .once .lazy .stop .native .prevent .number

Cai-zhiji

Cai-zhiji commented on Jul 7, 2023

@Cai-zhiji

在Vue中,修饰符(Modifiers)用于在指令的后面以点号(.)的形式添加,用于改变指令的行为。以下是Vue中常用的修饰符及其说明:

.prevent:

阻止默认事件的触发。
示例:


.stop:

阻止事件冒泡,不再向上级元素传递。
示例:<div @click.stop="onClick">
.capture:

使用事件捕获模式,即从父元素开始往子元素触发事件。
示例:<div @click.capture="onClick">
.self:

只当事件在绑定事件的元素本身触发时才触发事件处理函数。
示例:<div @click.self="onClick">
.once:

只触发一次事件处理函数,之后自动解绑。
示例:<button @click.once="onClick">
.passive:

提示浏览器此事件监听器永远不会调用 preventDefault()。
用于提升滚动事件的性能。
示例:<div @touchstart.passive="onTouchStart">
.native:

监听组件根元素的原生事件,而不是组件内部触发的事件。
示例:<my-component @click.native="onClick">
.sync:

双向绑定。用于父子组件之间的数据传递。
示例:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@ccllff@xn213@DanielLeefu@Cai-zhiji

        Issue actions

          [vue] vue常用的修饰符有哪些?列举并说明 · Issue #290 · haizlin/fe-interview