Vue.js là gì?
Vue.js cho phép bạn mở rộng HTML với các thuộc tính HTML được gọi là chỉ thị
Các chỉ thị Vue.js cung cấp chức năng cho các ứng dụng HTML
Vue.js cung cấp các chỉ thị tích hợp sẵn và các chỉ thị do người dùng xác định
Vue.js Chỉ thị
Vue.js sử dụng dấu ngoặc kép {{ }}làm trình giữ chỗ cho dữ liệu.
Các chỉ thị Vue.js là các thuộc tính HTML có tiền tốv-
Chế độ xem ví dụ
Trong ví dụ dưới đây, một đối tượng Vue mới được tạo với Vue mới () .
Thuộc tính el: liên kết đối tượng Vue mới với phần tử HTML có id = "app" .
Thí dụ
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Vue.js Ràng buộc
Khi một đối tượng Vue được liên kết với một phần tử HTML, phần tử HTML sẽ thay đổi khi đối tượng Vue thay đổi:
Thí dụ
<div id="app">
{{ message }}
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
function
myFunction() {
myObject.message = "John Doe";
}
</script>
Vue.js Ràng buộc hai chiều
Lệnh v-modelliên kết giá trị của các phần tử HTML với dữ liệu ứng dụng.
Đây được gọi là ràng buộc hai chiều:
Thí dụ
<div id="app">
<p>{{ message }}</p>
<p><input v-model="message"></p>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Vue.js Loop Binding
Sử dụng v-forchỉ thị để liên kết một mảng các đối tượng Vue với một "mảng" phần tử HTML:
Thí dụ
<div id="app">
<ul>
<li v-for="x in todos">
{{
x.text }}
</li>
</ul>
</div>
<script>
myObject =
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn
JavaScript' },
{ text: 'Learn
Vue.js' },
{ text: 'Build
Something Awesome' }
]
}
})
</script>