<button @click="handlerEvent()"></button> --- const vm = new Vue({ ... methods: { handlerEvent(event) { console.log(event) // 鼠标点击时,获取到事件对象 } } })
1、如果只是事件函数的调用,函数名称后面不要添加括号
好处:函数执行时,第一个形式参数会被系统自动注入
一个事件对象,提供给函数使用
@click="handlerEvent"
2、如果事件函数调用执行时,需要传递参数,函数名称后面
必须添加括号,如果要使用事件对象,就必须手工注入(固定语法)
@click="handlerEvent($event)"
事件冒泡是JS语法中的一种事件触发机制,描述的是目标元素上的事件一旦发生,就会根据DOM节点结构,将事件逐步依次触发到父节点上的一种事件机制
原生JS中通过兼容性语法阻止事件冒泡
event.stopPropagation?event.stopPropagation():event.cancelBubble=true
Vue中对于事件冒泡的处理进行了封装,提供了事件修饰符完成阻止冒泡行为
固定语法:标签对象的事件属性上,添加 @事件对象.stop=“处理函数”
.self事件修饰符的作用,就是让事件的触发方式只能由当前标签上发生的事件触发!
.lazy作为表单修饰符,经常用在表单元素上,用于将表单数据的同步机制延迟到表单元素失去焦点时再进行同步,节省资源、提高整体效率!
Vue数据双向绑定的特性,指代的是Vue实例中的数据和网页视图中的数据绑定,实例中数据的更新会直接影响视图的渲染展示,视图中的数据更新会自动同步到实例中的数据,这样的操作机制就是数据双向绑定机制;Vue底层主要是通过Object.defineProperty()数据劫持的操作方式完成的!
数据劫持本质上就是一种变量的高级声明方式,通过数据劫持的语法声明的变量,我们可以针对变量数据的查询、编辑进行监听,随时根据变量的使用情况进行功能的添加,如数据的双向绑定,完成数据的自动同步和自动渲染!