11vue学习_v-on 修饰符的使用

最新推荐文章于 2023-04-18 18:15:46 发布
最新推荐文章于 2023-04-18 18:15:46 发布
阅读量105 收藏
点赞数
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chencaw/article/details/113454485
版权

1、相关的修饰符如下

<!-- v-on的修饰符 -->
        <!-- 在某些情况下，拿event进行一些事件处理 -->
        <!-- 停止冒泡 -->
        <button @click.stop="doThis"></button>

        <!-- 阻止默认行为 -->
        <button @click.prevent="doThis"></button>

        <!-- 阻止默认行为,没有表达式 -->
        <form @submit.prevent></form>

        <!-- 串联修饰符 -->
        <button @click.stop.prevent="doThis"></button>

        <!-- 键修饰符，键别名-->
        <input @key.enter="onEnter"></button>

        <!-- 键修饰符，键代码-->
        <input @key.13="onEnter"></button>

        <!-- 点击回调只会触发一次 -->
        <button @click.once="doThis"></button>

2、下面代码冒泡传递

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
</head>
<body>
    <div id ="app">
        <div @click = 'divClick'>
            <button @click = 'btnClick'>按钮</button>
        </div>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let（变量） /const（常亮）
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                counter: 0      
            },
            methods:{
                btnClick(){
                    console.log('btnClick');
                },
                divClick(){
                    console.log('divClick');
                }
            }
        })
    </script>
</body>

3、阻止冒泡传递 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
</head>
<body>
    <div id ="app">
        <div @click = 'divClick'>
            aaabbbccc
            <!-- <button @click = 'btnClick'>按钮</button> -->
            <button @click.stop = 'btnClick'>按钮</button>
        </div>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let（变量） /const（常亮）
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                counter: 0      
            },
            methods:{
                btnClick(){
                    console.log('btnClick');
                },
                divClick(){
                    console.log('divClick');
                }
            }
        })
    </script>
</body>

4、其它几个修饰符 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
</head>
<body>
    <div id ="app">
        <!--1 stop修饰符的使用 -->
        <div @click = 'divClick'>
            aaabbbccc
            <!-- <button @click = 'btnClick'>按钮</button> -->
            <button @click.stop = 'btnClick'>按钮</button>
        </div>

        <!--2 prevent修饰符的使用 -->
        <br>
        <form action="baidu">
            <input type="submit" value="提交" @click.prevent = "submitClick">
        </form>

        <!--3 监听某个键盘的使用 -->     
        <!-- <input type="text" @keyup = "keyUp">    -->
        <input type="text" @keyup.enter = "keyUp"> 
        
        <!--4 once修饰符的使用 -->
        <button @click.once = 'btn2Click'>按钮2</button>        
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let（变量） /const（常亮）
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                counter: 0      
            },
            methods:{
                btnClick(){
                    console.log('btnClick');
                },
                divClick(){
                    console.log('divClick');
                },
                submitClick(){
                    console.log('submitClick');
                },
                keyUp(){
                    console.log('keyUp');
                },
                btn2Click(){
                    console.log('btn2Click');
                }
            }
        })
    </script>
</body>

 

chencaw
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue修饰符 v-on、v-bind、v-model
qq_40299140的博客
08-27 789
1.v-on 修饰符 .stop - 调用 event.stopPropagation()，禁止事件冒泡。 .prevent - 调用 event.preventDefault()，阻止事件默认行为。 .capture - 添加事件侦听器时使用 capture 模式。 .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。 .{keyCode | keyAlias} - 只当...
vue给对象添加v-html,vue v-on=”on” 绑定一个对象里面怎么添加原生事件， 修饰符？...
weixin_30585729的博客
06-17 288
这个是内部的子组件， 外部是传递的一个对象通过v-on绑定的对象， 看官网显示 绑定对象是不支持修饰符的，native也不支持.有没有大佬知道。回答官网的例子等价于改一下就可以加修饰符了，没必要非得用对象语法@mousedown.native="doThis"总感觉你的问题很怪，首先我猜测是用的手写渲染函数，看到你这句看官网显示 绑定对象是不支持修饰符的我猜你是想向组件传递一个@click原生事件...
(转)vue v-on修饰符
青椒的博客
04-07 400
1、stop 功能：阻止事件冒泡 使用方法: <button v-on:click.stop="show">B</button> 举例： <div id="app"> <div style="width: 100px;height: 100px;background-color: #008000;" v-on:click="show"> ...
前端开发之Vue事件修饰符和按键修饰符
m0_58371965的博客
01-17 796
前言 在前端开发Vue.js中，关于事件和按键的使用也是比较常见的操作之一，那么与它们相关的事件修饰符和按键修饰符也是延伸前端培训的比较常用的操作。那么本篇博文就来分享一下关于Vue.js中事件修饰符和按键修饰符的使用。 一、事件修饰符 在Vue.js的事件处理程序中使用v-指令中的v-on指令，是用来进行事件绑定的，也可用@来代替。Vue.js也为v-on指令提供了对应的一些事件修饰符，主要是通过由点”.”表示的指令后缀，来调用修饰符。v-on指令常用的修饰符如下所示： .stop — 调用 ev
vue中的事件修饰符，以v-on的prevent阻止默认事件修饰符为例
weixin_45586870的博客
02-07 2068
一、简介 事件修饰符处理了许多DOM事件的细节，帮助我们快速的完成一些事件动作。 例如v-on的修饰符有以下： .stop - 调用 event.stopPropagation()。 .prevent - 调用 event.preventDefault()。 .capture - 添加事件侦听器时使用 capture 模式。 .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。 .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。 .native - 监听组件根
Vue.js学习笔记之修饰符详解
12-09
在本篇学习笔记中，我们将深入探讨Vue.js中两个重要指令——`v-model`和`v-on`的修饰符，这些修饰符可以增强它们的功能，提供更灵活的使用方式。 **一、v-model的修饰符** 1. **.lazy**： `.lazy` 修饰符改变了`v...
vue事件修饰符和按键修饰符用法总结
08-29
本篇文章主要介绍了 Vue 事件修饰符和按键修饰符的用法总结，旨在帮助开发者更好地理解和使用这些修饰符，以提高开发效率和代码质量。 一、事件修饰符 事件修饰符是 Vue.js 提供的一种机制，用于简化事件处理程序...
详解vue中v-on事件监听指令的基本用法
10-15
Vue.js 是一款流行的前端JavaScript框架，它提供了许多方便的特性，包括`v-on`事件监听指令，用于处理用户交互。本文将深入解析`v-on`的基本用法，并通过实例演示如何在Vue应用中有效地监听和响应用户事件。 一、...
浅谈Vue.js中的v-on(事件处理)
10-19
这些修饰符可以通过点号"."后跟修饰符名的方式添加到v-on指令后面，例如： ```html 点击 ``` 5. **键值修饰符** 对于键盘事件，Vue.js提供了一些键值修饰符，如`.enter`、`.tab`、`.delete`（注意区分英文和...
探索 v-on 之奥秘二：事件及各类修饰符的深度剖析与案例展示
最新发布
06-21
Vue的鼠标按键修饰符允许开发者针对左键、右键等特定鼠标行为编写逻辑。按键修饰符则用于监听特定键盘按键事件，如回车键、删除键等，还支持组合键如Ctrl+C。系统修饰符则用于控制事件的行为，如.prevent阻止默认...
v-on的基本使用，参数传递以及修饰词
bh510055858的博客
05-25 159
v-on是事件绑定也可以直接写@ v-on:click="" @click="" <body> <div id="app"> <h2>{{count}}</h2> <button type="button" @click="add()">+</button> <button type="button" @click="sub()">-</button> &l
v-on指令及简写形式、用this访问数据、事件修饰符（.prevent、.stop、.capture、.once、.self）、按键修饰符@keyup的使用
qq_57423665的博客
04-18 598
1.v-on事件绑定指令vue提供了v-on事件绑定指令，用来辅助程序员为DOM元素绑定事件监听。原生DOM对象有onclick. oninput. onkeyup等原生事件,替换为vue的事件绑定形式后， 分别为: v-on:click、v-on:input、 v-on:keyup。在事件处理函数中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。因此,vue提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常用的5个事件
v-on的使用及修饰符的用法
⭐星星的博客
06-09 313
v-on的使用及修饰符的用法 <input type="button" value="按钮" @click="alert" /> // var vm = new Vue({ el:'#ctr-01', methods:{ alert:function(){ alert('你好吗？') } } }) @是v-on的简写 后面紧跟事件名称，...
Vue中常见的修饰符
是秃子总会发光
11-28 899
Vue中常见的修饰符：事件修饰符、按键修饰符、v-model修饰符
vue v-on扩展，钩子函数，模板
欧气满满大顺顺的博客
01-05 1902
一 1、v-on 1、基本用法 v-on 指令用于给页面元素绑定事件。 语法： v-on:事件名=“js 片段或函数名” 示例： <div id="app"> <!--事件中直接写js 片段--> <button v-on:click="num++">点赞</button> <!--事件指定一个回调函数，必须是Vue 实例中定义的函数--> <button v-on:click="decrement">取消</button>
Vue学习记录-v-on参数传递，修饰符
orangecloudy的博客
04-20 156
<div id="app"> {{message}} <!-- @==v-on: --> <!-- 事件调用无参数 --> <button @click="btn1Click()">1</button> <button @click="btn1Click">1</button> <...
Vue · v-on和事件修饰符（.stop .prevent .capture .self .once）
chez-moi
03-12 773
一、事件修饰符 .stop 阻止冒泡 .prevent 组织默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事件在该元素本身（比如不是子元素）触发时触发回调 .once 事件只触发一次 二、事件修饰符的使用 （1）.stop 在没使用.stop时，默认是冒泡机制 .stop阻止所有冒泡行为 【代码实现-无.stop】 <!DOCTY...
vue - 事件监听（v-on的使用方法及修饰符）
asfcyg的博客
06-21 627
一. v-on基本用法 v-on语法糖：@ data(){ counter:0 }, methods(){ add(){ this.counter++; } } <button @click='add'>+</button>
Vue自学：v-on的修饰符使用
qq_25741071的博客
04-02 104
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <scri
v-on 修饰符
05-29
常见的v-on修饰符包括： - .stop：阻止事件冒泡传播； - .prevent：阻止事件的默认行为； - .capture：使用事件捕获模式，即从外层元素开始处理事件； - .self：只在事件触发元素自身处理事件，不包括子元素； - ....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值