我的 Vue.js 学习日记 （七） - 事件与修饰符
生活随笔
收集整理的這篇文章主要介紹了
我的 Vue.js 学习日记 （七） - 事件与修饰符
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
上節(jié)回顧
上節(jié)寫了一個(gè)v-for與table的簡(jiǎn)單互動(dòng)，腦子里回憶一下，嗯 ~ 還是回去再看一遍吧...
本節(jié)目標(biāo)
今天看一下事件與修飾符，并且把有疑惑的地方敲一遍，親眼看一下輸出結(jié)果。由于時(shí)間有限，今天只寫了prevent stop capture exact once這五個(gè)修飾符。
事件
事件就不多說了，v-on: 簡(jiǎn)寫 @ 。
修飾符
prevent - 阻止表單提交
<form @submit.prevent><input type="email" placeholder="Email"><button type="submit" class="btn btn-default btn-sm" >submit</button> </form><form><input type="email" placeholder="Email"><button type="submit" class="btn btn-default btn-sm" >submit</button> </form>tip:prevent修飾符與form標(biāo)簽一起使用
stop - 阻止事件向“上”傳播
<div @keydown.enter="doSomeThing(1)"><div @keydown.enter.stop="doSomeThing(2)"><input type="text" @keydown.enter="doSomeThing(3)"></div> </div><div @keydown.enter="doSomeThing(1)"><div @keydown.enter="doSomeThing(2)"><input type="text" @keydown.enter="doSomeThing(3)"></div> </div>tip:對(duì)于嵌套的元素，元素同時(shí)有的事件會(huì)向外進(jìn)行擴(kuò)散
capture - 改變事件傳播順序
<div @keydown.enter.capture="doSomeThing(1)"><div @keydown.enter.capture="doSomeThing(2)"><input type="text" @keydown.enter="doSomeThing(3)"></div> </div>tip:catpture會(huì)在向上傳遞時(shí)享有優(yōu)先執(zhí)行權(quán)，當(dāng)存在多個(gè)capture時(shí)，更外層的優(yōu)先權(quán)更高
once - 一次性觸發(fā)
<input type="text" @keydown.enter.once="doSomeThing('我使用了.once')">tip:觸發(fā)過一次后不可用，當(dāng)然前提是不刷新
exact - 取該修飾符之前所有事件和修飾符的與關(guān)系
<input type="text" placeholder="按下的鍵中包括Enter鍵" @keydown.enter="doSomeThing('我被觸發(fā)了')"> <input type="text" placeholder="按下ctrl+enter鍵觸發(fā)Alert" @keydown.ctrl.enter.exact="doSomeThing('我被觸發(fā)了')"> <input type="text" placeholder="單單按下enter鍵觸發(fā)Alert" @keydown.enter.exact="doSomeThing('我被觸發(fā)了')"> <input type="text" placeholder="想睡想睡想睡" @click.ctrl.exact="doSomeThing('想睡覺')">tip:exact修飾符常與系統(tǒng)修飾符和按鍵修飾符配合使用
完整代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><title>chapter - 7</title> </head> <body> <div id="app"><h3>打開F12 --> Console 頁，觀察輸出結(jié)果</h3><h4>$event</h4><input type="text" v-model="msg" @keydown.enter="doClick(msg, $event)" placeholder="光標(biāo)放在此處按下回車鍵"><button class="btn btn-default btn-sm" @click="doClick(msg, $event)">點(diǎn) - 我</button><h4>prevent修飾符 - 阻止窗體提交</h4><form @submit.prevent><input type="email" placeholder="Email"><button type="submit" class="btn btn-default btn-sm" >submit</button></form><h4>沒有阻止窗體提交</h4><form><input type="email" placeholder="Email"><button type="submit" class="btn btn-default btn-sm" >submit</button></form><h4>stop修飾符 - 阻止事件向“上”傳播</h4> <div @keydown.enter="doSomeThing(1)"><div @keydown.enter.stop="doSomeThing(2)"><input type="text" @keydown.enter="doSomeThing(3)"></div> </div><h4>沒有阻止事件向“上”傳播</h4><div @keydown.enter="doSomeThing(1)"><div @keydown.enter="doSomeThing(2)"><input type="text" @keydown.enter="doSomeThing(3)"></div></div><h4>capture修飾符 - 改變事件傳播順序</h4><div @keydown.enter.capture="doSomeThing(1)"><div @keydown.enter.capture="doSomeThing(2)"><input type="text" @keydown.enter="doSomeThing(3)"></div></div> <p>結(jié)論：capture會(huì)在向上傳遞時(shí)享有有限級(jí)，存在多個(gè)captrue時(shí)，外層優(yōu)先級(jí)高于內(nèi)層</p><h4>once修飾符 - 一次性觸發(fā)</h4><input type="text" @keydown.enter.once="doSomeThing('我使用了.once')"><h4>self修飾符 - 只有自身“主動(dòng)被觸發(fā)”才執(zhí)行，“傳播”而來的不觸發(fā)</h4><div @click.self="doSomeThing('我是“外層div”，我被觸發(fā)了')" style="background-color: cornflowerblue; width: 300px; height: 28px;"><div @click="doSomeThing('我是“中間div”，我被觸發(fā)了')" style="background-color: deeppink; width: 200px; height: 28px;"><div @click.self="doSomeThing('我是“內(nèi)層”input,我被觸發(fā)了')" style="background-color: lightgreen; width: 100px; height: 28px;"></div></div></div><h4>系統(tǒng)修飾符與按鍵修飾符與exact修飾符</h4><input type="text" placeholder="按下的鍵中包括Enter鍵" @keydown.enter="doSomeThing('我被觸發(fā)了')"><input type="text" placeholder="按下ctrl+enter鍵觸發(fā)Alert" @keydown.ctrl.enter.exact="doSomeThing('我被觸發(fā)了')"><input type="text" placeholder="單單按下enter鍵觸發(fā)Alert" @keydown.enter.exact="doSomeThing('我被觸發(fā)了')"><input type="text" placeholder="想睡想睡想睡" @click.ctrl.exact="doSomeThing('想睡覺')"> </div><script>const data = {msg: ''}const methods = {doClick (msg, event) {console.log('-->start')console.log('type : '+event.type)console.log('target : '+event.target)console.log('button : '+event.button )console.log('tip : button 在 firefox 中 0 代表左鍵')console.log('-->end')},onSubmit () {alert('為什么總覺得自己該做點(diǎn)什么？')},doSomeThing (msg) {alert(msg)}}var vm = new Vue({el: '#app',data: data,methods:methods}) </script> </body> </html>小節(jié)
困，累，小節(jié)跳過...
總結(jié)
以上是生活随笔為你收集整理的我的 Vue.js 学习日记 （七） - 事件与修饰符的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SSM项目使用GoEasy 实现web消
- 下一篇： Vue.js 2.x笔记：表单绑定（3）