Bài 1: Tạo một ứng dụng Vuejs đơn giản

05 Nov, 2020 VueJS 0 Comments 0

Xác định phần tử tương tác với Vuejs

Đầu tiên chúng ta sẽ tạo một file “index.html”.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello</title>
</head>
<body>
</body>
<script></script>
</html>

Để có thể sử dụng Vuejs trong ứng dụng của mình, chúng ta cần nhúng thư viện Vuejs vào web (đã hướng dẫn ở bài trước).

Source code

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello</title>
</head>
 
<body>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
</script>
 
</html>

Tiếp theo chúng ta sẽ khởi tạo đối tượng Vuejs trên ứng dụng.
Ở đây chúng ta sẽ tạo một thẻ “<div>” có id là “app” để cho Vuejs xác định được phần tử sẽ tương tác.

Source code

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello</title>
</head>
 
<body>
    <div id="app">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
    });
</script>
 
</html>

Ở trên chúng ta thấy tham số el đó là tham số sẽ giúp Vuejs xác định được phần tử sẽ tương tác (ví dụ trên là “#app”).
Kể từ bước này trở đi tất cả nội dung trong thẻ div#app sẽ có thể được điều khiển qua Vuejs, mọi phần tử khác người thẻ này sẽ không có tác dụng với Vuejs.

2. Lưu trữ dữ liệu

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.

Source code

<script>
    new Vue({
        el: '#app',
        data: {
            msg: "Hello Vuejs",
        }
    });
</script>

Ở trên mình đã khai báo một thuộc tính cho data tên là
Để hiển thị nội dung của thuộc tính msg trong thẻ div#app chúng ta làm như sau.

Source code

<div id="app">     
    {{ msg }}
</div>

Chạy file “index.html” ta có kết quả.

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.
Một số lưu ý:
- Bạn chỉ cần truyền vào msg trong chuỗi nội suy thay vì phải truyền cả msg.
- Hai thẻ đóng mở ngoặc nhọn “{{ }}” được gọi là string interpolation – chuỗi nội suy. VueJS sẽ hiển thị nội dung của các phần tử bên trong cặp dấu này. Nếu không thích hoặc bị xung đột với các thành phần khác trong ứng dụng bạn có thể thay đổi kiểu ngoặc này bằng https://vuejs.org/v2/api/#delimiters

Bài 1: Tạo một ứng dụng Vuejs đơn giản

Leave a Reply