当前位置:Gxlcms > JavaScript > Vue中v-on指令的简单事件绑定的分析(附代码)

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

时间:2021-07-01 10:21:17 帮助过:34人阅读

这篇文章给大家介绍的文章内容是关于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事件绑定:

全写代码如下:

<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网其它相关文章!

人气教程排行