1: 常见事件修饰符:
1.1: .stop 等同于javaScript 中的event.stopPropagation(); 防止事件冒泡;
1.2: .prevent: 等同于javaScript 中event.preventDefault(); 防止执行预设的行为。
1.3: .capture: 与事件冒泡方向相反, 事件捕获由外到内。
1.4: .self: 只会触发自己范围内的事件, 不包含子元素。
1.5: .once() 事件 只会触发一次。
---------------------------------------------------------------------------
v-if / v-show / v-html 的原理:
v-if:会调用addifCondition方法, 生成vnode 的时候忽略对应的节点操作, render 的时候就不会渲染。
v-show: 会生成vnode, render 的时候也会渲染真是的节点操作, 只是在 render的过程中会在节点的属性中修改成 show 属性值, 也就是常说的display 属性。
v-html: 回先移除节点下的所有的节点, 调用html 方法,通过addProp 添加innnerHTML 属性, 归根结底还是设置了 innnerHTML 为 v-html 的值。
v-if 和 v-show 的区别:
1: 手段: v-if 是动态的向DOM树内添加或者删除DOM 元素; v-show: 是通过设置DOM 元素的display 样式属性控制显示与隐藏。
2: 编译过程: v-if 切换一个局部编译/ 卸载的过程, 切换过程中合适的销毁和重建内部的事件监听和子组件, v-show: 只是简单的基于css 切换。
3: 编译条件: v-if 是惰性的, 如果初始条件为假, 则什么也不做; 现在只有一次条件变为真时, 才会局部编译。 v-show: 是在任何条件下, 无论首次是否为真, 都会被编译, 然后被缓存。 而且DOM 元素会被保留。
4: 性能消耗: v-if 有更高的切换消耗。 v-show: 有更高的初始渲染消耗。
5: 使用场景: v-if 适合条件不大可能改变; v-show: 适合频繁切换。
常见事件修饰符
最新推荐文章于 2024-06-04 10:37:05 发布