VueJS - Binding: Hướng dẫn cho người mới bắt đầu
Xin chào, siêu sao Vue.js tương lai! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình thú vị vào thế giới của Vue.js binding. Là một ai đó đã dạy lập trình trong nhiều năm, tôi có thể告诉 bạn rằng binding chính là gia vị bí mật làm cho Vue.js trở nên ngon lành. Vậy, hãy c rolled up our sleeves và nhảy vào thôi!
Binding trong Vue.js là gì?
Trước khi chúng ta đi vào chi tiết, hãy hiểu binding nghĩa là gì. Trong Vue.js, binding là cách chúng ta kết nối dữ liệu của mình với DOM (Document Object Model). Nó giống như tạo ra một liên kết kỳ diệu giữa mã JavaScript của bạn và những gì xuất hiện trên màn hình. Đ Cooler, phải không?
Binding HTML Classes
Hãy tưởng tượng bạn đang chuẩn bị trang phục cho một buổi tiệc. Bạn có thể chọn những bộ đồ khác nhau dựa trên dịp, phải không? Well, binding HTML classes trong Vue.js hoạt động tương tự. Chúng ta có thể thay đổi ngoại hình của các yếu tố của mình dựa trên dữ liệu.
Binding Class Cơ bản
Hãy bắt đầu với một ví dụ đơn giản:
<div id="app">
<p :class="{ active: isActive }">Tôi có đang hoạt động không?</p>
</div>
<script>
new Vue({
el: '#app',
data: {
isActive: true
}
})
</script>Trong ví dụ này, chúng ta đang binding class 'active' vào đoạn văn dựa trên thuộc tính dữ liệu isActive. Nếu isActive là true, đoạn văn sẽ có class 'active'. Nếu nó là false, nó sẽ không có.
Nhiều Class
Nhưng nếu chúng ta muốn xử lý nhiều class? Không có vấn đề! Vue.js đã có giải pháp cho chúng ta:
<div id="app">
<p :class="{ active: isActive, 'text-danger': hasError }">
Binding nhiều class
</p>
</div>
<script>
new Vue({
el: '#app',
data: {
isActive: true,
hasError: false
}
})
</script>Ở đây, chúng ta đang binding hai class: 'active' và 'text-danger'. Đoạn văn sẽ có class 'active', nhưng không có 'text-danger'除非 chúng ta thay đổi hasError thành true.
Cú pháp Array
Chúng ta cũng có thể sử dụng một mảng để binding class. Nó giống như có một tủ quần áo của các class để chọn:
<div id="app">
<p :class="[activeClass, errorClass]">Cú pháp mảng rất tuyệt vời!</p>
</div>
<script>
new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>Trong trường hợp này, cả hai class 'active' và 'text-danger' sẽ được áp dụng cho đoạn văn.
Binding Inline Styles
Bây giờ, hãy nói về inline styles. Nó giống như việc làm mới ngoại hình của các yếu tố của bạn trên không!
Cú pháp Object
Chúng ta có thể binding inline styles bằng cách sử dụng một object:
<div id="app">
<p :style="{ color: textColor, fontSize: fontSize + 'px' }">
Định dạng tôi lên!
</p>
</div>
<script>
new Vue({
el: '#app',
data: {
textColor: 'red',
fontSize: 20
}
})
</script>Điều này sẽ đặt màu sắc thành đỏ và kích thước chữ thành 20px. Lưu ý rằng chúng ta có thể sử dụng camelCase (fontSize) hoặc kebab-case ('font-size') cho các thuộc tính style.
Cú pháp Array
Chúng ta cũng có thể sử dụng một mảng của các object style:
<div id="app">
<p :style="[baseStyles, overridingStyles]">Mảng các style</p>
</div>
<script>
new Vue({
el: '#app',
data: {
baseStyles: {
color: 'blue',
fontSize: '20px'
},
overridingStyles: {
fontWeight: 'bold'
}
}
})
</script>Điều này cho phép chúng ta áp dụng nhiều object style, với các object style sau trong mảng sẽ ghi đè các object style trước nếu có xung đột.
Binding Đầu vào Form
Binding đầu vào form là nơi Vue.js thực sự tỏa sáng. Nó giống như có một线路 điện thoại trực tiếp giữa các đầu vào form và dữ liệu của bạn!
Đầu vào Văn bản
Hãy bắt đầu với một đầu vào văn bản đơn giản:
<div id="app">
<input v-model="message" placeholder="Chỉnh sửa tôi">
<p>Tin nhắn là: {{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: ''
}
})
</script>Chỉ thị v-model tạo ra một binding hai chiều giữa đầu vào và thuộc tính dữ liệu message. Bất kỳ thay đổi nào trong đầu vào sẽ ngay lập tức cập nhật message, và ngược lại.
Checkbox
Các checkbox giống như những công tắc nhỏ. Dưới đây là cách chúng ta binding chúng:
<div id="app">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>
<script>
new Vue({
el: '#app',
data: {
checked: false
}
})
</script>Thuộc tính checked sẽ là true khi checkbox được chọn, và false khi nó không được chọn.
Radio Buttons
Các nút radio giống như những câu hỏi nhiều lựa chọn. Chỉ một lựa chọn có thể được chọn tại một thời điểm:
<div id="app">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Chọn: {{ picked }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
picked: ''
}
})
</script>Thuộc tính picked sẽ được đặt thành giá trị của nút radio được chọn.
Select Dropdown
Cuối cùng, hãy xem xét các下拉列表:
<div id="app">
<select v-model="selected">
<option disabled value="">Vui lòng chọn một</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Chọn: {{ selected }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>Thuộc tính selected sẽ được đặt thành giá trị của lựa chọn được chọn.
Tóm tắt các Phương pháp Binding
Dưới đây là bảng tóm tắt các phương pháp binding mà chúng ta đã xem xét:
| Loại Binding | Cú pháp | Mô tả |
|---|---|---|
| Class (Object) | :class="{ className: condition }" |
Áp dụng class dựa trên điều kiện |
| Class (Array) | :class="[class1, class2]" |
Áp dụng nhiều class |
| Style (Object) | :style="{ property: value }" |
Áp dụng style inline |
| Style (Array) | :style="[styleObject1, styleObject2]" |
Áp dụng nhiều object style |
| Đầu vào Form | v-model="dataProperty" |
Binding hai chiều cho đầu vào form |
Và thế là bạn đã bước vào thế giới kỳ diệu của Vue.js binding. Nhớ rằng, thực hành là cách tốt nhất để trở nên hoàn hảo, vì vậy đừng ngần ngại thử nghiệm với các khái niệm này. Trước khi bạn biết, bạn sẽ binding dữ liệu như một chuyên gia! Chúc bạn may mắn với việc lập trình!
Credits: Image by storyset