使用vue的时候，无法使用事件修饰符prevent阻止默认事件。
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<script type='text/javascript' src='../vue.js'></script>
</head>
<body>
<!-- Vue中的事件修饰符:
1.prevent:阻止默认事件 (常用);
2.stop:阻止事件冒泡(常用) ;
3.once: 事件只触发一次 (常用):
4.capture:使用事件的捕获模式;
5.self: 只有event.target是当前操作的元素时才触发事件;6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕: -->
<!-- 准备好一个容器 -->
<div id='root'>
<!-- 阻止元素默认事件 -->
<a href="https://www.bilibili.com" @cilck.prevent="showinfo">这是一个按钮{{name}}</a>
<!-- 阻止时间冒泡 -->
<div @click="showinfo">
div1
<button @click.stop="showinfo">
button1
</button>
</div>
<!-- 使时间事件只触发一次 -->
<button @click.once="showinfo">
button1
</button>
</div>
</body>
<script type='text/javascript'>
Vue.config.productionTip=false;
const vm = new Vue({
data:function(){
return{
name:'asuka'
}
},
methods:{
showinfo(e){
alert('hello')
}
}
})
vm.$mount('#root')
</script>
</html>
