Bài 1: Các khái niệm cơ bản

<script setup>
import { ref } from 'vue'
const text = ref('')
</script>

<template>
  <input @input="text = $event.target.value" placeholder="Nhập gì đó">
  <p>Bạn nhập: {{ text }}</p>
</template>

7. Computed properties

Computed là giá trị tính toán tự động khi dữ liệu thay đổi.

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('Nguyễn')
const lastName = ref('Thành')

const fullName = computed(() => firstName.value + ' ' + lastName.value)
</script>

<template>
  <p>Họ: <input v-model="firstName"></p>
  <p>Tên: <input v-model="lastName"></p>
  <p>Họ và tên đầy đủ: {{ fullName }}</p>
</template>

8. Watchers

Watcher theo dõi sự thay đổi của biến và thực hiện hành động.

<script setup>
import { ref, watch } from 'vue'

const age = ref(20)

watch(age, (newVal, oldVal) => {
  console.log(`Tuổi thay đổi từ ${oldVal} → ${newVal}`)
})
</script>

<template>
  <input type="number" v-model="age">
  <p>Tuổi hiện tại: {{ age }}</p>
</template>

9. Reactive Data – ref và reactive

ref: dùng cho giá trị đơn (string, number, boolean…)

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">+1</button>
  <p>Count: {{ count }}</p>
</template>

reactive: dùng cho object phức tạp

<script setup>
import { reactive } from 'vue'

const user = reactive({
  name: 'Thanh',
  age: 25
})
</script>

<template>
  <p>Tên: <input v-model="user.name"></p>
  <p>Tuổi: <input type="number" v-model="user.age"></p>
  <p>Xin chào {{ user.name }} - {{ user.age }} tuổi</p>
</template>

🎯 Kết luận

Trong bài này bạn đã học:

• SPA là gì

• Tạo project Vue 3 với Vite

• createApp và cấu trúc dự án

• Template syntax {{ }}

• Các directive cơ bản với ví dụ

• Event handling

• Computed, Watcher

• Reactive data (ref, reactive)

👉 Đây là nền tảng để bạn tiếp tục sang Bài 2: Components trong Vue 3.