Đây là những gì bạn cần biết về ràng buộc dữ liệu trong Vue
Dữ liệu liên kết trong ứng dụng web tạo liên kết giữa phiên bản của ứng dụng và giao diện người dùng (giao diện người dùng). Phiên bản của ứng dụng quản lý dữ liệu, hành vi và thành phần, trong khi giao diện người dùng đại diện cho khía cạnh trực quan mà người dùng tương tác. Dữ liệu ràng buộc cho phép bạn tạo các ứng dụng web động.
Tại đây, bạn sẽ khám phá các ràng buộc khác nhau trong Vue, bao gồm các ràng buộc một chiều và hai chiều. Bạn cũng sẽ học cách triển khai các liên kết này với các mẫu và chỉ thị ria mép như v-bind và v-model.
Mục Lục
Nội suy trong Vue
Nội suy là một trong những kiểu liên kết dữ liệu phổ biến nhất của Vue. Nội suy cho phép bạn hiển thị các giá trị dữ liệu trong các thẻ Ngôn ngữ đánh dấu siêu văn bản (HTML) bằng mẫu ria mép, thường được biểu thị bằng dấu ngoặc nhọn kép ({{ }}).
Với mẫu ria mép, bạn có thể tích hợp nội dung ứng dụng động như dữ liệu và thuộc tính phương thức vào HTML của mình. Bạn có thể đạt được điều này bằng cách đặt tên thuộc tính dữ liệu hoặc phương thức từ đối tượng tùy chọn trong Vue trong các dấu ngoặc nhọn này.
Đây là một ví dụ về ứng dụng Vue sử dụng mẫu ria mép để đạt được phép nội suy trong Vue:
<body>
<div id="app">
<h1>{{ title }}</h1>
<p>{{ text.toUpperCase() }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
title: "Welcome",
text: "This is your world?",
};
},
});
app.mount("#app");
</script>
</body>
Khối mã ở trên sử dụng mẫu ria mép để hiển thị giá trị của thuộc tính tiêu đề trong đối tượng dữ liệu của ứng dụng Vue. Bạn cũng có thể hiển thị kết quả biểu thức JavaScript bằng phép nội suy. Ví dụ, các {{text.toUpperCase()}} biểu thức trong P hiển thị phiên bản chữ hoa của giá trị văn bản, như trong hình bên dưới:
Khi bạn mount một ứng dụng Vue, Vue sẽ đánh giá các biểu thức trong các mẫu và hiển thị các giá trị kết quả trong phần nội dung HTML. Mọi thay đổi đối với thuộc tính dữ liệu sẽ cập nhật các giá trị tương ứng trong giao diện người dùng.
Ví dụ:
<script>
const app = Vue.createApp({
data() {
return {
title: "Hello",
text: "This is your world?",
};
},
});
app.mount("#app");
</script>
Khối mã trên thay đổi thuộc tính title thành “Xin chào”. Thay đổi này sẽ tự động phản ánh trong giao diện người dùng vì ứng dụng Vue liên kết thuộc tính tiêu đề với phần tử giao diện người dùng, như được hiển thị bên dưới:
Phép nội suy chỉ xuất dữ liệu khi dấu ngoặc nhọn kép nằm giữa các thẻ HTML mở và đóng.
Liên kết dữ liệu một chiều với Chỉ thị v-bind
Giống như phép nội suy, liên kết dữ liệu một chiều liên kết phiên bản của ứng dụng với giao diện người dùng. Sự khác biệt là nó liên kết các thuộc tính như dữ liệu và phương thức với các thuộc tính HTML.
Liên kết dữ liệu một chiều hỗ trợ luồng dữ liệu một chiều, ngăn người dùng thực hiện các thay đổi ảnh hưởng đến thuộc tính dữ liệu trên phiên bản của ứng dụng. Điều này hữu ích khi bạn muốn hiển thị dữ liệu cho người dùng ứng dụng nhưng ngăn người dùng sửa đổi dữ liệu đó.
Bạn có thể đạt được liên kết dữ liệu một chiều trong Vue với liên kết v lệnh hoặc ký tự tốc ký của nó (:):
<input type="text" v-bind:value="text">
<input type="text" :value="text">
Khối mã hiển thị cách sử dụng chỉ thị v-bind và tốc ký của nó để liên kết giá trị của thẻ HTML đầu vào với thuộc tính dữ liệu văn bản. Đây là một ví dụ về ứng dụng Vue sử dụng liên kết v chỉ thị để đạt được ràng buộc dữ liệu một chiều:
<body>
<div id="app">
<input type="text" v-bind:value="text">
<p>{{ text }}</p>
</div> <script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!'
}
}
})
app.mount('#app')
</script>
</body>
Ở trên, một trường đầu vào và một thành phần đoạn văn hiển thị giá trị của chữ tài sản. Các giá trị thuộc tính của trường đầu vào được liên kết với thuộc tính văn bản bằng cách sử dụng liên kết v chỉ thị.
Khối mã này tạo ràng buộc một chiều, trong đó các thay đổi đối với chữ thuộc tính sẽ cập nhật giá trị của trường đầu vào, nhưng những thay đổi được thực hiện trong trường đầu vào sẽ không cập nhật chữ thuộc tính trong phiên bản của ứng dụng Vue.
Để hiển thị điều này, chúng ta có thể bắt đầu với giá trị ban đầu của chữ tài sản, “Vue thật tuyệt vời!”:
Sau khi thay đổi giá trị của trường đầu vào thành “Chào thế giới!”lưu ý rằng ứng dụng Vue không được cập nhật và văn bản trong thẻ đoạn vẫn giữ nguyên:
Tuy nhiên, khi chúng ta thay đổi giá trị của chữ tài sản để Chào thế giới! trong phiên bản ứng dụng Vue thay vì từ trường đầu vào, trường đầu vào được cập nhật để phản ánh giá trị mới:
Cách liên kết dữ liệu này rất hữu ích trong các tình huống mà bạn muốn hiển thị dữ liệu cho người dùng nhưng ngăn người dùng sửa đổi trực tiếp dữ liệu đó. Tận dụng v-bind trong Vue.js, bạn có thể thiết lập liên kết một chiều, dễ dàng kết nối dữ liệu của ứng dụng với các phần tử giao diện người dùng.
Liên kết dữ liệu hai chiều với Chỉ thị v-model
Liên kết dữ liệu hai chiều cho phép các thay đổi đối với giá trị của thành phần giao diện người dùng được tự động phản ánh trong mô hình dữ liệu cơ bản và ngược lại. Hầu hết các khung JavaScript mặt trước như Angular sử dụng liên kết hai chiều để chia sẻ dữ liệu và xử lý các sự kiện thời gian thực.
Vue.js có thể liên kết hai chiều với v-mô hình chỉ thị. Các v-mô hình lệnh tạo liên kết dữ liệu hai chiều giữa phần tử đầu vào của biểu mẫu và thuộc tính dữ liệu. Khi bạn nhập vào một phần tử đầu vào, giá trị sẽ tự động được cập nhật trong thuộc tính dữ liệu và mọi thay đổi đối với thuộc tính dữ liệu cũng sẽ cập nhật phần tử đầu vào.
Đây là một ví dụ về ứng dụng Vue sử dụng v-mô hình chỉ thị để đạt được liên kết dữ liệu hai chiều:
<head>
<title>Two-way data binding in Vue</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="text">
<p>{{ text }}</p>
</div> <script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!'
}
}
})
app.mount('#app')
</script>
</body>
Khối mã ở trên có một phần tử đầu vào với v-mô hình chỉ thị ràng buộc nó với chữ thuộc tính dữ liệu. Các chữ thuộc tính ban đầu được đặt thành “Vue thật tuyệt vời!”.
Trường đầu vào cập nhật thuộc tính văn bản khi bạn nhập vào trường đó và phản ánh các thay đổi đối với thuộc tính văn bản trong P nhãn. Vue.js sử dụng chỉ thị mô hình v và phần tử đầu vào để đạt được liên kết dữ liệu hai chiều.
Trong khi v-bind cho phép giao tiếp một chiều từ ứng dụng Vue đến UI, v-model cung cấp giao tiếp hai chiều giữa ứng dụng Vue và UI. Do khả năng cho phép giao tiếp hai chiều, v-mô hình thường được sử dụng khi làm việc với các phần tử biểu mẫu trong Vue.
Mở rộng chuyên môn của bạn trong việc xây dựng các ứng dụng Vue
Bạn đã học về liên kết dữ liệu trong Vue, bao gồm phép nội suy và các chỉ thị v-bind và v-model. Các liên kết dữ liệu này rất cần thiết vì chúng đóng vai trò là nền tảng của các ứng dụng Vue.
Vue có nhiều chỉ thị khác cho các trường hợp sử dụng, chẳng hạn như hiển thị danh sách, ràng buộc sự kiện và hiển thị có điều kiện. Hiểu các chỉ thị Vue giúp bạn xây dựng giao diện người dùng năng động và tương tác cho các ứng dụng web của mình.