Vue 事件监听

事件监听

v-on介绍

  • 在前端开发中,咱们须要常常和用于交互。这个时候,咱们就必须监听用户发生的时间,好比点击、拖拽、键盘事件等等前端

  • 在Vue中如何监听事件呢?使用v-on指令vue

  • 做用:绑定事件监听器app

  • 缩写:语法糖 @函数

  • 预期:Function | Inline Statement | Objectthis

  • 参数:eventspa

v-on基础

  • 咱们用一个监听按钮的点击事件,来简单看看v-on的使用
  • 下面的代码中,咱们使用了v-on:click="counter++”
  • 另外,咱们能够将事件指向一个在methods中定义的函数
<div id="app">
  <h2>{{counter}}</h2>
  <button v-on:click="counter++">点击按钮1</button>
  <button v-on:click="btnClick()">点击按钮2</button>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods: {
      btnClick() {
        this.counter++
      }
    }
  })
</script>

v-on也有对应的语法糖:v-on:click能够写成@click

<button v-on:click="counter++">点击按钮1</button>
  <button v-on:click="btnClick()">点击按钮2</button>
 <!--语法糖-->
  <button @click="counter++">点击按钮3</button>
  <button @click="btnClick()">点击按钮4</button>

v-on参数

当经过methods中定义方法,以供@click调用时,须要注意参数问题:code

  • 状况一:若是该方法不须要额外参数,那么方法后的()能够不添加。
    • 可是注意:若是方法自己中有一个参数,那么会默认将原生事件event参数传递进去
  • 状况二:若是须要同时传入某个参数,同时须要event时,能够经过$event传入事件。
<div id="app">
  <h2>点击次数: {{counter}}</h2>
  <!--状况一: 方法没有参数-->
  <button @click="btnClick1">按钮1</button>
  <button @click="btnClick1()">按钮1</button>

  <!--状况二: 若是方法有参数-->
  <!--1.调用时不传入参数,会默认将event做为第一个参数传入-->
  <button @click="btnClick2">按钮2</button>
  <!--2.调用时不传入参数,那么参数为undefined-->
  <button @click="btnClick2()">按钮2</button>

  <!--状况三: 若是方法有参数,而且但愿传入event-->
  <button @click="btnClick3(10, $event)">按钮3</button>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods: {
      btnClick1() {
        console.log('按钮1被点击');
      },
      btnClick2(payload) {
        console.log('按钮2被点击', payload);
      },
      btnClick3(num, event) {
        console.log('按钮3被点击', num, event);
      }
    }
  })
</script>

v-on修饰符

在某些状况下,咱们拿到event的目的多是进行一些事件处理。Vue提供了修饰符来帮助咱们方便的处理一些事件:orm

  • .stop - 调用 event.stopPropagation()
  • .prevent - 调用 event.preventDefault()
  • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调
  • .native - 监听组件根元素的原生事件
  • .once - 只触发一次回调
<!-- 中止冒泡 -->
<button @clcik.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为 -->
<form @submit.prevent></form>

<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符,键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符,键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只回调一次 -->
<button @click.once="doThis"></button>

扩展:事件

事件监听机制

概念:某些组件被执行了某些操做后,触发某些代码的执行。seo

事件:某些操做。如: 单击,双击,键盘按下了,鼠标移动了。事件

事件源:组件。如: 按钮 文本输入框...

监听器:JavaScript代码。

注册监听:将事件,事件源,监听器结合在一块儿。当事件源上发生了某个事件,则触发执行某个监听器代码。

常见的事件

  • 点击事件

    • onclick:单击事件
    • ondblclick:双击事件
  • 焦点事件

    • onblur:失去焦点
    • onfocus: 元素得到焦点。
  • 加载事件

    • onload:一张页面或一幅图像完成加载。
  • 鼠标事件

    • onmousedown 鼠标按钮被按下。
    • onmouseup 鼠标按键被松开。
    • onmousemove 鼠标被移动。
    • onmouseover 鼠标移到某元素之上。
    • onmouseout 鼠标从某元素移开。
  • 键盘事件

    • onkeydown 某个键盘按键被按下。
    • onkeyup 某个键盘按键被松开。
    • onkeypress 某个键盘按键被按下并松开。
    • 选择和改变
    • onchange 域的内容被改变。
    • onselect 文本被选中。
  • 表单事件

    • onsubmit 确认按钮被点击。
    • onreset 重置按钮被点击。
相关文章
相关标签/搜索