Vue基础之事件机制、事件修饰符以及双向数据绑定

目录

一、事件机制

二、事件修饰符

三、双向数据绑定 


一、事件机制

Vue使用 v-on 指令监听DOM 事件,并在触发时运行一些 JavaScript 代码, 还可以接收一个需要调用的方法名称,我们可以在方法中通过$event参数传递原生事件对象,同时也可以传递其他参数。可以将v-on:事件名缩写为@事件名


	

Vue基础之事件机制、事件修饰符以及双向数据绑定_第1张图片

二、事件修饰符

在JavaScript事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。Vue提供了更好的方式:事件处理函数只有纯粹的数据逻辑,而不是去处理 DOM 事件细节,通过事件修饰符来完成这些细节。

常见修饰符如下:

.stop 停止事件冒泡

.prevent 阻止事件默认行为

.capture 在事件捕获阶段执行事件处理函数

.self 只当在 event.target 是当前元素自身时触发处理函数

.once 事件处理函数执行一次后解绑

.passive 滚动事件的默认行为 (即滚动行为) 将会立即触发 ,一般与scroll连用,能够提升移动端的性能 (因为每次事件产生,浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。我们加上.passive就是为了告诉浏览器,不用查询了,我们没用preventDefault阻止默认动作。passive和prevent冲突,不能同时绑定在一个监听器上。

按键修饰符 (一般与keyup事件类型配合使用):

.enter.tab.delete.esc.space.up.down.left.right 、.ctrl.alt.shift.meta

鼠标修饰符(mouseup事件):

.left.right.middle




	

-------------------------------------------------------
stop 阻止事件冒泡

-------------------------------------------------------
.captrue 事件捕获阶段执行
百度一下

三、双向数据绑定 

可以用 v-model 指令在表单

Vue基础之事件机制、事件修饰符以及双向数据绑定_第2张图片

你可能感兴趣的:(vue,vue.js,javascript,前端)