這系列的文章將紀錄我30天學習網頁前端框架Vue.js的過程,從基礎語法與核心概念(如:資料綁定、事件處理等),逐步延伸到更進階的主題(如:元件生命週期、Vue Router等),除了學習語法概念外,也會搭配範例程式碼和實作應用來增進對知識的理解。
隨著專案功能與操作愈來愈複雜,在模板內寫入過多的邏輯運算式,會讓程式看起來很雜亂並且也不利於維護,因此可以透過使用計算屬性computed來改善此問題。 計算屬...
昨天提到計算屬性 Computed 是根據相依的資料發生改變,才會重新執行運算,否則就會直接返回暫存的結果,而今天要介紹的監聽器 watch 是根據響應式資料發...
今天的內容將探討 Vue 元件的一生 Vue 的實體物件從開始創建、初始化資料、DOM 元素掛載、資料渲染與更新、卸載等過程,稱作生命週期。 Hooks fu...
Vue 的元件 ( component ) 是建立可重複使用、模組化 UI 的基礎,今天就來一探究竟吧! 元件是什麼? Vue 的實體 ( instance )...
昨天有提到 Vue 的實體是由元件所組成,而且元件可以被重複使用,當父元件需要向子元件傳遞資料時,需要透過 props 屬性 來實現資料傳遞。 Props 是什...
今天將延續昨天的內容,繼續介紹父元件向子元件傳遞資料的方式 Props Props 資料類型的驗證 當從外部傳入的 props 不符合資料類型的要求, Vu...
前兩天介紹的 props 是父元件向子元件傳遞資料的方式,若子元件要將更新的狀態傳回父元件,則需要透過 event 觸發父元件的更新。 子元件向父元件傳遞事件...
前面幾天的內容是在探討父元件和子元件間的資料傳遞,不過當根元件要傳遞到最底部的元件時,如果使用 props 一層一層傳遞,可能會影響到中間層元件造成額外的麻煩,...
在前面幾天探討了元件資料傳遞的方式,不過若想要傳遞的是 DOM 內容,使得元件在不同的地方,可以渲染不同的內容,並且仍保有相同的樣式,則需要透過使用插槽 Slo...
今天將延續昨天的內容,繼續介紹插槽 Slots 將父元件的內容渲染在子元件中指定的位置 條件插槽 若要根據插槽是否存在來渲染內容,可以使用 $slots 屬性和...