常见事件修饰符

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: 适合频繁切换。

通过修饰符解决冒泡事件
在JavaScript中冒泡事件是最长处理的事件，先写一段代码，手动创造一个冒泡事件。
新建一个文件Demo20.html

修改模板 template 部分，在最外层增加一个

并添加 click 事件。
修改方法 methods 部分，删除无用****方法，保留两个方法，增加 alter 提示。
形成冒泡效果，就是有嵌套的DOM元素时，两个都有绑定事件，JS会自动向上传递事件。
stop修饰符
在Vue中要停止冒泡是非常简单的，只要加加一个事件修饰符stop就可以了。
————————————————
<button @click.stop="addCountClick()">增加一位小伙伴</button>
self修饰符
除了使用.stop修饰符，还有一种修饰符self，意思是只有点击自己的时候才会被执行。 只不过加的位置要加在外层DOM元素的事件上。
template:
<div @click.self="handleBtnClick1">

目前已点报名的小伙伴数量{{count}}.

<button @click=" addCountClick()">增加一位小伙伴

这时候你会发现点击那里，都没办法触发 hanldeBtnClick1 方法了，这是因为目前最外层div下都是独立的DOM元素，就是都有成对标签出现，都不属于最外自己，都是他们的子元素。

可以编写一段专属最外层DIV的文字。
template:
<div @click.self="handleBtnClick1">
我是最外层的DIV文字

目前已点报名的小伙伴数量{{count}}.

<button @click=" addCountClick()">增加一位小伙伴

once修饰符：

事件只执行一次

template:
<div @click.self="handleBtnClick1">
我是最外层的DIV文字

目前已点报名的小伙伴数量{{count}}.

<button @click.once=" addCountClick()">增加一位小伙伴


此时再点击按钮，事件只执行一次。这时候我们修改了两个地方，最外层的事件加了self修饰符，button上加了once修饰符。

passive修饰符：
解决滚动时性能的修饰符，不太好演示，等以后用到我们会再详细讲解。

本文就先到这里了，我们学习了6种修饰符：stop、prevent、capture、self、once、passive。下节我们讲解按键修饰符。

初始页面
————————————————
`

`