当点击按钮，先触发点击按钮事件，再向上层冒泡
<body>
<div id="app">
<div class="inner" @click=‘divhandle‘>
<input type="button" value="戳我" @click=‘btnhandle‘>
</div>
</div>
<script >
var vm = new Vue({
el:‘#app‘,
data:{
},
methods:{
divhandle(){
console.log(‘触发点击inner事件‘);
},
btnhandle(){
console.log(‘触发点击btn事件‘);
}
}
})
</script>
</body>
<div class="inner" @click=‘divhandle‘> <input type="button" value="戳我" @click.stop=‘btnhandle‘> </div>
.prevent阻止默认事件
<div id="app">
<!-- <div class="inner" @click=‘divhandle‘>
<input type="button" value="戳我" @click.stop=‘btnhandle‘>
</div> -->
<a href="http://www.baidu.com" @click.prevent=‘linkclick‘>百度</a>
</div>
<script >
var vm = new Vue({
el:‘#app‘,
data:{
},
methods:{
divhandle(){
console.log(‘触发点击inner事件‘);
},
btnhandle(){
console.log(‘触发点击btn事件‘);
},
linkclick(){
console.log(‘触发链接点击事件‘);
},
}
})
</script>
阻止a标签的默认跳转行为
<div class="inner" @click.capture=‘divhandle‘> <input type="button" value="戳我" @click.stop=‘btnhandle‘> </div> //事件从外到里
<div class="inner" @click.self=‘divhandle‘> <input type="button" value="戳我" @click.stop=‘btnhandle‘> </div> //只有点击inner块自身才触发divhandle事件，点击button时不触发divhandle事件
<a href="http://www.baidu.com" @click.prevent.once=‘linkclick‘>百度</a> //只触发一次事件处理函数，包括prevent事件，click.once.prevent也一样
两个都有阻止冒泡的效果，但是stop阻止所有冒泡，self只阻止当前元素冒泡，不影响其它冒泡
例如，outer-inner-button三层，在button @click.stop，只发生button事件，阻止冒泡，不发生outer，inner的click事件；
在inner @click.self，点击button，只发生button和outer事件。
<div id="app">
<h4>{{msg}}</h4>
<input type="text" v-bind:value="msg">
</div>
<script >
var vm = new Vue({
el:‘#app‘,
data:{
msg:‘敲代码啦‘
},
methods:{
}
})
</script>
<div id="app">
<h4>{{msg}}</h4>
<input type="text" style=‘width: 100%;‘ v-model="msg">
</div>
<script >
var vm = new Vue({
el:‘#app‘,
data:{
msg:‘敲代码啦‘
},
methods:{
}
})
</script>
注意：v-model只能运用在表单元素中
input(radio,text,address,email...
select
checkbox
textarea
原文：https://www.cnblogs.com/xuziying/p/13747695.html