Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue前端入门，第7节 事件修饰符
事件修饰符有6种
1、.stop，阻止冒泡事件，比较常用
2、.prevent，阻止默认事件，比较常用
3、.once，事件仅发生一次
4、capture：事件捕获
5、passive：立即执行事件
6、self：event.target的值是当前元素触发修饰符是可以连贯使用的，因此修饰符的使用顺序使用不当会影响显示结果，例如v-on:click.prevent.self会阻止所有的点击，v-on:click.self.prevent 只会阻止对元素自身的点击。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
button {
width: 300px;
color: rebeccapurple;
}
ul {
height: 300px;
width: 300px;
background-color: peru;
overflow: auto;
}
li {
height: 100px;
}
</style>
</head>
<body>
<div id="app">
<h1>
<div>
<a href="?id=123">
<button @click="getInfo(`@click`)">@click</button>
</a>
</div>
<div>
<a href="?id=123">
<button @click.prevent="getInfo(`@click.prevent`)">@click.prevent</button>
</a>
</div>
<button @click.once="getInfo(`@click.once`)">@click.once</button>
<div @click="getInfo(`@click.stop`)">
<button @click.stop="getInfo(`@click.stop`)">@click.stop</button>
</div>
<ul @wheel="passive1()">
<li>golang</li>
<li>php</li>
<li>c#</li>
<li>java</li>
<li>python</li>
</ul>
<ul @scroll="passive1()">
<li>golang</li>
<li>php</li>
<li>c#</li>
<li>java</li>
<li>python</li>
</ul>
</h1>
</div>
<script src="js/vue.js"></script>
<script>
Vue.config.productionTip = false
new Vue({
el: "#app",
data: {},
methods: {
getInfo(e) {
alert(e)
},
passive1() {
console.log("@")
}
}
})
</script>
</body>
</html>