KD's Tech Blog

軟體工程和產品專案管理現場觀察：關於軟體開發/程式設計/工程思維的技術部落格

JavaScript 入門教學筆記 | 學習筆記

前言JavaScript（簡稱 JS）是一種高階、直譯式、弱型別的程式語言，廣泛應用於 Web 開發。它最初用於瀏覽器端，現在也能在伺服器端（如 Node.js）運行，並支援多種應用開發，如網頁、行動應用、桌面應用等。 1. JavaScript 的基本語法1.1 變數與常數在 JavaScript 中，可以使用 var、let 或 const 來宣告變數。 var a = 10; /......

Posted by kdchang on 2021-12-14

CSS transform 入門教學筆記 | 學習筆記

前言CSS transform 屬性是一個強大的工具，可以用來對 HTML 元素進行旋轉、縮放、移動及傾斜等變換，而不會影響其他元素的佈局。這使得 transform 非常適合用來建立動畫效果、視覺調整以及 UI 微調。 1. transform 基礎概念transform 屬性可以接受一個或多個變換函數，使元素在不影響文檔流的情況下進行變換。這些變換主要包含： 平移 (translate......

Posted by kdchang on 2021-12-13

HTML 入門教學筆記 | 學習筆記

1. 什麼是 HTML？HTML（HyperText Markup Language，超文本標記語言）是建立網頁的標準語言。它用標籤（tags）來結構化內容，讓瀏覽器能夠解析並顯示網頁。HTML 主要負責網頁的結構，而樣式與行為則交由 CSS 和 JavaScript 負責。 2. HTML 文件基本結構一個基本的 HTML 文件包含以下部分： <!DOCTYPE html>......

Posted by kdchang on 2021-12-13

Python Decorator 入門教學筆記 | 學習筆記

前言在 Python 的日常開發中，decorator（裝飾器） 是一個非常強大的語法工具，常用於增強函式功能，例如：記錄日誌、驗證權限、計時、快取等。在許多框架（如 Flask、Django）或第三方函式庫中，也可以經常看到裝飾器的身影。 然而對初學者來說，decorator 的語法可能一開始比較難以理解，尤其涉及到函式是「第一類物件（first-class object）」、「閉包（cl......

Posted by kdchang on 2021-12-13

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

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

Posted by kdchang on 2021-02-13

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

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

Posted by kdchang on 2021-02-11

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

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

Posted by kdchang on 2021-02-10

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

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

Posted by kdchang on 2021-02-09

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

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

Posted by kdchang on 2021-02-08

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

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

Posted by kdchang on 2021-02-07

ABOUT ME
KD's Tech Blog 技術部落格 | KD Chang 張凱迪

KD Chang 張凱迪（@kdchang），台灣大學，主修經濟學，臺大資管所畢業。是一個軟體工程師，也是一位 PM 產品專案經理和教育工作者。曾服務過上市網路軟體公司、上市科技電子公司、台灣 AI 人工智慧新創獨角獸公司，也曾參與數個新創組織的創辦和多個網路產品服務的開發。A Software Engineer, Product/Project Manager & Educator.:)

FRIENDS