Vue.js là gì?
Vue.js cho phép bạn mở rộng HTML bằng các thuộc tính HTML được gọi là chỉ thị
Lệnh 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 và các chỉ thị do người dùng xác định
Để có hướng dẫn đầy đủ về Vue.js:
Đi tới Hướng dẫn Vue.js của chúng tôi ❯Chỉ thị Vue.js
Vue.js sử dụng dấu ngoặc kép {{ }} làm phần giữ chỗ cho dữ liệu.
Lệnh Vue.js là các thuộc tính HTML có tiền tố v-
Vue Ví dụ
Trong ví dụ bên dưới, một đối tượng Vue mới được tạo bằng new Vue() .
Thuộc tính el: liên kết đối tượng Vue mới với phần tử HTML bằng id="app" .
Ví dụ
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Liên kết Vue.js
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:
Ví dụ
<div id="app">
{{ message }}
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
function
myFunction() {
myObject.message = "John Doe";
}
</script>
Liên kết hai chiều Vue.js
Lệnh v-model liên kết giá trị của các phần tử HTML với dữ liệu ứng dụng.
Điều này được gọi là ràng buộc hai chiều:
Ví 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>
Liên kết vòng lặp Vue.js
Sử dụng lệnh v-for để liên kết một mảng các đối tượng Vue với một "mảng" phần tử HTML:
Ví 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>
