xDev Asia

Vue.js là gì, triết lý "progressive framework". So sánh Vue vs React vs Angular vs Svelte. Vue DevTools, Vite setup. Single File Components, template syntax.

Vue.js & Nuxt: Từ Cơ bản đến Nâng cao

Phần 1: Vue.js Fundamentals

xdev.asia

1. Vue.js là gì?

Vue.js là một progressive framework cho xây dựng giao diện người dùng. "Progressive" nghĩa là bạn có thể bắt đầu đơn giản rồi mở rộng dần — từ một thư viện nhỏ đến full-stack framework với Nuxt.

Feature	Vue	React	Angular	Svelte
Kiểu	Progressive	Library	Full Framework	Compiler
Reactivity	Proxy-based	Virtual DOM	Zone.js	Compile-time
Template	HTML-based	JSX	HTML + directives	HTML-like
State	Pinia	Redux/Zustand	RxJS/NgRx	Stores
SSR	Nuxt	Next.js	Angular Universal	SvelteKit
Learning curve	Dễ	Trung bình	Khó	Dễ

2. Setup với Vite

# Tạo project Vue + TypeScript
npm create vue@latest my-app

# Options:
# ✔ TypeScript? Yes
# ✔ JSX Support? No
# ✔ Vue Router? Yes
# ✔ Pinia? Yes
# ✔ Vitest? Yes
# ✔ ESLint? Yes
# ✔ Prettier? Yes

cd my-app
npm install
npm run dev

3. Single File Component (SFC)

<!-- HelloWorld.vue -->
<script setup lang="ts">
import { ref } from 'vue'

const message = ref('Xin chào Vue.js!')
const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <div class="container">
    <h1>{{ message }}</h1>
    <p>Count: {{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<style scoped>
.container {
  padding: 1rem;
}
button {
  padding: 0.5rem 1rem;
  cursor: pointer;
}
</style>

4. Template Syntax

<template>
  <!-- Text interpolation -->
  <p>{{ message }}</p>
  <p>{{ count * 2 }}</p>

  <!-- Attribute binding -->
  <a :href="url">Link</a>
  <img :src="imageUrl" :alt="title" />

  <!-- Event handling -->
  <button @click="handleClick">Click</button>
  <button @click="count++">+1</button>
  <input @keydown.enter="submit" />

  <!-- Two-way binding -->
  <input v-model="name" />
  <p>Xin chào, {{ name }}!</p>

  <!-- Conditional rendering -->
  <p v-if="count > 10">Lớn hơn 10</p>
  <p v-else-if="count > 5">Lớn hơn 5</p>
  <p v-else>Nhỏ hơn hoặc bằng 5</p>

  <!-- List rendering -->
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

5. Vue DevTools

Cài đặt Vue DevTools extension trên Chrome/Firefox để debug:

Xem component tree và state
Track Pinia stores
Inspect Vue Router
Timeline events
Performance profiling

6. Cấu trúc Project

my-app/
├── src/
│   ├── assets/         # Static assets
│   ├── components/     # Reusable components
│   ├── composables/    # Custom composables
│   ├── layouts/        # Layout components
│   ├── pages/          # Page components (if using vue-router)
│   ├── router/         # Vue Router config
│   ├── stores/         # Pinia stores
│   ├── types/          # TypeScript types
│   ├── App.vue         # Root component
│   └── main.ts         # Entry point
├── public/             # Static files
├── index.html
├── vite.config.ts
└── tsconfig.json