Vue3.0使用v-on指令(縮寫為@符號)來監聽DOM事件，並在觸發事件時執行一些 JavaScript函式。語法為 v-on:click="函式名" 或@click="函式名"。
8.1 事件處理如果你有看過前面的章節，應該知道響應使用者操作事件的函式是放在methods裡面的。為了省點程式碼，繫結事件，我就不用v-on了，而用其縮寫的@，不懂得偷懶的程式設計師，不是好工程師啊。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Vue3.0計算屬性</title> <script src="vue.global.js"></script></head><body><span id="app"><button @click="say">老陳說</button></span><script> Vue.createApp({ data() { }, methods: { say() { alert("老陳說，愛程式設計的人真酷!") } }, }).mount("#app")</script></body></html>輸出結果(按下按鈕)
8.2 傳遞引數Vue事件繫結，除了支援直接繫結到一個方法外，也可以在內聯JavaScript語句中呼叫方法。說白了，就是可以直接在函式中傳遞引數。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Vue3.0計算屬性</title> <script src="vue.global.js"></script></head><body><span id="app"><button @click="say('老陳說')">老陳說</button><br/><br/><button @click="say('老頭說')">老頭說</button></span><script> Vue.createApp({ data() { }, methods: { say(title) { alert(title + "，愛程式設計的人真酷!") } }, }).mount("#app")</script></body></html>輸出結果(按下按鈕)
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Vue3.0計算屬性</title> <script src="vue.global.js"></script> <style> .menu { border: 1px solid darkgreen; width: 100px; height: 150px; padding-top: 20px; padding-left: 20px; } </style></head><body><div class="menu" id="app"> <button name="save" @click="opt">儲存</button> <br/> <br/> <button name="open" @click="opt">開啟</button> <br/> <br/> <button name="print" @click="opt">列印</button></div><script> Vue.createApp({ data() { }, methods: { opt(event) { let opt = event.target.name let src = event.target.tagName alert('知道你點了 ' + opt + ' ' + src + ',我馬上處理.') } }, }).mount("#app")</script></body></html>輸出結果
細心的人，可能會想到，如果想要監聽事件源，又想要傳遞引數時，Vue又當如何處理，不要急，你想到的，我也想到了，Vue創始人也想到了。傳遞引數時，將$event引數也傳過去就好了。
<div class="menu" id="app"> <button name="save" @click="opt('儲存',$event)">儲存</button> <br/> <br/> <button name="open" @click="opt('開啟',$event)">開啟</button> <br/> <br/> <button name="print" @click="opt('列印',$event)">列印</button></div><script> Vue.createApp({ data() { }, methods: { opt(name, event) { let opt = event.target.name let src = event.target.tagName alert('知道你點了 ' + opt + '(' + name + ') ' + src + ',我馬上處理.') } }, }).mount("#app")</script>輸出結果
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Vue3.0計算屬性</title> <script src="vue.global.js"></script> <style> .menu { border: 1px solid darkgreen; width: 100px; height: 150px; padding-top: 20px; padding-left: 20px; } </style></head><body><div class="menu" id="app"> <button @click="add(6),sub(3)">加減</button></div><script> let result = 0 Vue.createApp({ data() { }, methods: { add(num) { result += num }, sub(num) { result -= num alert('一炮雙響，結果是：' + result) } }, }).mount("#app")</script></body></html>輸出結果
8.5 按鍵修飾符不知你在用鍵盤輸入多項內容之後，是否有按下回車鍵的習慣，如果沒有，那證明你打字很慢，如果有，那證明你不是程式設計師，而是打字員(哈哈~~,什麼鬼邏輯)。
在較完善的系統中，當用戶按下回車鍵(或其他鍵)時，都會有響應的。為了解決這個問題，Vue允許為v-on或者@在監聽鍵盤事件時新增按鍵修飾符。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Vue3.0計算屬性</title> <script src="vue.global.js"></script> <style> .menu { border: 1px solid darkgreen; width: 100px; height: 150px; padding-top: 20px; padding-left: 20px; } </style></head><body><div class="menu" id="app"> <button @keyup.enter="submit" @click="submit" type="submit">確定</button></div><script> let result = 0 Vue.createApp({ data() { }, methods: { submit() { alert('你明明按下了回車鍵，別耍賴,趕緊分享文章') } }, }).mount("#app")</script></body></html>輸出結果
#前端##Vue.js##JavaScript##程式設計師##Web#
最新評論