VUEJS-document
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (86.96 KB, 5 trang )
VUEJS
1. HELLO WORLD
Used
< script src = " script src=" />
Index.html
< script src = " />
HTML
< div id = "app" >
{{message}}
</ div >
JS
var app = new Vue ({
el: '#app' ,
data: {
message: 'Xin chào Vue!'
}
})
Vuejs được viết theo cấu trúc DOM bạn có thể thay đổi giá trị của nó
bằng console trong js:
app.message = ‘Hello world’
2. DOM CÁC HIỆU ỨNG MOUSE HOVER
HTML
<div id="app2">
<span vbind:title="message">
Hover your mouse over me for a few seconds
to see my dynamically bound title!
</span>
</div>
JS
var app2 = new Vue({
el: '#app2',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
})
Hiệu ứng di chuyển chuột vào text hiển thị date truy cập trang
3. ĐIỀU KIỆN VÀ VÒNG LẬP
a. Tắt bật 1 phần tử thật dễ dàng
HTML
<div id="app3">
<span vif="seen">Now you see me</span>
</div>
JS
var app3 = new Vue({
el: '#app3',
data: {
seen: true
}
})
Kết quả: Now you see me
Thay đổi giá trị: app3.seen = false để ẩn phần tử
Có nhiều loại chỉ thị khác được biểu diễn trong Vue chẳng hạn
v-for chỉ thị cho việc có thể hiển thị 1 danh sách các mục sử dụng dữ liệu từ 1
mảng.
Ví dụ:
HTML
<div id="app4">
<ol>
<li vfor="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
JS
var app4 = new Vue({
el: '#app4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
RESULT
1.
Learn JavaScript
2.
Learn Vue
3.
Build something awesome
Trong giao diện console bạn cũng có thể thêm 2 thêm 1 mục mới vào
trong danh sách bằng cách:
app4.todos.push({ text: 'New item' })
4. XỬ LÝ ĐẦU VÀO NGƯỜI DÙNG
Để cho phép người dùng tương tác với ứng dụng của bạn, bạn có thể
dùng chỉ thị v-on để gắn trình xử lý sự kiện gọi phương thức trên các
trường hợp của Vue
HTML
<div id="app5">
{{ message }}
<button von:click="reverseMessage">Reverse Message</button>
</div>
JS
var app5 = new Vue({
el: '#app5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
Vue cũng cung cấp chỉ thị v-model để liên kết giữa đầu vào và trạng thái
ứng dụng trở nên nên dễ dàng hơn.
HTML
<div id="app6">
{{ message }}
<input vmodel="message">
</div>
JS
var app6 = new Vue({
el: '#app6',
data: {
message: 'Hello Vue!'
}
})
RESULT
Hello Vue!
hello vue!
5. SOẠN THẢO CÁC THÀNH PHẦN
Hầu như bất kỳ loại giao diện ứng dụng có thể trừu tượng thành một cây các
thành phần”
