vue2.x之事件

一、监听

在vue中事件监听是通过v-on指令去监听的，并在触发的时候运行一些JavaScript代码。即v-on:后面加事件类型

<span class="btn" v-on:click="clearFun">点我触发点击事件</span>

v-on指令也可以简写成@符

<span class="btn" @click="clearFun">点我触发点击事件</span>

二、事件处理方法

1. 基础用法

在使用事件处理的时候我们需要使用v-on去监听事件，我们可以直接将事件的内容写在v-on指令后面，比如下面这种:

<span class="btn" v-on:click="num++">{{num}}</span>

对于比较复杂的事件内容，我们通常会写一个方法，将逻辑写在方法里面，然后将方法名绑定在v-on指令上。

<button @click="sayHello">sayHello</button>

methods: {
  sayHello () {
    alert('hello world!')
  } 
}

2. 传参用法

上面介绍的都是一些很基础的用法，但是在实际开发中，我们通常需要传参，下面介绍一下传参的用法。

⏰ 不传参的时候，我们可以直接在v-on后面绑定方法名，但是如果需要传参的话我们需要使用括号，里面传参

<button @click="showMsg('hello')">showMsg</button>

methods: {
  showMsg (msg) {
    alert(msg)
  } 
}

这样我们传什么参数就会弹出什么信息

3. 事件对象用法

在事件中我们有一个很重要的事件对象event，只要有了事件就一定会存在事件对象，事件对象是系统自动创建的，里面包含了很多属性。

1、如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数

<!-- 1、如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 -->
<button v-on:click='handle1'>点击1</button>
<!--Methods配置项中的方法-->>
handle1: function(event) {
    console.log(event.target.innerHTML)
},

2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

<!-- 2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event -->
<button v-on:click='handle2(123, 456, $event)'>点击2</button>
handle2: function(p, p1, event) {
  console.log(p, p1)
  console.log(event.target.innerHTML)
  this.num++;
}

事件对象里面包含很多信息，我们常用的就是以下几个属性，重点关注一下就行。

1）. type属性

事件类型

2）. target和currentTarget

target是触发事件的对象，currentTarget是绑定事件的对象

3）. keyCode

被按下键盘的键码（ASCII码），这个只有在键盘事件中才会有对应的属性

4）. ctrlKey, altKey, shiftKey

这几个属性值也都是在键盘事件中才会有对应的属性。ctrlKey返回是否按下了ctrl键，altKey返回是否按下了alt键，shiftKey返回是否按下了shift键

5）. screenX与screenY

screenX是鼠标点击的坐标距电脑屏幕水平方向的距离，screenY鼠标点击的坐标距离电脑屏幕垂直方向的距离

6）. offsetX与offsetY

offsetX鼠标点击的坐标距自身水平方向元素的距离，不受滚动条影响。offsetY鼠标点击的坐标距自身垂直方向元素的距离

7）. clientX与clientY

clientX是鼠标点击的坐标距窗口可视区水平方向元素的距离，clientY是鼠标点击的坐标距窗口可视区垂直方向元素的距离

4. 事件类型

对于我们开发vue项目来说，常见的事件方法主要有下面这几种js原生事件和自定义事件

鼠标点击事件：点击事件是在开发中用的最多的事件，有单击是双击事件两种

click: 单机事件
dbclick：双击事件

焦点事件：焦点事件有两种，失去焦点和获得焦点，这种事件一般用于input输入框中

focus: 元素获得焦点（不会冒泡）
blur: 元素失去焦点（不会冒泡）

鼠标其他事件：除了上面介绍的鼠标点击事件外，鼠标还具有其他的一些事件。

mousedown: 在元素上按下任意鼠标按钮
mouseup: 在元素上释放任意鼠标按键
mouseenter: 指针移到有事件监听的元素内
mouseleave: 指针移出元素范围内（不会冒泡）
mousemove: 指针在元素内移动时持续触发
mouseover: 指针移到有事件监听的元素或者它的子元素内
moseout: 指针移出元素，或者移到它的子元素上
select: 有文本被选中
wheel: 滚轮向任意方向移动

表单事件：表单事件一般是用在form元素上的，常见的有两种元素

reset: 点击重置按钮时触发
submit：点击提交按钮时

$emit自定义事件：除了上面这些原生的js事件外，vue还可自定义事件，这种情况一般用于父子组件之间传值时：

子组件child.vue

goToParent() {
  this.$emit('childToParent')
}

父组件parent.vue

<child @childToParent="getChildData" />
getChildData() {
  // 这里可以拿到子组件给父组件传递的值
}

三. 修饰符

在vue中，修饰符分为以下五种：

表单修饰符
事件修饰符
鼠标按键修饰符
键值修饰符
v-bind修饰符

1. 表单(v-model)修饰符

lazy
在表单元素中，只有当光标离开标签的时候，才会将值赋给value。
```
<input type="text" v-model.lazy="msg" 
```
trim

这个修饰符会自动过滤输入的首空格和尾空格，中间的不会过滤
```
<input type="text" v-model.trim="msg" >
```
number
这个修饰符能将输入的内容自动转成number类型。
```
<input type="text" v-model.number="msg" >
```

2. 事件(v-on)修饰符

在js事件机制中，我们知道事件分为捕获阶段和冒泡阶段。

捕获阶段就是从根元素往下找到目标元素的过程。冒泡阶段就是从目标元素往上到根元素的过程。

为了避免事件冒泡，默认行为等，vue增加了一些事件修饰符

stop
这个修饰符阻止了事件冒泡，相当于原生事件的event.stopPropagation方法

<div class="box1" @click="click1">
  <div class="box2" @click="click2">
    <div class="box3" @click.stop="click3"></div>
  </div>
</div

prevent
这个修饰符会阻止元素默认行为。比如下面的a标签的点击事件会触发跳转,使用.pevent之后就不会跳转
```
<a href="https://juejin.cn/" @click.prevent="console.log('触发事件了')">点我跳转</a>
```

self

这个修饰符是只有当event.target是当前元素自身时触发处理函数

<div class="box1" @click="click1">
  <div class="box2" @click="click2">
    <div class="box3" @click.self="click3"></div>
  </div>
</div>

once
这个修饰符说明事件只能触发一次，后面的都不会触发
```
<div class="box3" @click.once="click3"> </div>
```
capture
一般事件的触发都是在冒泡阶段来触发的，像上面那个例子一样，如果想要事件触发从包含这个元素的顶层开始往下触发
```
<div class="box1" @click="click1">
  <div class="box2" @click.capture="click2">
    <div class="box3" @click="click3"></div>
  </div>
</div>
```
passive

当我们需要监听元素滚动的时候，会一直触发onscroll事件，导致页面卡顿，这时就可以使用这个修饰符来避免这种卡顿
```
<div class="box3" @scroll.passive="onScroll"></div>
```
native
这个修饰符能让组件像html内置标签那样监听组件根元素的原生事件，否则需要借助自定义事件来完成。不过需要注意的是这个native修饰符只能用来修饰组件元素
```
<child class="box3" @click.native="myClick"></child>
```

3. 鼠标按键修饰符

left

这个修饰符表示按了鼠标左键才会触发

<div class="box3" @click.left="consoleMsg('left')"></div>

right

这个修饰符表示按了鼠标左键才会触发

<div class="box3" @click.right="consoleMsg('right')"></div>

middle

这个修饰符表示按了鼠标左键才会触发

<div class="box3" @click.middle="consoleMsg('middle')"></div>

4. 键盘修饰符

键盘修饰符是用来修饰键盘事件的，只有按键为keyCode的时候才会触发，其中keyCode可以为以下两种类型的值

普通键值：enter， tab, delete, space, esc, up等
系统修饰键：ctrl, alt, meta, shift

<div class="box3" @keyup.keyCode="consoleMsg('ok')"></div>

5. v-bind修饰符

这类修饰符主要是为属性进行操作，通常有三种：

async

能对props进行一个双向绑定

//父组件
<comp :myMessage.sync="bar"></comp> 
//子组件
this.$emit('update:myMessage',params);

以上这种方法相当于以下的简写

//父亲组件
<comp :myMessage="bar" @update:myMessage="func"></comp>
func(e){
 this.bar = e;
}

//子组件js
func2(){
  this.$emit('update:myMessage',params);
}

prop

这个修饰符设置自定义标签属性，避免暴露数据
```
<input :type="text" v-model="msg" :index.prop="index"/>
```
camel

这个修饰符可以将变量命名为驼峰命名法
```
<input :type.camel="text" v-model="msg" />
```

posted on 2024-07-09 19:34 梁飞宇阅读(76) 评论(0) 收藏举报

刷新页面返回顶部

梁飞宇

vue2.x之事件

一、监听

二、事件处理方法

1. 基础用法

2. 传参用法

3. 事件对象用法

4. 事件类型

三. 修饰符

1. 表单(v-model)修饰符

2. 事件(v-on)修饰符

3. 鼠标按键修饰符

4. 键盘修饰符

5. v-bind修饰符

导航

公告