Vue.js中v-on指令的用法介绍

2024-11-27 01:07:34

v-on指令

v-on指令在Vue.js中用来绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联预计，如果没有修饰符也可以省略。

用在普通元素上时，只能监听原生DOM事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

用法：

v-on:事件类型="函数体"

例如：点击按钮的时候执行play事件

<button v-on:click="play">点击事件</button>

注意：

在使用v-on指令绑定事件的时候，如果要执行的是无参的函数，函数体可以加括号也可以不加括号，下面的两种写法是等价的：

<button v-on:click="play()">点击事件</button>

等同于

<button v-on:click="play">点击事件</button>

但是，如果要传递参数，则必须加括号，例如：

<button v-on:click="play(item)">点击事件</button>

上面的例子是给play函数传递item参数。

注意：v-on的缩写@

上面的代码等同于下面的代码：

<button @click="play">点击事件</button>

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<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">
    <title>v-on指令</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 构建vue实例
           new Vue({
               el:"#my",
               data:{
                   age:30
               },
               // 方法
               methods:{
                   //无参
                   play:function(){
                        this.age=40;
                   },
                   // 有参
                   playWithPara:function(para){
                         this.age=para;
                   }
               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
         <h1>年龄:{{age}}</h1>
         <button @click="age = 20">设置年龄为20</button>
         <button @click="play">设置年龄为40</button>
         <button @click="playWithPara(50)">根据参数设置年龄</button>
    </div>
</body>
</html>

一个按钮也可以同时绑定多个事件，例如：

<button v-on="{mouseover:onOver,mouseout:onOut}">绑定多个事件</button>

上面我们通过对象的方式绑定多个事件，对象中的键是事件的名称，值是methods中的成员属性方法

对应的方法：

<!DOCTYPE html>
<html lang="en">
<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">
    <title>v-on指令</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 构建vue实例
           new Vue({
               el:"#my",
               data:{
                   age:30
               },
               // 方法
               methods:{
                   //无参
                   play:function(){
                        this.age=40;
                   },
                   // 有参
                   playWithPara:function(para){
                         this.age=para;
                   },
                   onOver:function(){
                      var current=document.getElementById("mouse");
                      current.innerText="鼠标移入";
                   },
                   onOut:function(){
                      var current=document.getElementById("mouse");
                      current.innerText="鼠标移出";
                   }
               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
         <h1>年龄:{{age}}</h1>
         <h1 id="mouse">当前鼠标动作</h1>
         <button @click="age = 20">设置年龄为20</button>
         <button @click="play">设置年龄为40</button>
         <button @click="playWithPara(50)">根据参数设置年龄</button>

         <button v-on="{mouseover:onOver,mouseout:onOut}">绑定多个事件</button>
    </div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

浅谈Vue.js 中的 v-on 事件指令的使用

v-on 事件指令用于绑定事件. 1 基础用法 v-on 指令绑定事件后,就会监听相应的事件. html: <div id="app"> <h3>已点击 {{count}} 次</h3> <button @click="count++">点我</button> </div> 注意: @click 是 v-on:click 的简写形式, @ 即表示 v-on: . js: <script&g
聊聊vue 中的v-on参数问题

vue中v-on:clock的使用最近在学习vue.js框架.记下其中遇到的一些问题,以便以后查阅. 首先,这是一个页面(为了便于观察,将各个标签都一一着色): 其中html代码: <div class="groupbody "> <ul class="list "> <li v-for="cell in todo.groupbody " class="pagegroupcell " v-on:
vue v-on监听事件详解

在html或jsp页面中我们总能碰到监听DOM事件来触发javaScript代码,下面我们就简单聊聊Vue.js中的监听事件是怎么处理的. 在vue.js中监听事件是通过v-on指令来实现的,先看一下简单的监听事件代码. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <scrip
VueJS事件处理器v-on的使用方法

本文介绍了VueJS事件处理器v-on的使用方法,分享给大家,具体如下: 事件监听可以使用 v-on 指令. v-on:click表达式 HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.bootc
vue v-on:click传递动态参数的步骤

最近项目中要为一个循环列表动态传送当前点击列的数据,查了很久资料也没有一个完美的解决方案, 新手只能用vue的事件处理器与jquery的选择器做了一个不伦不类的方案,居然也能解决这个问题,作此记录留待以后会有更好的方法解决这个事情需求:根据每列传递的参数,决定弹窗后面是积分够了去直接购买还是不够需要去转换二.页面代码[无法可传的参数,我把它放进了一个自定义标签date-id] <div class="ticket-main"> <a href="java
对vue中v-on绑定自定事件的实例讲解

关于官网vue中v-on绑定自定义事件的个人理解对官网实例进行了一些修改,如下图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-on绑定自定义事件</title> <script src="vue.js"></script> </head>
详解vue中v-on事件监听指令的基本用法

一.本节说明我们在开发过程中经常需要监听用户的输入,比如:用户的点击事件.拖拽事件.键盘事件等等.这就需要用到我们下面要学习的内容v-on指令. 我们通过一个简单的计数器的例子,来讲解v-on指令的使用. 二. 怎么做定义数据counter,用于表示计数器数字,初始值设置为0 v-on:click 表示当发生点击事件的时候,触发等号里面的表达式或者函数表达式counter++和counter--分别实现计数器数值的加1和减1操作语法糖:我们可以将v-on:click简写为@click 三
详解vue.js的事件处理器v-on:click

用 v-on 指令监听 DOM 事件注意:HTML5中不能使用v-on,换为@ (1)html代码: <div id="example"> <button v-on:click="greet">Greet</button> // 或者 <button @click="greet">Greet</button> </div> (2)js代码: var vm = new Vue
关于Vue v-on指令的使用

目录 1.监听事件 2.传入event参数 3.事件修饰符案例1:阻止单击事件继续传播案例2:提交事件不再重载页面 1.监听事件可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码.事件代码可以直接放到v-on后面,也可以写成一个函数. 示例代码如下: <div id="app"> <p>{{counter}}</p> <button @click="counter += 1">
浅谈Vue.js 组件中的v-on绑定自定义事件理解

每个 Vue 实例都实现了事件接口(Events interface),即: 使用 $on(eventName) 监听事件使用 $emit(eventName) 触发事件 Vue的事件系统分离自浏览器的EventTarget API.尽管它们的运行类似,但是$on 和 $emit 不是addEventListener 和 dispatchEvent 的别名. 另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件. 下面是一个文档上面的例子: 2017年4月11日更新 <d
浅谈Vue.js中的v-on(事件处理)

Vue.js的事件处理监听事件我们可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码. <div class="box"> {{msg}} <input type="button" value="按钮" v-on:click="msg+=1"/> </div> var vm = new Vue({ el:".box", data:{ msg

Vue.js中v-on指令的用法介绍

v-on指令

注意：

注意：v-on的缩写@

相关推荐

随机推荐