KD's Tech Blog

Hi, 我是 KD Chang 張凱迪,我在這書寫我的程式設計技術筆記 | KD's 技術部落格

軟體工程師和 Web 前後端開發技能樹/學習藍圖(Roadmap)


前端工程Frontend Roadmap / Frontend Beginner Roadmap HTML CSS JavaScript Version Control Systems/Git/Github npm Vue React Angular Tailwind Vitest Cypress TypeScript PWA SA......

常見 Web Frontend 前端工程師學習資源和工具


學習資源 前端開發大全手冊:The Front End Developer/Engineer Handbook 2024 100 天 CSS 練習挑戰 javascript30 greatfrontend 零基礎一年轉職前端工程師:完整路徑、心得、資源全公開 ...

常見 Web Frontend 前端工程師面試準備題目清單


前端工程面試準備清單 掌握基礎知識:在開始解決複雜問題之前,您需要確保對前端開發的基礎知識有扎實的理解,包括 HTML、CSS 和 JavaScript,以及它們如何協作來創建響應式和互動式的網頁。如果您認為自己在這些主題上仍需學習,請參考前端學習路線圖。 練習寫程式:通過小型專案或在 LeetCode 和 HackerRank 等平台上解決問題,來提升您的前端寫程式技能。專注於與前端開發......

Vue.js 3 官方入門語法教學筆記 [14] - Slots 插槽 | 學習筆記


Slots 插槽除了透過 Props 傳遞資料外,父元件還可以透過插槽將模板片段傳遞給子元件: <template> <ChildComp> 這是一些插槽內容! </ChildComp></template> 在子元件中,可以使用 <slot> 元素作為插槽來渲染父元件傳遞的內容: <template> &......

Vue.js 3 官方入門語法教學筆記 [12] - Emits 事件傳遞 | 學習筆記


Emits 事件傳遞除了接收 Props 之外,子元件也可以向父元件觸發事件: <script setup>// 宣告要觸發的事件const emit = defineEmits(['response'])// 觸發事件並傳遞參數emit('response', 'hello from child')</scrip......

Vue.js 3 官方入門語法教學筆記 [11] - Props 屬性 | 學習筆記


Props 屬性子元件可以透過 Props 接收來自父元件的輸入。首先,子元件需要宣告它所接收的 Props: <!-- ChildComp.vue --><script setup>const props = defineProps({ msg: String})</script> 注意,defineProps() 是一個編譯時的......

Vue.js 3 官方入門語法教學筆記 [10] - Components 元件 | 學習筆記


Components 元件到目前為止,我們只使用了一個單一的元件。實際的 Vue 應用程式通常是由巢狀元件所組成的。 父元件可以在其模板中渲染另一個元件作為子元件。要使用子元件,我們需要先匯入它: import ChildComp from './ChildComp.vue' 然後,我們可以在模板中使用該元件,如下所示: <template> <Ch......

Vue.js 3 官方入門語法教學筆記 [9] - Watchers 觀察者 | 學習筆記


Watchers 觀察者有時我們可能需要以反應性的方式執行「Side-effect 副作用」,例如,當一個數值改變時將其記錄到控制台。我們可以使用觀察者來實現這一點: import { ref, watch } from 'vue'const count = ref(0)watch(count, (newCount) => { // ......

Vue.js 3 官方入門語法教學筆記 [8] - Lifecycle and Template Refs 生命週期與模板引用 | 學習筆記


Lifecycle and Template Refs 生命週期與模板引用到目前為止,Vue.js 透過響應式資料與聲明式渲染,幫助我們處理了所有的 DOM 更新。然而,無可避免地會有需要手動操作 DOM 的情況。 我們可以使用特殊的 ref 屬性來請求模板引用 (template ref),也就是模板中某個元素的引用: 範例<template> <p ref="......

Vue.js 3 官方入門語法教學筆記 [7] - Computed Property 計算屬性 | 學習筆記


Computed Property 計算屬性讓我們在前一個待辦清單的範例基礎上繼續改進。這裡,我們已經為每個待辦項目新增了切換功能 (toggle),這是透過在每個待辦物件中新增一個 done 屬性,並使用 v-model 綁定到核取方塊來實現的: <template> <li v-for="todo in todos"> <inpu......