Học Vue.js 3 cơ bản – Bài 1: Các khái niêm cơ bản.

0
VueJS

Học Vue.js 3 cơ bản – Bài 1

Trong bài này, chúng ta sẽ cùng tìm hiểu nền tảng cơ bản của Vue 3, cách tạo project đầu tiên bằng Vite, và làm quen với các khái niệm: createApp, Template syntax, Directive, Event, Computed, Watchers, và Reactive data.

1. Hiểu khái niệm SPA (Single Page Application)

  • SPA là ứng dụng web chỉ có một trang HTML duy nhất, nội dung thay đổi dựa trên JavaScript mà không cần reload lại trang.

  • Vue.js giúp chúng ta xây dựng SPA dễ dàng: quản lý component, dữ liệu, routing, state.

Ví dụ: bạn truy cập /products hay /cart thì vẫn chỉ tải 1 file index.html, Vue sẽ tự hiển thị nội dung khác nhau.

2. Cài đặt dự án bằng Vite

Tạo project

npm create vite@latest vue3-basic
cd vue3-basic
npm install
npm run dev

Chọn Vue khi Vite hỏi framework.

Cấu trúc cơ bản

  • main.js: file khởi tạo Vue app

  • App.vue: component gốc

  • components/: chứa các component con

3. Khởi tạo project Vue 3

main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue 3 Basic</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

4. Template Syntax – Interpolation

Trong Vue, ta có thể chèn dữ liệu vào HTML bằng {{ }}.

App.vue

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

const message = ref('Xin chào Vue 3!')
</script>

<template>
  <h1>{{ message }}</h1>
</template>

 

5. Directive cơ bản với ví dụ minh họa

5.1 v-bind – binding thuộc tính

<script setup>
import { ref } from 'vue'
const imgUrl = ref('https://vuejs.org/images/logo.png')
</script>

<template>
  <img v-bind:src="imgUrl" alt="Vue Logo" width="100">
</template>

5.2 v-model – two-way binding

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

<template>
  <input v-model="name" placeholder="Nhập tên của bạn">
  <p>Xin chào, {{ name }}</p>
</template>

5.3 v-if – điều kiện hiển thị

<script setup>
import { ref } from 'vue'
const isLogin = ref(false)
</script><template>
<button @click=”isLogin = !isLogin”>
{{ isLogin ? ‘Đăng xuất’ : ‘Đăng nhập’ }}
</button>
<p v-if=”isLogin”>Bạn đã đăng nhập!</p>
</template>

5.4 v-for – lặp dữ liệu

<script setup>
const fruits = ['Táo', 'Cam', 'Chuối'] </script><template>
<ul>
<li v-for=”(fruit, index) in fruits” :key=”index”>{{ fruit }}</li>
</ul>
</template>

5.5 v-show – ẩn/hiện bằng CSS

<script setup>
import { ref } from 'vue'
const showText = ref(true)
</script><template>
<button @click=”showText = !showText”>Ẩn/Hiện</button>
<p v-show=”showText”>Đoạn văn này có thể ẩn/hiện bằng CSS</p>
</template>

5.6 v-on – lắng nghe sự kiện

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script><template>
<button v-on:click=”count++”>Bấm tôi</button>
<p>Bạn đã bấm {{ count }} lần</p>
</template>

6. Event handling (@click, @input)

Có thể viết ngắn gọn v-on:click thành @click.

<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)

Ngan Tran

Related Articles

Học Vue.js 3 cơ bản – Bài 2: Components
Read More