Vue中v-on指令的简单事件绑定的分析（附代码）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Vue中v-on指令的简单事件绑定的分析（附代码），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2661字，纯文字阅读大概需要4分钟。

内容图文

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

前言

属性名	描述(对应事件发生在何时...)
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事件绑定：

全写代码如下：

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1">
      <button  v-on:click="clickme" >{{msg}}</button>
    </div>
  </div>

</template>

<script>
    export default {
        name: 'v-on',
      data() {
          return {
            msg: '点击我',
            title: 'v-on指令学习'
          }
      },
      methods:{
        clickme:function(){
          alert("hello");
    }
      }
    }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

简写代码如下：

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1">
      <button  @click="clickme" >{{msg}}</button>
    </div>
  </div>

</template>

<script>
  export default {
    name: 'v-on',
    data() {
      return {
        msg: '点击我',
        title: 'v-on指令学习'
      }
    },
    methods:{
      clickme(){
        alert("hello");
      }
    }
  }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

示例结果如

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

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1">
      <button  @click="clickme('我是中文参数','woshiyingwencanshu',$event)" >{{msg}}</button>
    </div>
  </div>

</template>

<script>
  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);
      }
    }
  }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

示例结果如下

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

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

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

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

内容总结

以上是互联网集市为您收集整理的Vue中v-on指令的简单事件绑定的分析（附代码）全部内容，希望文章能够帮你解决Vue中v-on指令的简单事件绑定的分析（附代码）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---