1.vue-on:监听事件: demo:点击按钮,number+1 v-on 还可以缩写为 @
2.事件修饰符
事件冒泡? 即是:父元素里有 子元素, 如果点击了 子元素, 那么click 事件不仅会发生在子元素上,也会发生在其父元素上,依次不停地向父元素冒泡,直到document元素。
使用事件修饰符解决冒泡: 1. .stop阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) 在me上的click后面加一个 .stop, 那么冒泡到了这里就结束了,就不会冒到father上面去了。
2. .prevent 阻止页面刷新 只有超链和form这种会导致页面刷新的操作,.prevent 才有用。 普通的不导致页面刷新的按钮,加上这个没有任何变化。 demo:点击超链接和form不跳转网页:
3. 优先触发 .capture 在father 上增加一个.capture <div id="father" v-on:click.capture="doc"> 那么当冒泡发生的时候,就会优先让father捕捉事件。点击son或者me的时候,都会优先触发它,当点击grandfather时并不会被father捕捉,只会弹出grandfather
4. .self <div id="father" v-on:click.self="doc"> 点击son: son---->me-->grandfather 点击me: me---->grandfather 点击father : father---》grandfather
5. .once <div id="father" v-on:click.once="doc"> 点击son: son---me--father--grandfather 点击me: me--grandfather 点击father: grandfather 点击grandfather:grandfather |
|