Skip to content
← All Skills
💚

Vue.js

FrontendOfficial Site ›

Progressive frontend framework — ใช้พัฒนา brokerage web application ที่ XSpring

What I Can Do

  • สร้าง single-page applications ด้วย Vue.js
  • ใช้ Composition API สำหรับ complex components
  • จัดการ state ด้วย Pinia / Vuex
  • Implement routing ด้วย Vue Router
  • สร้าง brokerage web application ที่ XSpring

Commands I Use Daily

bash
# สร้าง Vue project
npm create vue@latest

# development server
npm run dev

# build production
npm run build

# preview production build
npm run preview

# lint
npm run lint

Composition API vs Options API

  • Options API — จัดโครงสร้าง component ด้วย data(), methods, computed, watch เหมาะกับ simple components
  • Composition API — ใช้ setup() / <script setup>, จัดกลุ่ม logic ตาม feature แทนที่จะแยกตาม option type, reuse ด้วย composables
  • Vue 3+ แนะนำ Composition API สำหรับ complex components

Reactivity (ref / reactive)

  • ref — reactive reference สำหรับ primitive values, access ด้วย .value
  • reactive — reactive object สำหรับ nested data, access properties โดยตรง
  • Vue track dependencies อัตโนมัติ — เมื่อ reactive data เปลี่ยน, UI update ตาม

ตัวอย่าง: ใน <script setup lang="ts"> ใช้ const count = ref(0) สำหรับ primitive และ const user = reactive(...) สำหรับ object ที่มี name, role

Computed Properties

Computed = cached derived values — recalculate เมื่อ dependencies เปลี่ยนเท่านั้น ใช้แทน method เมื่อต้องการ caching เช่น const fullName = computed(() => ...) ที่รวม firstName.value กับ lastName.value

Watchers

watch / watchEffect — run side effects เมื่อ reactive data เปลี่ยน ใช้สำหรับ API calls, logging, sync external state

Templates & Directives

  • v-bind (:) — bind attributes
  • v-on (@) — event listeners
  • v-if / v-else / v-show — conditional rendering
  • v-for — list rendering (ต้องใส่ :key)
  • v-model — two-way data binding

Components

Single-File Components (SFC) = .vue files — <template>, <script>, <style> รวมในไฟล์เดียว <style scoped> สำหรับ component-scoped CSS

Props & Events

  • Props — data จาก parent, defineProps<{ title: string }>()
  • Events — child emit ขึ้น parent, defineEmits<{ (e: 'update', value: string): void }>()
  • ใช้ v-model สำหรับ two-way binding ระหว่าง parent-child

Vue Router

  • File-based routing — ใช้ unplugin-vue-router สำหรับ automatic routes
  • Navigation guards — beforeEach สำหรับ auth checks
  • Dynamic routes — /users/:id
  • Nested routes — children ใน route config

Pinia (State Management)

Pinia = official state management library สำหรับ Vue 3 — ง่ายกว่า Vuex, type-safe, composition-friendly ตัวอย่าง: defineStore('auth', () => ...) ที่มี ref สำหรับ user, computed สำหรับ isLoggedIn, และ async function login(credentials) — return state และ actions ออกมาเป็น object

Slots

Slots = content distribution — parent ส่ง content เข้า child component, <slot> default, <slot name="header"> named slots, scoped slots สำหรับ expose data กลับ parent

Provide / Inject

Dependency injection pattern — provide ที่ ancestor, inject ที่ descendant ไม่ต้อง prop drilling ผ่านทุก level ใช้สำหรับ theme, config, shared services

Lifecycle Hooks

  • onMounted — หลัง component mount เข้า DOM
  • onUpdated — หลัง reactive data เปลี่ยนและ DOM update
  • onUnmounted — cleanup ก่อน component ถูก remove
  • onBeforeMount, onBeforeUpdate, onBeforeUnmount

Related Skills

  • JavaScript — ภาษาพื้นฐาน
  • TypeScript — type safety สำหรับ Vue components
  • React.js — component-based UI library อีกตัว