脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue.js中v-on指令用法

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

 更新时间：2022年03月14日 08:53:56   作者：.NET开发菜鸟  
这篇文章介绍了Vue.js中v-on指令的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

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>

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

您可能感兴趣的文章:

相关文章

  • 使用Element-UI的el-tabs组件,浏览器卡住了的问题及解决

    使用Element-UI的el-tabs组件,浏览器卡住了的问题及解决

    这篇文章主要介绍了使用Element-UI的el-tabs组件,浏览器卡住了的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • 详解vue中v-model和v-bind绑定数据的异同

    详解vue中v-model和v-bind绑定数据的异同

    这篇文章主要介绍了vue中v-model和v-bind绑定数据的异同,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-08-08
  • vue实现页面添加水印效果

    vue实现页面添加水印效果

    这篇文章主要为大家详细介绍了vue实现页面添加水印效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Vue echarts封装组件需求分析与实现

    Vue echarts封装组件需求分析与实现

    在平常的项目中,echarts图表我们也是使用的非常多的,通常我们从后端拿到数据,需要在图表上动态的进行呈现,接下来我们就模拟从后端获取数据然后进行呈现的方法，这篇文章主要介绍了Vue echarts封装组件需求分析与实现
    2022-10-10
  • vue如何监听浏览器主动刷新

    vue如何监听浏览器主动刷新

    这篇文章主要介绍了vue如何监听浏览器主动刷新，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • 详解vue的双向绑定原理及实现

    详解vue的双向绑定原理及实现

    这篇文章主要介绍了vue双向绑定原理及实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • Vue ElementUI中el-table表格嵌套样式问题小结

    Vue ElementUI中el-table表格嵌套样式问题小结

    这篇文章主要介绍了Vue ElementUI中el-table表格嵌套样式问题小结,两个表格嵌套,当父表格有children数组时子表格才展示,对Vue ElementUI中el-table表格嵌套样式问题感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • vue-cli3搭建项目的详细步骤

    vue-cli3搭建项目的详细步骤

    这篇文章主要介绍了vue-cli3搭建项目的详细步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 在Vue.js中使用Mixins的方法

    在Vue.js中使用Mixins的方法

    本篇文章主要介绍了在Vue.js中使用Mixins的方法，Vue的Mixins是非常实用的编程方式，可以使代码变得容易理解，有兴趣的一起来了解一下
    2017-09-09
  • 说说Vue.js中的functional函数化组件的使用

    说说Vue.js中的functional函数化组件的使用

    这篇文章主要介绍了说说Vue.js中的functional函数化组件的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02

最新评论