Chỉ thị Vue
Lệnh Vue là các thuộc tính HTML đặc biệt có tiền tố v- cung cấp thêm chức năng cho thẻ HTML.
Các lệnh Vue kết nối với phiên bản Vue để tạo giao diện người dùng động và phản ứng.
Với Vue, việc tạo các trang phản hồi dễ dàng hơn nhiều và yêu cầu ít mã hơn so với các phương thức JavaScript truyền thống.
Chỉ thị Vue khác nhau
Các chỉ thị Vue khác nhau mà chúng tôi sử dụng trong hướng dẫn này được liệt kê bên dưới.
| chỉ thị | Chi tiết |
|---|---|
v-bind | Kết nối một thuộc tính trong thẻ HTML với một biến dữ liệu bên trong phiên bản Vue. |
v-if | Tạo thẻ HTML tùy theo điều kiện. Lệnh v-else-if và v-else được sử dụng cùng với lệnh v-if . |
v-show | Chỉ định xem một phần tử HTML có hiển thị hay không tùy thuộc vào một điều kiện. |
v-for | Tạo danh sách các thẻ dựa trên một mảng trong phiên bản Vue bằng vòng lặp for. |
v-on | Kết nối một sự kiện trên thẻ HTML với biểu thức JavaScript hoặc phương thức phiên bản Vue. Chúng tôi cũng có thể xác định cụ thể hơn cách trang của chúng tôi sẽ phản ứng với một sự kiện nhất định bằng cách sử dụng công cụ sửa đổi sự kiện . |
v-model | Được sử dụng trong các biểu mẫu HTML với các thẻ như <form> , <input> và <button> . Tạo liên kết hai chiều giữa phần tử đầu vào và thuộc tính dữ liệu phiên bản Vue. |
Ví dụ: Chỉ thị v-bind
Trình duyệt tìm lớp nào để kết nối phần tử <div> từ phiên bản Vue.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.pinkBG {
background-color: lightpink;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="vueClass"></div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
vueClass: "pinkBG"
}
}
})
app.mount('#app')
</script>
</body>
</html>
Hãy tự mình thử »Lưu ý: Ví dụ trên có thể được viết đơn giản hơn nhiều nếu không có mã Vue, nhưng hãy kiên nhẫn. Những lợi ích thực sự của Vue có thể được thấy trong các ví dụ sau khi chúng tôi tạo các trang có tính phản hồi cao.
Học Vue tại W3Schools
Khi học Vue tại W3Schools.com, bạn có thể sử dụng công cụ "Tự mình thử" của chúng tôi, công cụ này hiển thị cả mã và kết quả. Điều này sẽ giúp bạn hiểu mọi phần dễ dàng hơn khi chúng ta tiến về phía trước.
Nhấp vào 'Tiếp theo' để tiếp tục hướng dẫn.
