v-on相关知识

最新推荐文章于 2024-07-25 07:30:00 发布
最新推荐文章于 2024-07-25 07:30:00 发布
阅读量54 收藏
点赞数
分类专栏： vue学习笔记 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47888212/article/details/128809994
版权

v-on的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on方法处理器</title>
</head>
<body>
    <div id="con">
        <h2>当前计数：{{counter}}</h2>
        <!-- <button v-on:click="counter--">-</button>
        <button v-on:click="counter++">+</button> -->
        <!-- <button v-on:click="sub">-</button>
        <button v-on:click="add">+</button> -->
        <!-- 语法糖 -->
        <button @click="sub">-</button>
        <button @click="add">+</button>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el: "#con",
        data: {
            counter:0
        },
        methods: {
            add: function(){
                // app.counter++
                this.counter++
            },
            sub: function(){
                // app.counter--
                this.counter--
            }
        }
    });

</script>
</html>

v-on的修饰符

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
    <div id="app">
        <div @click="divClick">
            <button @click="btnClick">按钮1.1</button>
            <!-- .stop -->
            <button @click.stop="btnClick">按钮1.2</button>
        </div>

        <form action="https://www.baidu.com/">
            <!--点击完后跳转-->
            <input type="submit" value="提交2.1" @click="submitClick">
            <!-- .prevent 点击完后不跳转-->
            <input type="submit" value="提交2.2" @click.prevent="submitClick">
        </form>

        <input type="text" @keyup="keyUp">
        <br>
        <!-- 监听某个键 -->
        <input type="text" @keyup.a="keyUp">
        <br>
        <!-- .once只有第一次点击有用 -->
        <button @click.once="btnClick1">按钮</button>
    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: "sb"
            },
            methods: {
                divClick: function(){
                    alert("div");
                },
                btnClick: function(){
                    alert("button");
                },
                submitClick: function(){
                    alert("submit");
                },
                keyUp: function(){
                    alert("keyWord");
                },
                btnClick1(){
                    alert("出来了");
                }
            },
        })
    </script>
</body>
</html>

v-on的参数问题

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 事件调用的方法没有参数 -->
        <button @click="btnClick">按钮1</button>
        <button @click="btnClick()">按钮2</button>
        <!-- 在有参数的方法中，如果不带括号 -->
        <button @click="btnClick1">按钮3</button>
        <button @click="btnClick1()">按钮4</button>
        <button @click="btnClick1(123)">按钮5</button>
        <button @click="btnClick1('abc')">按钮6</button>
        <button @click="btnClick2('abc')">按钮7</button>
        <button @click="btnClick2('abc', $event)">按钮8</button>
    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
               content: "你好呀"
            },
            methods: {
                btnClick: function(){
                    alert(this.content);
                },
                btnClick1: function(abc){
                    alert(abc);
                },
                btnClick2(a, b){
                    console.log("++++++"+a+b)
                } 

            },
        })
    </script>
</body>
</html>
FGGIT
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue3知识点2. 常用指令v-model :value v-if v-show v-for v-bind: :class :style v-on @
yangyangdt的博客
12-19 9168
vue3基础知识点2 前言： 上一章已经学会如何创建vue实例了，这一章是vue一些的基础知识点，包括模板语言，以及常见的一些命令。最底部有运行好的全部代码链接。
详解vue.js的事件处理器v-on:click
10-19
本文将深入探讨Vue.js的事件处理器`v-on:click`，它是如何工作的，以及如何在实际项目中有效利用。 ### 1. `v-on`指令 `v-on`是Vue中的一个指令，用于监听DOM事件。它允许你将Vue实例的方法绑定到特定的DOM元素上...
Vue--事件（v-on）
是吃货不是贝爷的博客
05-18 1107
事件目录v-on计数器练习事件修饰符常用其他拓展键盘事件Vue常见的按键别名系统修饰键代码 v-on 事件的基本使用： 1.v-on:xxx或@xxx，绑定事件，xxx是事件名（如v-on:click以及@click） 2.事件需要配置在methods对象中，并且相应的函数在vm里，而且this也就是vm。 3.methods里面的函数不能用箭头函数（前面也有讲过，箭头函数没有this），这样this就会向上找到windows 4.@click=“demo($event, xx)” 其中$event为点击
Vue简单学习之关于 html 代码标签属性 v-bind 和v-on 的使用
无根的浮萍
03-05 858
v-bind 是vue 绑定属性的指令 &amp;lt;input type=&quot;button&quot; name=&quot;按钮&quot; value=&quot;按钮&quot; v-bind:title=&quot;mytitle + '新加的'&quot;&amp;gt; 注意： v-bind 可以简写为 :要绑定的属性，v-bind 中可以写合法的js 表达式 &amp;lt;input
Vue知识点总结(4)——v-on（超级详细）
CreatorRay的博客
12-12 1142
v-on指令的作用其实就是绑定事件。 事件是JavaScript的灵魂，事件驱动着JavaScript程序的执行。 vue为我们提供了v-on指令用于绑定事件。 <button v-on:click="add">加分</button> <button @click="reduce">减分</button> 这是两种基本的语法格式。 其中的add和reduce必须在vue实例中的methods中提前声明好。 vue语法具有很强的灵活性，其实我们可以将事件写成动
Vue中v-bind,v-on,v-model都是干什么的(区别以及详细用法)?自制动图,一看就懂 ∠( °ω°)／ 前端知识
热门推荐
寻觅的博客
06-20 2万+
文章目录区别详细用法属性绑定(`v-bind:`或`:`)单值绑定多值绑定绑定style双向绑定(`v-model`)元素绑定修饰符 区别 v-bind:属性绑定(简写:), v-on:事件绑定(简写@), v-model:双向绑定(简写v-model,看下方的代码你就知道简写在哪了)。 v-bind与v-model都是绑定vue中data中的属性的,他们最主要的区别是v-bind的绑定只是单向的,他会将data中的数据投影到绑定的地方,在被绑定的地方对数据修改时,data中的原始数据是不会改变的,而v-m
vue中v-on指令的使用之Vue知识点归纳(四)
代码小疯子
12-01 953
本文章中描述 v-on 指令的基本使用 点击按钮动态修改数据 1 简述 vue 中 v-on 指令简单点来讲，是用来给元素设置绑定事件。 格式 v-on:事件名称="方法名称" 这里的事件名称如：click 单击，dblclick 双击等等 这里的方法名称随机定义，指的是触发事件后所调用的方法 这是定义的方法名称，在 vue 实例中的 methods 属性中实现。 <!DOCTYPE...
Vue源码阅读（24）：v-on 指令的源码解析
f18855666661的博客
08-30 2424
今天讲讲 v-on 指令的底层实现原理。在 Vue 中，v-on 指令有两种用法，第一种是将 v-on 指令使用在自定义组件上，例如：<my-component v-on:myEvent="doSomething"></my-component>，使用 v-on 指令监听了组件的 myEvent 事件，回调函数是doSomething，当在组件中执行 this.$emit('myEvent') 时，会触发执行 doSomething 函数，有没有发现这和我上一篇文章中的 vm.$o.
Vue知识整理，让你快速入门Vue.js：03_4.本地应用：v-on指令（事件绑定）、v-on指令简写、methods方法定义、this关键字修改数据
鲁迷那的专栏—坚持实践后再写出来！
03-22 765
目录 一、v-on指令语法介绍 1、v-on指令的作用 2、那么方法写在哪里呢？ 3、如何绑定事件呢？ 4、一种更简单的写法：把v-on 替换成 @ 5、实例测试验证 （1）实例代码 （2）效果展示 二、this关键字，修改数据 1、不用再操作dom元素 2、this关键字 3、实例测试验证 （1）实例代码 （2）效果展示 三、内容-总结 上一篇文章我们介绍了v-......
vue中的$on，$emit，v-on 三者关系
weixin_43798490的博客
11-26 2万+
on，on，on，emit，v-on 三者关系 每个 Vue 实例都实现了事件接口： 使用 $on(eventName) 监听事件 使用 emit(eventName)触发事件如果把Vue看成一个家庭（相当于一个单独的components)，女主人一直在家里指派(emit(eventName) 触发事件 如果把Vue看成一个家庭（相当于一个单独的components)，女主人一直在家里指派(emi...
Web前端最全Vue 常用内置指令（v-if、v-for、v-bind、v-on），Web前端高级面试题汇总
2401_84617431的博客
05-16 707
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
10-17
Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性。这篇文章主要介绍了Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on 的相关知识,需要的朋友可以参考下
浅谈Vue.js中的v-on(事件处理)
10-19
本文将深入探讨Vue.js中的v-on指令，它是用来绑定DOM事件并执行相应JavaScript代码的关键工具。 1. **v-on指令的使用** v-on指令用于监听DOM事件，例如点击、输入等，并在事件触发时执行指定的JavaScript代码。在...
详解vue中v-on事件监听指令的基本用法
11-20
了解了这些基本知识后，你就能熟练地在Vue应用中使用`v-on`指令来响应用户交互，构建出更加动态和交互丰富的界面。在实际开发中，还可以结合其他Vue特性，如计算属性、指令修饰符等，进一步增强事件处理的能力。
8145V-V300R018C10SPC100-ONT-CN 和 ONT组播配置工具最新.rar
12-10
5. **ONT配置**：ONT设备上同样需要配置组播相关参数，如启用IGMP功能、设置组播VLAN、定义组播服务端口等。 6. **QoS**：为了保证组播服务质量，需要合理配置队列调度和带宽分配，确保高优先级的组播流量能顺利...
详解Vue中nextTick的原理与作用
fengjing81的专栏
07-24 661
Vue中的nextTick是一个非常重要的API，它允许开发者延迟回调函数的执行直到下次DOM更新循环之后。这一机制在Vue开发中非常有用，特别是在处理DOM更新和异步操作时。下面将详细解释nextTick的原理与作用。
兼容浏览器，切换PC端显示PC端，切换H5端显示H5端
L_C_sunny的博客
07-24 289
浏览器H5端 (在浏览器H5端，切换PC端兼容显示PC端页面)PC端 （在浏览器PC端，切换H5端兼容显示H5端页面）兼容浏览器，切换PC端显示PC端，切换H5端显示H5端。中获取是否是那个端的。
vue3 reactive原理（二）-代理Set和Map及ref原理
最新发布
KEEP CODING
07-25 1203
Set和Map类型的数据也属于异质对象，它们有特定的属性和方法用来操作自身。因此创建代理时，针对特殊的方法需要特殊的对待。 Vue 的ref 是基于reactive函数实现的，它在其基础上，增加了基本类型的响应性、解决reactive在解构时丢失响应性的问题及在模版字面量中自动脱落Ref.
common-intellisense：助力TinyVue 组件书写体验更丝滑
OpenTiny的博客
07-24 1121
本文由体验技术团队Kagol原创~前两天，common-intellisense 开源项目的作者 Simon-He95 在 VueConf 2024 群里发了一个重磅消息：common-intellisense 支持 TinyVue 组件库啦！common-intellisense 插件能够提供超级强大的智能提示功能，包含属性(props)、事件(events)、插槽(slots)以及对应的注释和类型，实例上的方法(methods)等等，支持多个UI库，让你的开发效率更上一层楼。
v-on v-bind v-model的区别
09-02
在Vue.js中，v-on、v-bind和v-model是三个不同的指令。 v-on是Vue.js的事件指令，用于监听DOM事件并触发相应的方法。它可以用于绑定事件处理器，比如点击事件、鼠标移入移出事件等。通过使用v-on指令，我们可以在模板中绑定事件，并在触发事件时执行相应的方法。 v-bind是Vue.js的属性绑定指令，用于将数据绑定到HTML元素的属性上。通过使用v-bind，我们可以将Vue实例中的数据动态地绑定到HTML元素的属性上，从而实现数据的动态更新。 v-model是Vue.js的双向绑定指令，用于在表单元素和Vue实例中的数据之间建立双向绑定关系。它可以实现表单元素的数据绑定和同步，使得数据的变化能够自动反映到表单元素中，同时，用户在表单元素中输入的数据也能够实时地同步到Vue实例中。 综上所述，v-on是用于绑定事件的指令，v-bind是用于绑定属性的指令，而v-model是用于实现双向绑定的指令。它们各自有不同的用途和功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Vue中v-bind,v-on,v-model都是干什么的(区别以及详细用法)?自制动图,一看就懂 ∠( °ω°)／ 前端知识](https://blog.csdn.net/qq_39611230/article/details/106854178)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [自学Vue必看的v-model知识总结(超详细)](https://download.csdn.net/download/weixin_38590456/14045058)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

FGGIT

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值