Những ví dụ đầu tiên với VueJS phần 1

Giới thiệu

Trước khi vào làm những ví dụ về VueJS trước tiên chúng ta cũng nên biết VueJS là gì? Gọi tắt là Vue (phát âm là /vjuː/, giống như view trong tiếng Anh), Vue.js là một framework linh động (nguyên bản tiếng Anh: progressive – tiệm tiến) dùng để xây dựng giao diện người dùng (user interfaces). Khác với các framework nguyên khối (monolithic), Vue được thiết kế từ đầu theo hướng cho phép và khuyến khích việc phát triển ứng dụng theo từng bước. Khi phát triển lớp giao diện (view layer), người dùng chỉ cần dùng thư viện lõi (core library) của Vue, vốn rất dễ học và tích hợp với các thư viện hoặc dự án có sẵn. Cùng lúc đó, nếu kết hợp với những kĩ thuật hiện đại như SFC (single file components) và các thư viện hỗ trợ, Vue cũng đáp ứng được dễ dàng nhu cầu xây dựng những ứng dụng một trang (SPA - Single-Page Applications) với độ phức tạp cao hơn nhiều. Tham khảo: https://vuejs.org/v2/guide/index.html#What-is-Vue-js

Hiện nay, Vue.js là một trong những framework JavaScript tốt nhất và nhiều người cho rằng Vue sẽ dần thay thế cho Angular và React trong tương lai. Xét vòng đời của mình, Vue.js không mới hơn hay phổ biến hơn so với những frameworks khác nhưng vẫn sở hữu những yếu tố tạo nên sự khác biệt. Hãy sẵn sàng chuẩn bị hành trang và cùng học vue nhé !

Cơ bản về Vue

HTML DOM là gì?

Sơ đồ các thành phần HTML DOM nguồn: W3SCHOOL

Khi làm việc với Jquery chắc bạn đã quá quen với HTML DOM. Trên W3school, HTML DOM là một tiêu chuẩn đối tượng mô hình và lập trình giao diện cho HTML. Nó định nghĩa:

• Các yếu tố HTML như đối tượng
• Các thuộc tính của tất cả các phần tử HTML
• Các phương pháp để truy cập vào tất cả các phần tử HTML
• Các sự kiện cho tất cả các phần tử HTML

Nói cách khác: HTML DOM là một tiêu chuẩn cho làm thế nào để có được, thay đổi, thêm hoặc xóa các phần tử HTML. Một trình xử lý sự kiện điển hình jQuery giống như sau:

• Tìm tất cả các nút quan tâm đến một sự kiện
• Cập nhật nó nếu cần thiết

Trong đó có hai vấn đề:

• Quản lý khá là khó.
• Hãy tưởng tượng rằng bạn phải tinh chỉnh một trình xử lý sự kiện. Nếu bạn mất ngữ cảnh, bạn phải lặn sâu vào mã để thậm chí biết điều gì đang xảy ra. Điều này rất tốn thời gian và rủi ro.

Ví dụ về truy vấn Jquery

<button id="button"></button>

$(document).ready(function() {
    $(document).on('click', '#button', function() {
        //thao tac gi do 
    })
});

Vitual DOM là gì?

Vitual DOM hay còn gọi là DOM ảo. Nó là một trừu tượng của HTML DOM. Nó nhẹ và tách khỏi chi tiết thực hiện trình duyệt cụ thể. Vì DOM chính là một khái niệm trừu tượng, Vitual DOM thực sự là một sự trừu tượng của một sự trừu tượng. Hiểu một cách đơn giản với Vitual DOM, chúng ta có thể tạo, sửa, thao tác trên đó mà không cần tác động trực tiếp vào các phần tử DOM trên View Vitual DOM và những lợi ích của nó?

• Bạn nhận được quyền năng lập trình của Javascript. Bạn có thể tạo ra các chức năng theo factory-style để xây dựng các nút ảo của bạn bằng cách sử dụng array methods của Javascript vv, và đương nhiên nó sẽ gặp khó hơn như khi bạn dùng các cú pháp mẫu.
• Bạn có thể làm cho code của bạn phổ cập. Đối tượng vue của bạn không thực sự trên tệp HTML, nó vẫn có thể được render dựa vào server-render (máy chủ render). Nhìn vào ví dụ bên dưới bạn có thể hiểu hơn về điều này.
• JSX. Funtions render cho phép các phần mở rộng JS như JSX có thể được mong muốn để kiến trúc một ứng dụng dựa trên thành phần.
• Ngoài ra, tốc độ xử lý của virtual cũng nhanh hơn.

Cấu trúc VueJs khá đơn giản

Đầu tiên hãy truy cập: https://jsfiddle.net/ để test ví dụ bên dưới nhé: Đoạn code html:

<div id="app">
    {{ message }} 
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Đoạn code js:

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})

Kết quả:

Hello Vue!

Lời kết

Qua bài viết phần nào chúng ta cũng hiểu cơ chế render của VueJS và ví dụ đầu tiên của nó. Hãy tiếp tục theo dõi series và cùng nhau 2018 - Cùng nhau học VueJS. Mong được sự đóng góp của mọi người để hoàn thiện series cũng như kiến thức. Xin cảm ơn nhiều ạ