1、下面的代码输出结果正确吗?为什么
<button @click="handlerEvent()"></button>
---
const vm = new Vue({
...
methods: {
handlerEvent(event) {
console.log(event) // 鼠标点击时,获取到事件对象
}
}
})
不正确,结果是undefined
调用的时候,如果没有任何参数的情况下,可以直接不写括号,,事件处理函数的第一个形式参数默认接收事件对象的注入(事件函数第一个参数就是事件对象)
需要有参数的情况下再写括号,第一个参数为事件对象($event),后面是需要的参数。
2、什么是事件冒泡,原生JS中如何阻止事件冒泡,Vue中如何阻止事件冒泡?
假如有4个div嵌套关系的盒子,给他们分别设置click点击事件的话,点击最里面的,效果会从最里层逐级向外触发,这个过程,称为事件的冒泡行为。
原生JS中阻止事件冒泡
event.stopPropagation?event.stopPrpagation():event.cancelBubble=true
Vue中阻止冒泡
语法:@事件对象.stop=”处理函数”
3、.self事件修饰符的作用,是让标签对象的事件只能由发生在当前标签上的操作捕获,不支持事件触发和事件冒泡行为?
.seft作用:
(1)、当前元素的事件只能由自己触发,冒泡或者捕获机制会跳过触发当前元素,但是并不会影响子元素继续向外冒泡,以及父元素向内捕获。
(2)、该行为只是表示当前的元素不会被冒泡或者捕获机制触发。并不代表取消了当前元素的冒泡或者捕获。
4、表单修饰符.lazy的作用是什么?
用于让表单中的数据延迟数据同步。当前表单元素的内容,失去焦点后再同步。
5、Vue的数据双向绑定特性具体指代的是什么绑定方式?请简述数据双向绑定的底层的实现原理?
vue数据双向绑定机制,指代的是vue实例中的数据和网页视图中的数据绑定,实例中的数据更新,会直接影响到视图的渲染展示;视图中的数据更新会自动同步到实例中的数据,这样的操作机制就是数据的双向绑定机制;vue底层主要是通过Object.defineProperty()数据劫持的操作方式完成的。
6、什么是数据劫持?
数据劫持本质上就是一种变量的高级声明方式,通过数据劫持的语法声明的变量,我们可以针对变量数据的查询、编辑进行监听,随时根据变量的使用情况进行功能的添加,如数据的双向绑定,完成数据的自动同步和自动渲染。