Mục tiêu:
- Hiển thị nội dung từ
data() ra HTML bằng {{ }}
- Gắn thuộc tính HTML động bằng
v-bind
- Tạo input nhập dữ liệu và liên kết 2 chiều bằng
v-model
Kết quả học được:
| Tính năng | Vue Directive | Ví dụ |
|---|
| Hiển thị nội dung | {{ variable }} | {{ message }} |
| Gắn thuộc tính | v-bind:href | :href="link" |
| Liên kết 2 chiều | v-model | <input v-model="name"> |
Giao diện học (Code + Output)
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Vue Data Binding</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
body {
font-family: Arial;
display: flex;
gap: 30px;
padding: 20px;
}
.code {
width: 50%;
}
.output {
width: 50%;
border-left: 2px solid #ccc;
padding-left: 20px;
}
input {
padding: 5px;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="code">
<h2>Mã nguồn Vue:</h2>
<pre><code><div id="app">
<p>Nội dung từ data: {{ message }}</p>
<a v-bind:href="link">Truy cập Google</a>
<p>Nhập tên của bạn:</p>
<input v-model="name">
<p>Xin chào, {{ name }}!</p>
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
message: 'Chào mừng đến với Vue!',
link: 'https://google.com',
name: ''
}
}
}).mount('#app')
</script></code></pre>
</div>
<div class="output">
<h2>Kết quả hiển thị:</h2>
<div id="app">
<p>Nội dung từ data: {{ message }}</p>
<a v-bind:href="link" target="_blank">Truy cập Google</a>
<p>Nhập tên của bạn:</p>
<input v-model="name">
<p>Xin chào, {{ name }}!</p>
</div>
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
message: 'Chào mừng đến với Vue!',
link: 'https://google.com',
name: ''
}
}
}).mount('#app')
</script>
</body>
</html>
Giải thích:
| Câu lệnh | Tác dụng |
|---|
{{ message }} | Hiển thị nội dung từ biến trong data() |
v-bind:href="link" (viết tắt: :href="link") | Gắn giá trị biến vào thuộc tính HTML |
v-model="name" | Kết nối input 2 chiều (nhập đổi → Vue đổi, Vue đổi → input đổi) |
Bài tập thực hành:
- Thay đổi
link thành "https://vuejs.org" → bấm vào link kiểm tra.
- Gắn thêm 1 hình ảnh:
<img v-bind:src="imgUrl"> và thêm imgUrl vào data().
- Tạo thêm input
v-model="email" và hiển thị ra {{ email }} bên dưới.
Thảo luận