鐵人檔案
本次主題延續去年的方向，同樣以《TypeScript x Vue.js 一氣呵成 前端開發大白到大神》張益琿編著，此書為核心參考，但將焦點更深入放在 Vue.js 的應用與特色上。Vue.js 作為現今前端開發中廣受歡迎的框架，擁有簡潔易上手的語法與強大的組件化設計，能夠大幅提升開發效率與專案維護性。帶大家一同認識 Vue.js 的核心觀念、元件設計思維以及如何結合 TypeScript 提升程式的可讀性與安全性。希望透過分享，讓參與者能更加理解 Vue.js 的價值與應用潛力，進一步拓展前端開發的視野。
元件中資料與事件的傳遞 如果在傳遞事件之前子元件還有一些內部的邏輯需要處理，也可以在子元件中包裝一個方法，在此方法內呼叫$emit進行事件傳遞，範例程式如下：...
元件中資料與事件的傳遞 在元件上使用v-model指令 我們通常將v-model稱為Vue中的雙向綁定指令，即對可互動使用者輸入的相關元素來說，使用這個指令可...
元件中資料與事件的傳遞 在元件上使用v-model指令 如果不使用 v-model 指令，要實現相同的效果也不是不可能，範例程式如下： <div id...
元件中資料與事件的傳遞 理解了這些，為自定義元件增加 v-model 支援就非常簡單。範例程式如下： <div id="Applicatio...
自定義元件的插槽 插槽是指HTML起始標籤與結束標籤中間的部分，通常在使用div標籤時，其內部的插槽位置既可以放置要顯示的文案，又可以巢狀結構放置其他標籤，例...
自定義元件的插槽 元件插槽的基本用法 首先，建立一個名為slot.html的檔案，在其中撰寫以下核心範例程式： <body> <d...
自定義元件的插槽 元件插槽的基本用法 如果要讓自定義元件支援插槽，需要使用slot標籤來指定插槽位置，例如： const containerComponen...
自定義元件的插槽 元件插槽的基本用法 對支援插槽的元件來說，也可以為插槽新增預設的內容，這樣當元件在使用時，如果沒有設定插槽內容，就會自動著色預設的內容，範例...
自定義元件的插槽 多具名插槽的用法 具名插槽是指為插槽設定一個具體的名稱，在使用元件時，可以透過插槽名稱來設定插槽的內容。 由於具名插槽可以非常明確地指定插槽...
