事件默認冒泡：
當點擊按鈕，先觸發點擊按鈕事件，再向上層冒泡
<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>
事件修飾符
- .stop阻止冒泡
<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標簽的默認跳轉行為
- .capture 添加事件偵聽器使用事件捕獲模式
<div class="inner" @click.capture='divhandle'> <input type="button" value="戳我" @click.stop='btnhandle'> </div> //事件從外到里
- .self只當事件在元素本身（比如本身子元素）觸發時觸發回調
<div class="inner" @click.self='divhandle'> <input type="button" value="戳我" @click.stop='btnhandle'> </div> //只有點擊inner塊自身才觸發divhandle事件，點擊button時不觸發divhandle事件
- .once事件只觸發一次
<a href="http://www.baidu.com" @click.prevent.once='linkclick'>百度</a> //只觸發一次事件處理函數，包括prevent事件，click.once.prevent也一樣
.stop和.self
兩個都有阻止冒泡的效果，但是stop阻止所有冒泡，self只阻止當前元素冒泡，不影響其它冒泡
例如，outer-inner-button三層，在button @click.stop，只發生button事件，阻止冒泡，不發生outer，inner的click事件；
在inner @click.self，點擊button，只發生button和outer事件。
v-modle和雙向數據綁定
<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>
v-bind只能實現數據單向綁定，從M綁定到V，無法實現雙向綁定
<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可以實現表單元素和model中數據的雙向綁定
注意：v-model只能運用在表單元素中
input(radio,text,address,email...
select
checkbox
textarea
