KD's Tech Blog

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

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

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

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

Posted by kdchang on 2021-02-06

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

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

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

FRIENDS