Không gì dễ dàng hơn để dùng thử Vue.js là bắt đầu với ví dụ Hello World. Sau khi cài đặt Vuejs hãy làm theo các bước dưới đây để dùng thử Vuejs các bạn nhé .
Vue.js với Hello World
Bước 1: Tạo một file index.html và nhúng thư viện Vue vào với 2 lựa chọn
Bản phát triển (development), bao gồm những cảnh báo hữu ích trong console
hoặc:
Bản production, được tối ưu về dung lượng và tốc độ
Xin nhắc lại 1 lần nữa chúng mình không khuyến khích việc dùng vue-cli khi bạn chỉ mới bắt đầu, nhất là nếu bạn chưa quen với các công cụ xây dựng (build tools) trên nền tảng Node.js.
File index.html có nội dung như sau:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Học Vuejs với Học TV</title> </head> <body> <div id="app">{{ message }}</div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="app.js"></script> </html>
Bước 2: Tạo file app.js ở cùng thư mục với file index.html ở trên
Nội dung file app.js
var app = new Vue({ el: '#app', data: { message: 'Học Vuejs với Học TV. Ví dụ đầu tiên Hello World!' } });
Bước 3: Chạy file index.html với trình duyệt của bạn. Kết quả như sau:
Thêm chút css cho dễ nhìn .Bạn cũng có thể kiểm tra kết quả và thử online như dưới đây
Render (Trích xuất) theo hướng khai báo
Trung tâm của Vue.js là 1 hệ thống cho phép người dùng có thể render (trích xuất) dữ liệu lên DOM theo hướng khai báo (declarative, thay vì hướng mệnh lệnh – imperative) sử dụng một cú pháp đơn giản dưới đây:
HTML viết
<div id="app">{{ message }}</div>
JS viết
var app = new Vue({ el: '#app', data: { message: 'Bạn có muốn xây dựng một ứng dụng Vue không?' } })
Thật tuyện vời chúng ta đã viết xong 1 ứng dụng Vue đơn giản. Tuy rằng kết quả trên đây nhìn có vẻ đơn giản chỉ như trích xuất một chuỗi kí tự ra màn hình thế nhưng thật sự Vue đã thực hiện khá nhiều việc đằng sau hậu trường. Dữ liệu và DOM đã được liên kết với nhau, và mọi thứ giờ đây đã trở nên reactive (hiểu nôm na là “phản ứng,” chúng mình sẽ giải thích sâu hơn trong các chương kế tiếp). Để kiểm chứng, hãy mở console của trình duyệt và gán cho app.message một giá trị khác, ví dụ app.message = 'From with love'. Bạn sẽ thấy ví dụ trên thay đổi tương ứng.
Ngoài việc quản lí và chỉnh sửa văn bản, chúng ta cũng có thể bind (ràng buộc) các thuộc tính của phần tử web ví dụ như sau:
HTML viết
<div id="app-2">
<span v-bind:title="message">
Rê chuột lên đây một vài giây để xem thuộc tính 'title' được bind!
</span>
</div>JS viết
var app2 = new Vue({ el: '#app-2', data: { message: 'Bạn đã mở trang này vào ' + new Date().toLocaleString() } })
Kết quả như sau:
Thuộc tính v-bind mà bạn thấy ở trên được gọi là một directive. Một directive trong Vue được bắt đầu với v- để chỉ định rõ rằng đây là một thuộc tính riêng do Vue cung cấp, đồng thời thuộc tính này sẽ áp dụng một hành vi (behavior) đặc biệt lên kết quả DOM được render ra. Trong ví dụ này, directive v-bind về cơ bản là đang giữ thuộc tính title của phần tử web luôn luôn đồng nhất với property message của đối tượng Vue được khởi tạo.
Bây giờ hãy thử mở console JavaScript lần nữa và nhập vào app2.message = 'From Học TV with love', bạn sẽ thấy HTML được bind – trong trường hợp này là thuộc tính title – được cập nhật tương ứng.
Hoàn thiện bài học cơ bản Helllo world với Vuejs trên đây là bạn đã đặt nền móng cơ bản cho việc xây dựng ngôi nhà của mình với Vuejs rồi đấy. Hầu như mọi kiến thức ban đầu đề dễ tiếp cận và nâng cao dần lên vì vậy với Vue chúng ta cũng cần đi từ cơ bản lên. Đừng quá manh động bạn nhé!
