Vue.js đã nổi tiếng là một khung JavaScript tiến bộ. Bạn có thể sử dụng Vue.js để xây dựng các ứng dụng một trang (SPA) hoặc phát triển các giao diện người dùng cụ thể.
Tại đây, bạn sẽ tìm hiểu kiến thức cơ bản về Vue.js, bao gồm cách tạo thành phần Vue và làm việc với đối tượng tùy chọn để hiển thị dữ liệu động.
Bao gồm Vue thông qua liên kết CDN
Vue.js là một trong những khung JavaScript phổ biến nhất. Để bắt đầu với Vue và để thêm nó vào trang HTML của bạn, hãy sao chép thẻ script bên dưới và dán vào phần đầu:
<script src="<https://unpkg.com/vue@3/dist/vue.global.js>"></script>
Sử dụng liên kết CDN là một lựa chọn tuyệt vời để cải thiện HTML tĩnh hoặc thêm chức năng vào ứng dụng của bạn.
Tuy nhiên, bạn cần cài đặt Vue.js qua npm để sử dụng thêm các tính năng nâng cao của nó, chẳng hạn như cú pháp Thành phần tệp đơn (SFC), rất hữu ích khi xây dựng các ứng dụng Vue chính thức.
Tạo một ứng dụng Vue
Truy cập thư viện Vue qua liên kết CDN cung cấp một đối tượng Vue, bao gồm .createApp() phương pháp.
Đúng như tên gọi, bạn có thể tạo ứng dụng Vue bằng phương pháp này.
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<script>
const app = Vue.createApp();
</script>
</body>
</html>
Tại đây, ứng dụng đã tạo được lưu trữ trong ứng dụng Biến đổi. Sau khi tạo phiên bản ứng dụng, bạn phải kết xuất phiên bản đó bằng cách sử dụng .mount() phương pháp. Phương pháp này cho biết nơi cài đặt ứng dụng trong Mô hình Đối tượng Tài liệu (DOM).
Như vậy:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp();
app.mount("#app");
</script>
</body>
</html>
Để sử dụng Vue’s .mount() phương pháp, bạn phải cung cấp một phần tử DOM hoặc bộ chọn làm đối số. Trong ví dụ này, chúng tôi đã gắn ứng dụng Vue bằng phần tử DOM với #ứng dụng NHẬN DẠNG.
Điều quan trọng cần lưu ý là ứng dụng Vue chỉ kiểm soát các phần tử được chỉ định bằng cách sử dụng nhận dạng. Ngoài ra, ứng dụng không có quyền kiểm soát đối với bất kỳ thứ gì bên ngoài các yếu tố đó, bao gồm các sự kiện nhấp chuột hoặc bất kỳ hoạt động tương tác nào khác.
Bước cuối cùng của việc tạo một ứng dụng Vue là gọi .mount() phương pháp sau khi hoàn thành tất cả các cấu hình ứng dụng.
Đối tượng tùy chọn trong Vue
Trong Vue.js, bạn sử dụng Tùy chọn object làm đối tượng cấu hình để tạo một phiên bản hoặc thành phần Vue.
Nó là một phần thiết yếu của ứng dụng Vue vì nó xác định hành vi và dữ liệu cho từng phiên bản hoặc thành phần. Các Tùy chọn đối tượng bao gồm một số thuộc tính đại diện cho các khía cạnh khác nhau của thể hiện hoặc thành phần.
Một số thuộc tính thường dùng trong Tùy chọn đối tượng là:
- dữ liệu: Thuộc tính này xác định đối tượng dữ liệu cho các ứng dụng Vue. Nó là một hàm trả về một đối tượng chứa các thuộc tính dữ liệu và các giá trị ban đầu của chúng.
- phương pháp: Các phương pháp thuộc tính của đối tượng Tùy chọn giữ các chức năng quan trọng trong việc bật hiển thị động.
- bản mẫu: Thuộc tính này xác định mẫu HTML cho phiên bản hoặc thành phần Vue. Đó là một chuỗi chứa đánh dấu HTML mà trình biên dịch mẫu của Vue có thể phân tích cú pháp.
Lưu ý rằng khi sử dụng thuộc tính mẫu, trình biên dịch Vue sẽ chỉ hiển thị nội dung được xác định trong mẫu.
Đây là một ví dụ về ứng dụng Vue với dữ liệu, phương pháp, Và bản mẫu của cải:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1 @click="reverseMessage" ></h1>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: "This is your Vue App"
};
},
methods: {
reverseMessage () {
this.text = this.text.split('').reverse().join('')
}
}
});
app.mount("#app");
</script>
</body>
</html>
Chương trình này mô tả một ứng dụng Vue cơ bản hiển thị văn bản “Đây là ứng dụng Vue của bạn” bằng cách sử dụng nội suy văn bản và cho phép người dùng nhấp vào nó để đảo ngược thông báo.
Các dữ liệu() hàm trả về một đối tượng với một thuộc tính duy nhất được gọi là chữ. Các @nhấp chuột chỉ thị được sử dụng để đính kèm một ReverseMessage() phương pháp để
phần tử đảo ngược chữ tài sản.
Khi chạy chương trình này, ứng dụng Vue đã tạo sẽ trông như thế này:
Nhấp vào văn bản sẽ đảo ngược nó.
Lưu ý rằng chương trình đã nhận xét thuộc tính mẫu để cho phép hiển thị nội dung trong ứng dụng Vue. Nếu không có bình luận, ứng dụng Vue này sẽ chỉ hiển thị một thuộc tính mẫu:
Có các thuộc tính khác như đạo cụ Và tính toánmà bạn cũng có thể sử dụng để tạo các ứng dụng Vue mạnh mẽ và linh hoạt khi định cấu hình Đối tượng tùy chọn.
Nội suy văn bản trong Vue
Nội suy văn bản trong Vue là một tính năng cho phép bạn liên kết dữ liệu với các phần tử HTML một cách linh hoạt. Nói cách khác, nó sẽ cho phép bạn xuất trực tiếp giá trị của các thuộc tính dữ liệu của phiên bản Vue trong HTML.
Để nội suy văn bản trong Vue, bạn cần đặt tên của thuộc tính dữ liệu trong dấu ngoặc nhọn kép. Vue diễn giải nội dung bên trong dấu ngoặc nhọn kép dưới dạng biểu thức JavaScript và nó tiếp tục thay thế chúng bằng giá trị kết quả của chúng.
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1></h1>
<p>Welcome </p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: "This is your Vue app.",
name: "Noble",
};
},
});
app.mount("#app");
</script>
</body>
</html>
Trong ví dụ này, nội suy văn bản liên kết tin nhắn Và tên các thuộc tính của đối tượng dữ liệu được trả về trong cá thể Vue cho
Và
phần tử. Khi ứng dụng Vue được gắn kết, nó sẽ hiển thị các giá trị của tin nhắn Và tên các thuộc tính trong HTML tại các vị trí tương ứng của chúng.
Bạn cũng có thể hiển thị kết quả của một cuộc gọi phương thức hoặc thực hiện các thao tác JavaScript cơ bản trong dấu ngoặc nhọn kép:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1></h1>
<h3>Welcome </h3>
<p>There are letters in your name.</p>
</div>
<p>not here</p>
<script>
const app = Vue.createApp({
data() {
return {
message: "This is your Vue App",
name: "Noble Okafor",
};
},
methods: {
nameLength() {
return this.name.length - 1;
},
},
});
app.mount("#app");
</script>
</body>
</html>
Trong ví dụ này, ứng dụng Vue có một dữ liệu đối tượng chứa hai thuộc tính: tin nhắn Và tên.
Bên trong ứng dụng Vue, ba phần tử HTML hiển thị dữ liệu bằng cách sử dụng phiên bản Vue. Các h1 phần tử hiển thị giá trị của tin nhắn tài sản, trong khi h3 phần tử hiển thị giá trị của tên tài sản với một Đến trường hợp trên() phương pháp áp dụng cho nó.
Các P phần tử hiển thị kết quả trả về của tênLength() phương thức được định nghĩa trong phương pháp đối tượng của ứng dụng Vue. Các tênLength() phương thức trả về độ dài của tên tài sản trừ đi một.
Để truy cập một giá trị từ đối tượng dữ liệu trong đối tượng phương thức, bạn cần sử dụng cái này từ khóa. cái này từ khóa đề cập đến phiên bản Vue hiện tại và cho phép bạn truy cập các thuộc tính và phương thức của nó từ bên trong phiên bản Vue. Bằng cách sử dụng cái nàybạn có thể truy xuất giá trị của tên thuộc tính và thực hiện mọi thao tác cần thiết trên nó bằng cách sử dụng phương pháp.
Ứng dụng Vue này trình bày cách liên kết dữ liệu với các phần tử HTML bằng cách sử dụng phép nội suy văn bản và cách xác định cũng như gọi các phương thức trong một phiên bản Vue.
Xây dựng giao diện người dùng của bạn bằng Vue
Trong bài viết này, bạn đã học cách bắt đầu làm việc với Vue và nội suy văn bản bằng cú pháp tạo khuôn mẫu của Vue. Bạn có thể truy cập một số tính năng khác trong Vue, như chỉ thị và móc vòng đời, làm cho nó trở thành lựa chọn tuyệt vời để xây dựng các ứng dụng giao diện người dùng động.
