这篇文章给大家介绍的文章内容是关于vue中v-on指令的简单事件绑定的分析（附代码），有很好的参考价值，希望可以帮助到有需要的朋友。

前言

在JavaScript中任何一个DOM元素都有其自身存在的事件对象，事件对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置和鼠标按钮的状态等。事件通常与函数结合使用，函数不会在事件发生前被执行。在JavaScript中常见的事件句柄（Event Handlers）主要有：

属性名描述(对应事件发生在何时…)onabort图像的加载被中断onchange域的内容被改变ondblclick当用户双击某个对象时调用的事件句柄onfocus元素获得焦点onkeypress某个键盘按键被按下并松开onload一张页面或一幅图像完成加载onmousemove鼠标被移动onmouseover鼠标移动到某元素之上onreset重置按钮被点击onselect文本被选中onunload用户退出页面onblur元素失去焦点onclick当用户点击某个对象时调用的事件名柄onerror在加载文档或图像时发生错误onkeydown某个键盘按键被按下onkeyup某个键盘按键被松开onmousedown鼠标按钮被按下onmouseout鼠标从某个元素移开onmouseup鼠标铵键被松开onsubmit提交按钮被点击onresize窗口或框架被重新调整大小

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

v-on指令

作用：监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

用法：v-on绑定的事件函数一般都写在methods对象中,使用步骤如下：1、事件绑定，2、事件实现，3、事件触发。

v-on指令无参形式的click事件绑定：

全写代码如下：

  
    
{{title}}
    
      {{msg}}    
  
    export default {        name: 'v-on',      data() {          return {            msg: '点击我',            title: 'v-on指令学习'          }      },      methods:{        clickme:function(){          alert("hello");    }      }    }  .title1 {    text-align: left;  }  .div1{    float: left;  }

登录后复制

简写代码如下：

  
    
{{title}}
    
      {{msg}}    
  
  export default {    name: 'v-on',    data() {      return {        msg: '点击我',        title: 'v-on指令学习'      }    },    methods:{      clickme(){        alert("hello");      }    }  }  .title1 {    text-align: left;  }  .div1{    float: left;  }

登录后复制

示例结果如

v-on指令有参形式的click事件绑定：参数的数量和形式可根据实际情况传入，简单代码示例如下：

  
    
{{title}}
    
      {{msg}}    
  
  export default {    name: 'v-on',    data() {      return {        msg: '点击我',        title: 'v-on指令学习'      }    },    methods:{      clickme(msg1,msg2,event){       console.log(msg1);       console.log(msg2);       console.log(event);      }    }  }  .title1 {    text-align: left;  }  .div1{    float: left;  }

登录后复制

示例结果如下

总结：v-on可以绑定很多javascript事件，本文仅以click单击事件为例。

相关推荐：
Vue中条件渲染的分析（附代码）

Vue中v-model指令的分析（附代码）

以上就是Vue中v-on指令的简单事件绑定的分析（附代码）的详细内容，更多请关注【创想鸟】其它相关文章！