Vue 事件监听 v-on

事件监听

v-on介绍

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

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

• 作用：绑定事件监听器

• 缩写：语法糖 @

• 预期：Function | Inline Statement | Object

• 参数：event

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调用时，需要注意参数问题：

• 情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。
  • 但是注意：如果方法本身中有一个参数，那么会默认将原生事件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提供了修饰符来帮助我们方便的处理一些事件：

• .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>

扩展:事件

事件监听机制

概念：某些组件被执行了某些操作后，触发某些代码的执行。

事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了。

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

监听器：JavaScript代码。

注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。

常见的事件

• 点击事件

  • onclick：单击事件
  • ondblclick：双击事件

• 焦点事件

  • onblur：失去焦点
  • onfocus: 元素获得焦点。

• 加载事件

  • onload：一张页面或一幅图像完成加载。

• 鼠标事件

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

• 键盘事件

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

• 表单事件

  • onsubmit 确认按钮被点击。
  • onreset 重置按钮被点击。