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

Vue3 Options API 和 Composition API 風格差異教學筆記 | 學習筆記

前言根據官方文件的說明，一般來說 Vue 元件可以用兩種不同的 API 風格來撰寫：Options API 和 Composition API。 Options API使用 Options API 時，我們透過一個包含 data、methods 和 mounted 等選項的物件來定義元件邏輯。選項中定義的屬性會在函式內透過 this 曝露，this 指向的是元件實例。 <script......

Posted by kdchang on 2020-11-16

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

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

FRIENDS