vue 事件缩写及修饰符

最新推荐文章于 2024-04-07 14:54:29 发布

奚大野...

最新推荐文章于 2024-04-07 14:54:29 发布

阅读量835

点赞数 1

分类专栏： vue 文章标签： vue.js javascript vue

本文链接：https://blog.csdn.net/qq_41752378/article/details/121019325

版权

vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

一 . 缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

v-bind 缩写 – （动态赋值）

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 缩写 – （常用事件绑定，例如：click）

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

二修饰符

1 事件修饰符

事件修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

.stop

阻止冒泡

当多对标签进行重叠的时候, 你点击最上面的一层标签的时候, 会自动的冒泡到他下面的所有标签上面
而.stop就是阻止冒泡使用的

.prevent

阻止默认事件

在form表单提交时候或者在点击a标签的时候, 会阻止提交或跳转

.self

只当事件在该元素本身（比如不是子元素）触发时触发回调

这个修饰符跟.stop目的差不多,
.stop 是阻止点击到自己身上的点击事件冒泡到其它标签上
.self 是除非你直接点击到我标签本身, 不接受其它标签上面的点击事件冒泡到我身上的事件

.once

事件只触发一次

绑定后只会触发一次

下面为代码演示, 主要功能就是有一个遮罩层,

.keyup

<input v-on:keyup.enter="submit">
<input v-on:keyup.13="submit">

.native

<base-input v-on:focus.native="onFocus"></base-input>

将组件看待成一个html标签；

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。

处理函数只会在 $event.key 等于 PageDown 时被调用。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 导入本地的vue     -->
    <script src="/VUE/vue.js"></script>
</head>
<body>
    
    <div id="box">
        <!-- 修饰符 .prevent 会阻止默认行为,比如跳转 -->
        <br> <a href="http://www.baidu.com" @click.prevent>点击后不会跳转</a>
        <br><hr>
        <!-- 修饰符 .once 被绑定的事件只触发一次 -->
        <button @click.once="onceFunc"> 你只能点击一次 </button>
        <br><hr>
        <!-- 点击按钮后吧isShow的状态置位true -->
        <button @click="isShow=true">点击显示遮罩层</button>
        <!-- 这个div标签就是出现的遮罩层 -->
        <div id="overlay" v-show="isShow" @click="isShow=false">
             <!-- 这个div标签是在遮罩层上面显示的,当点击这个标签会冒泡到他下面的div
            这个时候就要使用 .shop 阻止冒泡行为 -->
            <div id="center" @click.stop>
                点击灰色部分会关闭遮罩层, <br>而点击白色部分这不会
                <hr>
                <div>用户名: <input type="text"></div>
            </div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:"#box",
            data:{
                isShow:false,
            },
            methods:{
                onceFunc(){
                    
                }
            }
        })
    </script>
    
</body>
</html>

2 v-model 修饰符

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步：

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

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number">

这通常很有用，因为即使在 type=“number” 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

奚大野...

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue 事件缩写及修饰符

v-on绑定事件简写为@使用v-on已经进行一些事件绑定, 最常用的比如click点击事件事件修饰符.stop阻止冒泡当多对标签进行重叠的时候, 你点击最上面的一层标签的时候, 会自动的冒泡到他下面的所有标签上面而.stop就是阻止冒泡使用的.prevent阻止默认事件在form表单提交时候或者在点击a标签的时候, 会阻止提交或跳转.self只当事件在该元素本身（比如不是子元素）触发时触发回调这个修饰符跟.stop目的差不多,.stop 是阻止点击到自己身上的点
复制链接

扫一扫