开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

vue.js v-on 例子

v-on 是 Vue.js 中的一个指令，用于监听 DOM 事件并在触发时执行 JavaScript 代码。以下是一个简单的 v-on 使用示例：

基础概念

v-on 指令可以监听各种 DOM 事件，如点击（click）、输入（input）、提交（submit）等。当指定的事件被触发时，Vue 会执行与之关联的方法。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue v-on Example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
</head>
<body>
    <div id="app">
        <!-- 使用 v-on 监听点击事件 -->
        <button v-on:click="sayHello">Say Hello</button>
        <!-- 简写形式 -->
        <button @click="sayHello">Say Hello (Short Hand)</button>
    </div>

    <script>
        const app = Vue.createApp({
            methods: {
                sayHello() {
                    alert('Hello!');
                }
            }
        });

        app.mount('#app');
    </script>
</body>
</html>

优势

简洁性：v-on 提供了一种简洁的方式来绑定事件处理器。
响应式：当数据变化时，Vue 会自动更新 DOM，确保事件处理器始终与最新的数据保持同步。
可维护性：将事件处理逻辑封装在 Vue 实例的方法中，使得代码更易于维护和理解。

类型

原生事件监听：如 click, input, submit 等。
自定义事件：可以在组件之间通过自定义事件进行通信。

应用场景

表单交互：监听输入框的 input 事件来实时更新数据。
导航控制：监听按钮的 click 事件来切换页面或执行特定操作。
组件通信：通过自定义事件实现父子组件间的通信。

可能遇到的问题及解决方法

问题1：事件处理器未被触发

原因：可能是由于选择器错误、事件名称拼写错误或 Vue 实例未正确挂载。

解决方法：

确保选择器正确指向了目标元素。
检查事件名称是否拼写正确。
确认 Vue 实例已正确挂载到 DOM 上。

问题2：事件处理器执行了多次

原因：可能是因为事件处理器被多次绑定到同一个元素上。

解决方法：

使用 .once 修饰符确保事件处理器只执行一次。
在组件销毁时移除事件监听器。

示例代码（解决事件处理器执行多次的问题）

methods: {
    sayHello() {
        alert('Hello!');
    }
},
mounted() {
    // 使用原生 JavaScript 移除事件监听器
    this.$el.removeEventListener('click', this.sayHello);
}

通过上述示例和解释，你应该能够理解 v-on 的基本用法及其在不同场景下的应用。如果遇到具体问题，可以根据上述解决方法进行排查和修复。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

vuejs之v-on小例子之实现购买数量的增加和减少

先看代码： vue.js">

9252 0

v-on

vue中我们可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码 v-on:action="",双引号里面相当于一个表达式,我们可以写函数名调用函数也可以直接对...} } }) 1. v-on..."> {{age}} v-on...DOCTYPE html> v-on:keydown...DOCTYPE html> v-on:mouseover <style

1K2 0

vuejs之v-on

一、看一个例子： vue.js"> v-on:click="doIt"> v-on简写或者双击事件，会： ? 点击西红柿炒鸡蛋： ? 说明：v-on可以为标签绑定事件，语法：v-on:事件名="方法名" ，可以使用@事件名="方法名"进行简写。...二、使用带参数的函数和事件修饰符 vue.js">v-on时，参数保持一致即可。在输入框中随便输入什么，按下回车键： ? 说明：v-on还可以使用各种各样的事件，具体可参考文档。

6112 0

vue v-on

image.png param image.png 多个事件 image.png image.png image.png v-html {{{}}} imag...

3512 0

事件监听 v-on

事件监听 v-on 在前端开发中，我们需要经常和用于交互。这个时候，我们就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等在Vue中如何监听事件呢？...使用v-on指令 v-on介绍作用：绑定事件监听器缩写：@ 预期：Function | Inline Statement | Object 参数：event 当通过methods中定义方法，以供@click

1.5K4 0

vue之v-on补充

/js/vue.js"> const app = new Vue({ el: '#app', methods:

2562 0

Vue.js 数据绑定语法详解

而且在构建单页应用时，Vue.js 会管理所有的模板，此时 v- 前缀也没那么重要了。因此Vue.js 为两个最常用的指令 v-bind 和 v-on 提供特别的缩写。...另一个例子是 v-on 指令，它用于监听 DOM 事件： v-on:click="doSomething"> 这里参数是被监听的事件的名字。我们也会详细说明事件绑定。...这个例子只是为了演示语法。后面我们将看到修饰符更多的实践用法。 5、缩写是哪2个最常用指令的缩写？ v-bind v-on v- 前缀是一种标识模板中特定的 Vue 特性的视觉暗示。...而且在构建单页应用时，Vue.js 会管理所有的模板，此时 v- 前缀也没那么重要了。因此Vue.js 为两个最常用的指令 v-bind 和 v-on 提供特别的缩写： a、v-bind 缩写例子是 v-on 指令，它用于监听 DOM 事件： v-on:click="doSomething"> 这里参数是被监听的事件的名字。我们也会详细说明事件绑定。

3.4K2 0

Vue.JS基础以及本地指令：v-text，v-html，v-on，v-show

这几天学了点Django，感觉js也得接触下了，于是看到学习站上有一套黑马程序员的4小时快速入门Vue.js的教程，发现Vue.Js似乎挺容易的。...Vue.Js官方文档：https://cn.vuejs.org/v2/guide/ 第一个指令：v-text：设置标签的文本值(textContent) 首先如果要在网页中使用Vue.Js的话就得先引用...第三个指令：v-on：为元素绑定事件（click，dblclick，monseenter）使用方法： v-on:事件名="方法"> var app = new Vue(...@即可然后这里就只演示一下click的事件 v-on:click

1.4K1 0

Vue.js-列表渲染原

var app = new Vue({ el: "#app-7", }) 官网例子...todos"> {{todo.title}} v-on...({ id: this.nexttodoid++, }) 不能改成id: ++this.nexttodoid，++在前面是 //先自加再赋值，官网例子...实例的方法是在todos新增一项，并且把input清空 //2、父模板数据不能直接传递到子组件模板，需要在子组件中定义props属性像props:["title"]，父模板绑定title并赋值，因为例子中的...包含一组观察数组的变异方法，所以它们也将会触发视图更新，这些方法如下： push() pop() shift() unshift() splice() sort() reverse() push的用法例子

2.8K2 0

轻松理解 Vue.js 数据绑定：让 v-model 帮你搞定双向数据绑定

在这个例子中，message 是我们的数据，v-bind:title 就是把 message 绑定到 div 的 title 属性上。... 输入的内容是：{{ message }} 在这个例子中，v-model 把 input 的值和...其实，v-model 就是 v-bind 和 v-on 的语法糖。...v-model="message" 相当于 v-bind:value="message" v-on:input="message = $event.target.value"。...用 v-on 监听 input 事件，当输入内容时，把 input 的值赋给 message，实现了视图到数据的绑定。 5. 结束语通过上面的介绍，相信你对 Vue.js 的数据绑定有了更深的理解。

2481 0

Vue的基本组件1(show,bind,on,if)

Vue基础简介：本文旨在用最短的篇幅和例子，代入大家入门vue,也是本博主的一个学习记录，本文主要介绍的组件有，v-text,v-html,v-on,v-if。入门案例学习代码： <!...methods:{ } }); v-on...content="IE=edge"> v-on...{number}} v-on:click="changenumber">...content="IE=edge"> v-on

631 0

前端攻坚战

三大新框架：Angular.js、React.js、Vue.js。今天我们来磕这个最常用，影响极广的框架：Vue.js。...Vue.js可以作为一个js库来使用，也可以用它全套的工具来构建系统界面，这些可以根据项目的需要灵活选择，所以说，Vue.js是一套构建用户界面的渐进式框架。...上面的例子，通过一个方法，改变 data 对象中的属性，使视图中的值随之变化，演示了响应式。 2.模版语法模版语法的作用就是获取数据，并在 HTML 页面中进行展示。...常见的指令有 v-bind、 v-if、 v-on 和 v-for。下面举两个例子进行演示即可： v-on 事件这两个指令因为经常的使用，所以提供了简写的方式： <!

1.2K1 0

Vue.js 极简教程jsfiddle Hello World 例子：参考资料：

https://unpkg.com/vue@2.5.3/dist/vue.js 来，直接开始：创建一个 .html 文件，然后通过如下方式引入 Vue： jsfiddle Hello World 例子： https://jsfiddle.net/chrisvfritz/50wL7mdz/ Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。...如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。...当然了，在使用Vue.js时，你也可以结合其他库一起使用，比如jQuery。

1.7K1 0

Vue模板语法原

> 同样适用于布尔类特性 Button 使用JavaScript表达式 Vue.js...v-bind指令可以用于响应式的更新html属性在这里href是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定在一起另一个例子是...v-on指令，它用于监听DOM事件 v-on:click="doSomething"> 修饰符修饰符Modifiers是以点 ....="onSubmit"> 过滤器 Vue.js允许自定义过滤器，可被用作一些常见的文本格式化，过滤器可以用在2个地方,mustache 差值和v-bind 表达式过滤器函数总接收表达式的值作为第一个参数，在这个例子中capitalize过滤器函数将会接收

6582 0

简单介绍一下vue2.0

install $ npm run build 如果只是先学习一下，那推荐用npm安装最新的稳定版本： $ npm install vue Hello World vue的使用比较简单，我们可以看几个小例子...，例如来个hello vue.js，通过构造函数创建一个实例： var vm = new Vue({ el: '#demo', data: { msg:'Hello vue.js... { { msg } } 为了让用户与我们的应用程序进行交互，可以通过使用v-on指令，处理用户输入。...在vue.js中**v-**作为指令的前缀,例如v-on(事件)、v-for(循环)、v-bind(绑定属性)等。...html： {{ msg }} v-on:click="reverseMessage">Reverse Message</button

7142 0

1.初识Vuejs

认识Vue.js Vue.js是一套用于构建用户界面的**渐进式 JavaScript 框架**。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。...Vue.js中DOM元素是响应式的，是数据驱动DOM操作，也就是说数据变化出发DOM变化，只需要关心数据，不需要关心DOM。...使用方式下载脚本项目引入文件 CDN 对于制作原型或学习，你可以这样使用最新版本： vue.js...这些被包裹过的方法包括： push() pop() shift() unshift() splice() sort() reverse() 你可以打开控制台，然后对前面例子的 items 数组尝试调用变更方法...为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

2K2 0

前端MVC Vue2学习总结（三）——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定

有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效，不需要在属性前使用this {{ var a = 1 }} v-on:click.once="doThis"> 1.3、过滤器 Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。...-- 缩写 --> 1.4.2、v-on 缩写 v-on:click="doSomething"> 例子 Original message: "{{ message }}" Computed reversed message...思考下面例子： {{ fullName }} var vm = new Vue({ el: '#demo', data: { firstName

4.8K10 0

30. Vue使用JavaScript 钩子函数实现半场动画

" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave..." v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled" > <!...❞ 一个使用 Velocity.js 的简单例子： vue.js库 --> vue.js"> vue.js库 --> vue.js"> <!

1.5K2 0

vue白话文，因为vue很重要

一、了解 Vue.js 1.1 Vue.js是什么？ Vue.js是一套用于构建用户界面的渐进式框架。Vue.js通过简单的API提供高效的数据绑定和灵活的组件系统。...点击进入之后是一个vue.js源码文件，直接保存下来即可。 ? 2.3 第一个Vue实例： ? 1、代码解读在头通过引入vue.js文件。...用模板的方式演示上面的例子，以此说明挂载点内的内容为template： ? 效果：自动输出 “你好，hello vue！” Vue实例：自动根据el，template，data数据生成最终的效果。...总结： v-html 输出标签中的内容 v-text输出结果为带标签的 2、监听事件指令 v-on v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 ? ?...v-model这部分的内容，可以直接看vue官网的例子。详细，有利于初学者理解。 5、计算属性 ? 效果：未输入数字时：如图 ? 当你输入值时：如图 ?

1.6K3 0

Vue 指令之v-on的使用

v-on 指令用于监听 DOM 事件 1. v-on 基本使用 ---- v-on:click="test">测试 ...script> let vm = new Vue({ el: '#app', methods: { test: function() { console.log(123) }, } }) v-on...可缩写为 @ v-on:click="test">测试测试 2....修饰符 ---- v-on:click="go2('222')"> v-on:click.stop="go('111')">点我 <!

3033 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭