🎯 1. Mục tiêu bài học

Trong 8 bài đầu tiên, chúng ta đã học JavaScript hiện đại và cách sử dụng JavaScript để giao tiếp với Laravel REST API.

Bây giờ chúng ta bắt đầu một công nghệ mới: Vue.js.

Sau bài học này, bạn sẽ hiểu:

Vue.js là gì?
Tại sao cần Vue khi đã có JavaScript?
Vue giải quyết những vấn đề nào?
Vue hoạt động như thế nào?
Component trong Vue là gì?
Vue khác JavaScript thuần và jQuery như thế nào?
Khi nào nên sử dụng Vue trong Laravel?

2. Vue.js là gì?

Logo Vue.js – Logos PNG

Vue.js

Vue.js là một JavaScript Framework dùng để xây dựng giao diện người dùng (User Interface).

Website: vuejs.org

Nói đơn giản:

HTML dùng để xây dựng cấu trúc giao diện.
CSS dùng để thiết kế giao diện.
JavaScript dùng để xử lý logic và tương tác.
Vue.js giúp tổ chức JavaScript và giao diện thành một hệ thống dễ quản lý hơn.

Ví dụ, chúng ta muốn xây dựng trang quản lý bài viết.

Trang web cần có:

Danh sách bài viết.
Form thêm bài viết.
Nút sửa bài viết.
Nút xóa bài viết.
Tìm kiếm bài viết.
Phân trang.

Nếu sử dụng JavaScript thuần, chúng ta phải tự quản lý rất nhiều thao tác DOM và trạng thái dữ liệu.

Vue giúp đơn giản hóa những công việc này.

3. Tại sao cần Vue khi đã có JavaScript?

Đây là câu hỏi quan trọng nhất.

JavaScript hoàn toàn có thể xây dựng một ứng dụng web lớn.

Tuy nhiên, khi ứng dụng phát triển, việc quản lý dữ liệu và giao diện bằng JavaScript thuần sẽ trở nên phức tạp.

Hãy xem ví dụ.

3.1. Sử dụng JavaScript thuần

HTML:

<h2 id="counter">0</h2>

<button id="btn">
    Tăng số
</button>

JavaScript:

let count = 0;

document.getElementById('btn')
    .addEventListener('click', function() {

        count++;

        document.getElementById('counter')
            .textContent = count;

    });

Mỗi khi người dùng nhấn nút:

JavaScript tăng biến count.
Tìm phần tử HTML.
Thay đổi nội dung HTML.

Chúng ta phải tự cập nhật giao diện.

3.2. Sử dụng Vue.js

HTML:

<div id="app">

    <h2>{{ count }}</h2>

    <button @click="count++">
        Tăng số
    </button>

</div>

JavaScript:

const app = Vue.createApp({

    data() {

        return {
            count: 0
        };

    }

});

app.mount('#app');

Điểm khác biệt:

Khi count thay đổi, Vue tự động cập nhật giao diện liên quan.

Chúng ta không cần gọi:

document.getElementById()

Không cần tự viết:

textContent = count;

🔍 So sánh trực quan

JavaScript thuần

Tự cập nhật DOM

Dữ liệu thay đổi → JavaScript tìm DOM → Cập nhật HTML

Vue.js

Tự động cập nhật giao diện

Dữ liệu thay đổi → Vue phát hiện → Cập nhật giao diện liên quan

Đây chính là một trong những ưu điểm quan trọng nhất của Vue: Reactive Data Binding (liên kết dữ liệu phản ứng).

4. Vue hoạt động như thế nào?

Vue hoạt động dựa trên cơ chế phản ứng dữ liệu (Reactivity).

Hãy tưởng tượng chúng ta có một biến:

count = 10;

Giao diện hiển thị:

<h2>10</h2>

Khi biến thay đổi:

count = 20;

Vue nhận biết dữ liệu đã thay đổi và cập nhật giao diện:

<h2>20</h2>

Mô hình:

Exploring Vue’s Virtual DOM and Render Functions | by Cibilex | Medium

medium.com

Quy trình:

       DATA
         │
         ▼
    Vue Reactivity
         │
         ▼
   Template Rendering
         │
         ▼
        DOM
         │
         │ Người dùng tương tác
         ▼
    Thay đổi dữ liệu
         │
         └──────────► Vue cập nhật lại DOM

Điều cần nhớ:

Trong Vue, chúng ta tập trung thay đổi dữ liệu thay vì trực tiếp thao tác DOM.

5. Component là gì?

Component là một trong những khái niệm quan trọng nhất của Vue.

Component có thể hiểu là một thành phần giao diện độc lập, có thể tái sử dụng.

Ví dụ, một trang quản trị có nhiều thành phần:

Vue.js: o que é, como funciona e como começar a usar esse framework JS | Alura

alura.com.br

Header.
Sidebar.
Menu.
Product List.
Product Form.
Footer.

Thay vì viết tất cả trong một file HTML lớn, chúng ta có thể chia thành nhiều Component.

Ví dụ cấu trúc:

src/
│
├── App.vue
│
├── components/
│   ├── Header.vue
│   ├── Sidebar.vue
│   ├── Footer.vue
│   ├── PostList.vue
│   └── PostForm.vue
│
└── main.js

Mỗi component đảm nhận một nhiệm vụ riêng.

Ví dụ:

Header.vue

<template>

    <header>

        <h2>Quản lý bài viết</h2>

    </header>

</template>

PostList.vue

<template>

    <div>

        <h3>Danh sách bài viết</h3>

        <ul>
            <li>Học Laravel 13</li>
            <li>Học Vue.js</li>
        </ul>

    </div>

</template>

App.vue

<template>

    <Header />

    <PostList />

</template>

Như vậy, chúng ta có thể xây dựng ứng dụng từ những thành phần nhỏ.

6. Vue khác JavaScript thuần và jQuery như thế nào?

Đây là bảng so sánh rất đáng nhớ.

Tiêu chí	JavaScript thuần	jQuery	Vue
Ngôn ngữ	JavaScript	JavaScript	JavaScript
Thao tác DOM	Thủ công	Đơn giản hóa	Vue quản lý
Reactive	Tự xây dựng	Không có sẵn	Có
Component	Tự tổ chức	Không có sẵn	Có
Data Binding	Tự xây dựng	Không có sẵn	Có
Tái sử dụng giao diện	Tự tổ chức	Tự tổ chức	Component
Ứng dụng lớn	Có thể	Có thể	Phù hợp

Lưu ý: jQuery vẫn hữu ích trong nhiều hệ thống cũ và các tác vụ DOM đơn giản. Tuy nhiên, Vue có hệ thống quản lý dữ liệu và component phù hợp hơn với ứng dụng giao diện hiện đại.

7. Vue có thể kết hợp với Laravel như thế nào?

Đây là nội dung quan trọng đối với khóa học của chúng ta.

Laravel đảm nhiệm Backend.

Vue đảm nhiệm Frontend.

Hai bên giao tiếp thông qua REST API.

Vue 4 + Laravel: The Best Full-Stack Combo for SMBs | by Muhammad Usman Nadeem | Apr, 2026 | Medium

medium.com

Mô hình:

┌──────────────────────────┐
│        VUE.JS            │
│                          │
│  Components              │
│  Pages                   │
│  Router                  │
│  Pinia                   │
│                          │
└────────────┬─────────────┘
             │
             │ HTTP / JSON
             │
             ▼
┌──────────────────────────┐
│       LARAVEL 13         │
│                          │
│       REST API           │
│                          │
│       Controller         │
│                          │
│       Model              │
└────────────┬─────────────┘
             │
             ▼
┌──────────────────────────┐
│        MYSQL             │
└──────────────────────────┘

Ví dụ:

Vue muốn lấy danh sách bài viết.

Vue gửi request:

fetch('http://localhost:8000/api/posts')

Laravel trả về JSON:

[
    {
        "id": 1,
        "title": "Laravel 13"
    },
    {
        "id": 2,
        "title": "Vue.js"
    }
]

Vue nhận dữ liệu và hiển thị lên giao diện.

Chúng ta không cần tải lại toàn bộ trang web sau mỗi thao tác CRUD.

Đây là nền tảng để xây dựng SPA (Single Page Application).

8. Vue có những ưu điểm gì?

8.1. Dễ học

Vue sử dụng JavaScript, HTML và CSS quen thuộc.

Người đã học JavaScript có thể tiếp cận Vue tương đối nhanh.

8.2. Reactive

Dữ liệu thay đổi, giao diện tự động cập nhật.

8.3. Component

Chia ứng dụng thành nhiều thành phần độc lập.

8.4. Tái sử dụng

Một component có thể được sử dụng ở nhiều trang khác nhau.

8.5. Hệ sinh thái phong phú

Một số công cụ quan trọng:

Công cụ	Chức năng
Vue Router	Quản lý điều hướng
Pinia	Quản lý trạng thái
Vite	Build và phát triển ứng dụng
Axios	Gửi HTTP Request
Vue Devtools	Kiểm tra và debug Vue

9. Khi nào nên sử dụng Vue?

Không phải website nào cũng cần Vue.

Chúng ta có thể chia thành 3 trường hợp:

Loại ứng dụng	Công nghệ phù hợp
Website giới thiệu, nội dung tĩnh	Blade + CSS + JS
Website có tương tác vừa phải	JavaScript hoặc Vue từng phần
Dashboard, CRM, ERP, Blog SPA	Vue + Laravel API

Ví dụ thực tế:

Trường hợp 1: Website giới thiệu công ty

Có trang chủ, giới thiệu, dịch vụ, liên hệ.

Laravel Blade là đủ.

Trường hợp 2: Website quản lý bán hàng

Có sản phẩm, giỏ hàng, đơn hàng, thống kê, tìm kiếm, bộ lọc.

Vue sẽ giúp quản lý giao diện và dữ liệu thuận tiện hơn.

Trường hợp 3: Hệ thống quản trị Blog SPA

Có đăng nhập, quản lý bài viết, phân quyền, dashboard.

Vue + Laravel REST API là một lựa chọn phù hợp.

10. Thực hành: Mô phỏng Vue Reactive Counter

Chúng ta thử trải nghiệm Vue ngay trong trình duyệt bằng CDN, chưa cần cài đặt Vite.

Vue Counter Demo

Interactive

Giá trị hiện tại

0

Giá trị thay đổi sẽ được phản ánh trên giao diện

Giảm Tăng

Đặt lại

Đây là mô phỏng cơ chế Reactive bằng giao diện tương tác, chưa phải ứng dụng Vue đang chạy.

Code Vue thực tế:

Tạo file index.html:

<!DOCTYPE html>
<html lang="vi">

<head>
    <meta charset="UTF-8">
    <title>Vue Counter</title>
</head>

<body>

    <div id="app">

        <h2>{{ count }}</h2>

        <button @click="count++">
            Tăng
        </button>

        <button @click="count--">
            Giảm
        </button>

    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <script>

        const app = Vue.createApp({

            data() {

                return {
                    count: 0
                };

            }

        });

        app.mount('#app');

    </script>

</body>

</html>

Mở file trên trình duyệt để chạy thử.

Chúng ta vừa tạo ứng dụng Vue đầu tiên mà chưa cần Vite hay Node.js.

11. Bài tập thực hành

THỰC HÀNH

Hãy trả lời các câu hỏi sau:

Câu 1: Vue.js là gì?

A. Một ngôn ngữ lập trình mới.
B. Một JavaScript Framework.
C. Một hệ quản trị database.

Câu 2: Ưu điểm quan trọng của Vue là gì?

A. Tự động cập nhật giao diện khi dữ liệu thay đổi.
B. Thay thế hoàn toàn Laravel.
C. Thay thế MySQL.

Câu 3: Component dùng để làm gì?

A. Lưu dữ liệu database.
B. Chia giao diện thành các thành phần độc lập.
C. Tạo HTTP Server.

Kiểm tra kiến thức

0/3 câu

Câu 1. Vue.js là gì?

A. Ngôn ngữ lập trình mới

B. JavaScript Framework

C. Hệ quản trị database

Câu 2. Ưu điểm quan trọng của Vue là gì?

A. Tự cập nhật giao diện khi dữ liệu thay đổi

B. Thay thế Laravel

C. Thay thế MySQL

Câu 3. Component dùng để làm gì?

A. Lưu dữ liệu database

B. Chia giao diện thành các thành phần độc lập

C. Tạo HTTP Server

Chấm điểm

12. Tổng kết Bài 09

Qua bài học này, chúng ta đã hiểu:

Vue.js là JavaScript Framework.
Vue giúp quản lý giao diện và dữ liệu hiệu quả.
Reactive giúp giao diện tự động cập nhật.
Component giúp chia nhỏ và tái sử dụng giao diện.
Vue có thể kết hợp Laravel REST API.
Vue phù hợp với ứng dụng quản trị và SPA.

Điều quan trọng nhất cần ghi nhớ:

JavaScript là nền tảng, Vue là công cụ giúp chúng ta tổ chức và phát triển ứng dụng giao diện lớn một cách có hệ thống.

🚀 BÀI 10 — CÀI ĐẶT VUE + VITE

Ở bài tiếp theo, chúng ta sẽ bắt đầu xây dựng môi trường lập trình Vue chuyên nghiệp:

Node.js và npm là gì?
Vite là gì?
Cài đặt Vue 3.
Tạo project Vue bằng Vite.
Cấu trúc thư mục Vue.
Chạy ứng dụng bằng npm run dev.
Kết nối project Vue với Laravel.

Mục tiêu: Tạo thành công project Vue 3 đầu tiên và sẵn sàng xây dựng ứng dụng thực tế.

✨ Made by AI · 📘 Lớp học công nghệ hiện đại ✨

NTM Solutions

Lớp học Vi Tính

Bài đăng nổi bật

🚀 Laravel 12 (2026) — Từ PHP Core đến Full Stack📘

Thứ Hai, 2 tháng 11, 2026

📘 BÀI 09 — VUE.JS LÀ GÌ? TẠI SAO CẦN VUE KHI ĐÃ CÓ JAVASCRIPT?