VUE基礎(chǔ)之事件處理
v-on：something用于綁定事件監(jiān)聽器岗屏，監(jiān)聽DOM變化來(lái)觸發(fā)事件（something）菠净，可簡(jiǎn)寫為@something封恰。
<div id="app">
<button type="button" @click="click">點(diǎn)擊我獲取信息</button>
<p>{{msg}}</p>
</div>
var vm = new Vue({
el: '#app',
data: {
msg: '等待點(diǎn)擊西采。美尸。捣染。'
},
methods: {
click: function() {
this.msg = '按鈕被點(diǎn)擊啦';
}
}
});
我們也可以在調(diào)用的方法中訪問(wèn)原生DOM事件
<div id="app">
<input type="text" @change="prompt"/>
<p>{{msg}}</p>
</div>
var vm = new Vue({
el: '#app',
data: {
msg: '等待輸入骄瓣。。耍攘。'
},
methods: {
prompt: function(event) {
this.msg = event.target.value;
}
}
});
事件修飾符：VUE通過(guò)事件修飾符為DOM事件進(jìn)行很多細(xì)節(jié)上的處理榕栏，能讓我們更加專注于代碼邏輯中。
- .stop：相當(dāng)于event.stopPropagation()蕾各，防止事件冒泡扒磁，例子如下：
原本點(diǎn)擊按鈕應(yīng)該會(huì)出現(xiàn)兩次彈窗，但是.stop阻止了事件往外層傳遞式曲，結(jié)果只出現(xiàn)內(nèi)層彈窗
<div id="app">
<div @click="outer">
<button @click.stop="inner">button</button>
</div>
</div>
var vm = new Vue({
el: '#app'
methods: {
inner: function() {
alert('這是內(nèi)層button');
},
outer: function() {
alert('這是外層 div妨托，可是.stop阻止了我');
}
}
});
- .prevent：相當(dāng)于event.preventDefault()，防止執(zhí)行默認(rèn)操作吝羞，可以只有修飾符不用調(diào)用函數(shù)始鱼。例子如下：
<div id="app">
<a href="www.baidu.com" @click.prevent>我是一條假鏈接</a>
</div>
var vm = new Vue({
el: '#app'
});
- .capture：事件捕捉模式，事件從外到內(nèi)觸發(fā)脆贵，與事件冒泡含義相反医清，例子如下：
<div id="app">
<div @click.capture="outer">
<button @click .capture="inner">button</button>
</div>
</div>
var vm = new Vue({
el: '#app'
methods: {
inner: function() {
alert('這是內(nèi)層button');
},
outer: function() {
alert('這是外層 div，我會(huì)先觸發(fā)哦~');
}
}
});
- .self：只觸發(fā)自身事件卖氨，對(duì)父子元素?zé)o效会烙，例子如下：
<div id="app">
<div @click.self="outer">
<button @click .self="inner">button</button>
</div>
</div>
var vm = new Vue({
el: '#app'
methods: {
inner: function() {
alert('這是內(nèi)層button，你點(diǎn)誰(shuí)就觸發(fā)誰(shuí)');
},
outer: function() {
alert('這是外層 div筒捺，你點(diǎn)誰(shuí)就觸發(fā)誰(shuí)');
}
}
});
- .once：只觸發(fā)一次事件柏腻，例子如下：
<div id="app">
<button @click .once=" once ">button</button>
</div>
var vm = new Vue({
el: '#app'
methods: {
once: function() {
alert('點(diǎn)擊事件只會(huì)執(zhí)行一次哦');
}
}
});
