KD's Tech Blog

Hi, 我是 KD Chang 張凱迪，我在這書寫我的軟體開發/程式設計技術筆記 | KD 技術部落格

Vue.js 3 官方入門語法教學筆記 [6] - List Rendering 表單綁定 | 學習筆記

List Rendering 列表渲染我們可以使用 v-for 指令根據一個來源陣列來渲染元素列表： <template> <ul> <li v-for="todo in todos" :key="todo.id"> {{ todo.text }} &l......

Posted by kdchang on 2021-02-05

Vue.js 3 官方入門語法教學筆記 [5] - Conditional Rendering 表單綁定 | 學習筆記

Conditional Rendering 條件渲染在 Vue 中，我們可以使用 v-if 指令來條件式渲染元素： <template> <h1 v-if="awesome">Vue is awesome!</h1></template> 這個 <h1> 只有在 awesome 的值為真值時才會被渲染。如果 ......

Posted by kdchang on 2021-02-04

Vue.js 3 官方入門語法教學筆記 [4] - Form Bindings 表單綁定 | 學習筆記

Form Bindings 表單綁定使用 v-bind 和 v-on 結合，我們可以對表單輸入元素創建雙向綁定： <template> <input :value="text" @input="onInput"> <p>{{ text }}</p></te......

Posted by kdchang on 2021-02-03

Vue.js 3 官方入門語法教學筆記 [3] - Event Listeners 事件監聽器 | 學習筆記

Event Listeners 事件監聽器在 Vue 中，我們可以使用 v-on 指令監聽 DOM 事件： <template> <button v-on:click="increment">{{ count }}</button></template> 由於 v-on 的使用頻率......

Posted by kdchang on 2021-02-02

Vue.js 3 官方入門語法教學筆記 [2] - Attribute Bindings 屬性綁定 | 學習筆記

Attribute Bindings 屬性綁定在 Vue 中，Mustache 語法只能用於文字插值。要將屬性綁定到動態值，我們需要使用 v-bind 指令： <template> <div v-bind:id="dynamicId"></div></template> 指令是一種特殊的屬性，以 v- 前綴開頭，屬於 V......

Posted by kdchang on 2021-02-01

Vue.js 3 官方入門語法教學筆記 [1] - Declarative Rendering 聲明式渲染 | 學習筆記

Declarative Rendering 聲明式渲染在 Vue3 我們常看到的是 Vue 單文件元件 (SFC)。SFC 是一個可重用的、獨立的程式碼區塊，它將相關的 HTML、CSS 和 JavaScript 封裝在一起，並寫在一個 .vue 文件中。 Vue 的核心特性是聲明式渲染：使用擴展 HTML 的模板語法，我們可以根據 JavaScript 的狀態描述 HTML 應該如何呈現。......

Posted by kdchang on 2021-01-31

JavaScript 箭頭函式 (Arrow Function）入門教學筆記 | 學習筆記

在 JavaScript 的 箭頭函式 (Arrow Function, =>) 中，this 的行為與傳統的 函式表達式 (Function Expression) 不同，主要特點如下： 箭頭函式的 this 綁定 箭頭函式不會建立自己的 this，而是繼承定義它的上下文（也稱為 詞法作用域 Lexical Scope）。 在箭頭函式內部，this 指向的是箭頭函式所處的外部函式的......

Posted by kdchang on 2021-01-16

async/await 入門教學筆記 | 學習筆記

async 和 await 是 JavaScript 中處理非同步操作的語法糖，它們使得非同步代碼更加易讀和易寫，避免了傳統回調函數（callback）或 Promise 的 .then() 鏈式調用的冗長性。 1. async 關鍵字async 是一個關鍵字，用來標記一個函數為「非同步函數」。非同步函數會隱式地返回一個 Promise，並且在函數內部，你可以使用 await 來等待非同步操......

Posted by kdchang on 2021-01-16

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

在 JavaScript 開發中，理解 Call Stack（呼叫堆疊） 是掌握執行流程與錯誤除錯的關鍵概念之一。它決定了程式碼執行的順序，也與同步與非同步行為密切相關。本文將深入介紹 Call Stack 的基本原理，並透過實際範例幫助你理解它的運作方式。 1. 什麼是 Call Stack？Call Stack 是 JavaScript 引擎用來管理函式呼叫的結構，它遵循 LIFO（L......

Posted by kdchang on 2021-01-16

JavaScript let 閉包（Closure）入門教學筆記 | 學習筆記

什麼是閉包（Closure）？閉包是 JavaScript 中的一個強大概念，它允許函式「記住」其外部作用域（lexical scope），即使該作用域已經執行完畢並離開了執行環境。閉包使得函式能夠存取其外部函式內部的變數，而這些變數通常在外部函式執行結束後仍然可以被存取。 在 JavaScript 中，每當一個函式被創建時，它都會自動獲得對其外部變數的存取權，這就是閉包的核心概念。 閉包......

Posted by kdchang on 2021-01-16

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

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

FRIENDS