美文网首页
Vue修饰符汇总

Vue修饰符汇总

作者: 张浩琦 | 来源:发表于2020-02-14 13:56 被阅读0次

事件修饰符

1、使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。

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

.stop
.prevent
.capture
.self
.once
.passive 对应 addEventListener 中的 passive 选项提供了 .passive 修饰符
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

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

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

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

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

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

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

按键修饰符

系统修饰符

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl
.alt
.shift
.meta
注意:在 Mac 系统键盘上,meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上,meta 对应实心宝石键 (◆)。在其他特定键盘上,尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品,比如 Knight 键盘、space-cadet 键盘,meta 被标记为“META”。在 Symbolics 键盘上,meta 被标记为“META”或者“Meta”。
 <div id="add">
        <button v-on:keyup.enter="tanChuan">点击</button>
        //点击回车执行
        <button v-on:click.ctrl="tanChuanTwo">点击二</button>
        //按下ctrl,并点击鼠标执行
    </div>
    <script>
        var vm = new Vue({
            el: "#add",
            data: {

            },
            methods: {
                tanChuan: function() {
                    alert("2123456463")
                },
                tanChuanTwo: function() {
                    alert("21234dfgj463")
                }
            }
        })
    </script>

.exact 修饰符 (暂时不太理解 看官方文档)

https://cn.vuejs.org/v2/guide/events.html#事件修饰符

鼠标按钮修饰符

.left
.right
.middle
        <button v-on:click.left="tanChuanTwo">点击三</button>
        <!-- 点击鼠标左键 -->
        <button v-on:click.right="tanChuanTwo">点击三</button>
        <!-- 点击鼠标右键 -->

         var vm = new Vue({
            el: "#add",
            data: {

            },
            methods: {
                tanChuan: function() {
                    alert("2123456463")
                },
                tanChuanTwo: function() {
                    alert("21234dfgj463")
                }
            }
        })

相关文章

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

    在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前...

  • Vue修饰符汇总

    事件修饰符 1、使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.preve...

  • 2018-10-11

    vue 修饰符sync【 vue sync修饰符示例】 先看下一个参考的文章:深入理解vue 修饰符sync【 v...

  • Vue事件修饰符

    Vue 事件修饰符 事件修饰符结合使用

  • vue中的修饰符

    事件修饰符 使用vue,让代码中只有纯粹的数据逻辑,而不是去处理DOM事件细节。 ---事件修饰符vue事件修饰符...

  • 2020-12-29

    Vue修饰符和事件 Vue修饰符:用来修饰事件的操作例如: 代码举例:阻止默认动作 1、v-on和其他支持的修饰符...

  • Vue面试考点准备03

    1、Vue中的修饰符有哪些? 修饰符是用于限定类型以及类型成员的声明的一种符号。Vue中修饰符分为如下五种:表单修...

  • vue 组件大全,持续更新中...

    1.Vue开源项目库汇总2.Vue常用经典开源项目汇总参考-海量3.vue 资料合集4.vue开源项目库汇总5.v...

  • Vue事件修饰符详解

    Vue事件修饰符详解(转) 整体学习Vue时看到Vue文档中有事件修饰符的描述,但是看了之后并没有理解是什么意思,...

  • 在vue中使用.stop阻止单击事件继续传播

    一、vue的事件修饰符 为了不在方法中处理DOM事件细节,vue中提供6个事件修饰符。分别是: .stop .pr...

网友评论

      本文标题:Vue修饰符汇总

      本文链接:https://www.haomeiwen.com/subject/wzbdfhtx.html