前端框架御三家之一的 Vue，在 2020 年第四季迎來的第三代版本，代號為 One Piece。雖說已略為上手 2.0 版，決定藉由 HiSKIO 2020 Vue3 專業職人 的課程，來加速自己的熟悉程度。這篇會筆記下 Vue 3.0 的中關於 事件修飾符、HTML 注入 的用法 ，以及自己開發上的一些補充。
課程相關資訊
[連結]：https://hiskio.com/courses/286/lectures/20884
本篇範圍：Chapter 4 ( JavaScript ES6 ) ，一共有 12 篇
請注意：本系列文章為個人對應課程的消化吸收後，所整理出來的內容。換言之，並不一定會包含全部的課程內容，也有可能會添加其他資源來說明。
筆記
1. 計算跟判斷的邏輯是要拆開的，避免在 watch 內使用過度的 nested 結構。
2. v-html 如同 .innerHTML，若有惡意的 JavaScript 字串，會一同被執行。
3. 事件修飾符，如 .stop, .prevent…等是有執行先後順序的，需要視情況來調整。最常用的為 @click.prevent (對應 e.preventDefault()) 和 @click.stop (對應 e.stopPropagation()) 。當然，你也可以串接兩者一起使用，如 @click.stop.prevent
程式碼範例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div id="app"> <a class="card" href="#" @click.prevent="gotoGooglePage"> <div class="img-box"> <img src="./images/courses.jpg" alt="" /> <p class="info" @click.prevent.stop="gotoFacebook">Facebook</p> </div> <div class="text-box"> <p>Some Texts here</p> </div> </a> </div> <script> const app = { setup() { const gotoGooglePage = () => { window.open("https://www.google.com"); }; const gotoFacebook = () => { window.open("https://www.facebook.com"); }; return { gotoGooglePage, gotoFacebook, }; }, }; Vue.createApp(app).mount("#app"); </script> |
