Làm quen với Vue.JS – Bài 1
Trong bài trước, mình đã giới thiệu về VueJS và các đặc tính nổi bật của nó. Trong bài này, mình sẽ hướng dẫn các bạn làm quen với VueJS qua việc tạo 1 ứng dụng VueJS đơn giản.
Mình sẽ sử dụng 1 trang chỉnh sửa code online như codepen hay jsfiddle để triển khai code lên đó, tùy vào sở thích mỗi người mà chọn cho mình 1 trang phù hợp, ở đây mình sẽ dùng codepen cho các ví dụ trong bài viết.
Ok, bắt đầu lội bùn thôi 🙂
Đầu tiên mình sẽ tạo 1 file tên là hello.html
Các bạn có thể sửa nội dung của file vừa tạo ở ô soạn thảo bên phải, để tiết kiệm thời gian thì Codepen có sẵn một số các snippet để các bạn có thể nhanh chóng tạo các đoạn code phổ biến mà không phải code từ đầu. Ví dụ, để tạo 1 đoạn mã đầy đủ của 1 trang HTML bao gồm các thẻ DOCTYPE, HTML, HEAD, BODY.. thì bạn chỉ việc nhập vào đoạn mã html:5 và bấm phím tab là xong.
Để có thể sử dụng Vue trong ứng dụng của mình, các bạn cần nhúng thư viện VueJS vào trang web qua thẻ <script>. Trong phần tài liệu hướng dẫn của vuejs.org, mục đầu tiên – phần cài đặt các bạn sẽ tìm thấy cú pháp để nhúng thư viện VueJS vào ứng dụng như hình dưới:
Các bạn copy đoạn mã này và paste vào trang hello.html vừa tạo bên codepen, ngay trước phần đóng của thẻ body.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Hello VueJS</title> </head> <body> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </body> </html>
Tiếp theo, để khởi tạo đối tượng VueJS trên ứng dụng, các bạn sử dụng cú pháp:
new Vue({...})VueJS sẽ cần các bạn chỉ định phần tử để VueJS sẽ tương tác trong đó. Ở đây mình sẽ tạo 1 thẻ div và đặt ID cho nó là main.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello VueJS</title>
</head>
<body>
<div id="main">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
new Vue({
el: '#main'
});
</script>
</body>
</html>Chỉ định phần tử cho Vue qua tham số el(element).
Từ lúc này, tất cả nội dung trong thẻ div#main sẽ có thể được điều khiển qua VueJS, các phần khác ngoài thẻ này, VueJS không có tác dụng.
VueJS dùng đối tượng data trong tham số như một biến để lưu trữ các thông tin trong ứng dụng.
new Vue({
el: '#main',
data: {
msg: 'Hello from Vue'
}
});Ở trên mình khai báo một thuộc tính cho data tên là msg.
Và bây giờ mình sẽ cho nội dung của msg hiển thị trong div#main bằng cú pháp đơn giản như sau:
<div id="main">
{{ msg }}
</div>Save nội dung vừa tạo lại bạn sẽ thấy trong khung preview đã hiển thị nội dung của msg trong div#main
Lưu ý rằng bạn chỉ cần truyền vào msg trong chuỗi nội suy, thay vì phải truyền cả data.msg.
2 thẻ đóng và mở ngoặc nhọn được gọi là string interpolation – nội suy chuỗi, Vue sẽ hiển thị nội dung của các phần tử bên trong cặp ngoặc này. Nếu không thích loại ngoặc này hoặc nó khiến ứng dụng bị xung đột với các thành phần khác, bạn hoàn toàn có thể thay thế kiểu ngoặc nhọn này bằng các kiểu khác thông qua thuộc tính delimiters:
Như vậy là bạn đã hoàn thành việc tạo 1 ứng dụng VueJS đầu tiên và hiểu cơ bản cách thức làm việc của Vue trong ứng dụng web của mình. ở các bài sau mình sẽ hướng dẫn chi tiết hơn về VueJS, các bạn nhớ xem nhé 🙂
About The Author
