我的 Vue.js 学习日记 （七） - 事件与修饰符
生活随笔
收集整理的這篇文章主要介紹了
我的 Vue.js 学习日记 （七） - 事件与修饰符
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
上節(jié)回顧
上節(jié)寫了一個v-for與table的簡單互動，腦子里回憶一下，嗯 ~ 還是回去再看一遍吧...
本節(jié)目標
今天看一下事件與修飾符，并且把有疑惑的地方敲一遍，親眼看一下輸出結果。由于時間有限，今天只寫了prevent stop capture exact once這五個修飾符。
事件
事件就不多說了，v-on: 簡寫 @ 。
修飾符
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標簽一起使用
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:對于嵌套的元素，元素同時有的事件會向外進行擴散
capture - 改變事件傳播順序
<div @keydown.enter.capture="doSomeThing(1)"><div @keydown.enter.capture="doSomeThing(2)"><input type="text" @keydown.enter="doSomeThing(3)"></div> </div>tip:catpture會在向上傳遞時享有優(yōu)先執(zhí)行權，當存在多個capture時，更外層的優(yōu)先權更高
once - 一次性觸發(fā)
<input type="text" @keydown.enter.once="doSomeThing('我使用了.once')">tip:觸發(fā)過一次后不可用，當然前提是不刷新
exact - 取該修飾符之前所有事件和修飾符的與關系
<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 頁，觀察輸出結果</h3><h4>$event</h4><input type="text" v-model="msg" @keydown.enter="doClick(msg, $event)" placeholder="光標放在此處按下回車鍵"><button class="btn btn-default btn-sm" @click="doClick(msg, $event)">點 - 我</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>結論：capture會在向上傳遞時享有有限級，存在多個captrue時，外層優(yōu)先級高于內層</p><h4>once修飾符 - 一次性觸發(fā)</h4><input type="text" @keydown.enter.once="doSomeThing('我使用了.once')"><h4>self修飾符 - 只有自身“主動被觸發(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('我是“內層”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('為什么總覺得自己該做點什么？')},doSomeThing (msg) {alert(msg)}}var vm = new Vue({el: '#app',data: data,methods:methods}) </script> </body> </html>小節(jié)
困，累，小節(jié)跳過...
總結
以上是生活随笔為你收集整理的我的 Vue.js 学习日记 （七） - 事件与修饰符的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SSM项目使用GoEasy 实现web消
- 下一篇： 【晒出你的第83行代码】阿里研究员福贝，