Vue事件处理

• 前言
• 一、事件的基本使用
• • • • 1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名
      • 2.事件的回调需要配置在methods对象中，最终会在vm上
      • 3.methods中配置的函数，不要用箭头函数！否则this就不是vm了
      • 4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
      • 5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参
• 二、事件修饰符
• • • • 1.prevent：阻止默认事件
      • 2.stop：阻止事件冒泡
      • 3.once：事件只触发一次
      • 4.capture：使用事件的捕获模式
      • 5.self：只有event.target是当前操作的元素时才触发事件

前言

有了事件代理，还只是显示了数据，没有动态的改变，我们知道想要动态的改变必须使用方法，也就是函数，Vue事件处理，就相当于js当中的函数，这句话不怎么对，但是可以这样理解

一、事件的基本使用

使用讲如下几点：在讲之前先说一下：（Vue事件处理，没有使用代理，数据代理，数据代理，只有数据才代理，方法不代理，这是一点，还有一点就是，数据代理是为了动态的交互，而方法就是方法，只需要修改）

这是我的{{name}}
点我1点我1

注意：方法函数写在methods中，由于已经知道是一个函数，所以不需要

1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名

@就是v-on:的简写方式

这是我的{{name}}
点我1点我1

2.事件的回调需要配置在methods对象中，最终会在vm上

看如下的图你就可以知道了

3.methods中配置的函数，不要用箭头函数！否则this就不是vm了

记住一点，箭头函数所执行的this都是windows

4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；

这是我的{{name}}
点我1

5.@click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参

$event是占位符，在什么地方都可以

这是我的{{name}}
点我1点我1

二、事件修饰符

1.prevent：阻止默认事件

首先来看一个事件，点击对于，这个事件，如果点击了a标签，但是不想要跳转，一般会使用event.stop,哪vue中直接使用stop即可，如下代码所示：

{{name}}
百度

直接使用百度

2.stop：阻止事件冒泡

冒泡：父元素有和子元素一样的事件，当子元素的事件触发时，父元素的事件也触发，如下所示：

点我一下获取信息

直接在事件后面加上.stop就可以阻止冒泡了

3.once：事件只触发一次

想要只执行一次事件直接在事件后面加上.once就可以了

点我一下获取信息

4.capture：使用事件的捕获模式

冒泡和捕获原理，先捕获再冒泡

5.self：只有event.target是当前操作的元素时才触发事件

也可以阻止冒泡事件