Vue.js cấu trúc điều kiện, lặp và quản lý sự kiện
NỘI DUNG BÀI VIẾT
Trong bài viết trước Vue.js là gì các bạn đã được làm quen với Vue.js và các khái niệm cơ bản như view, model, view-model. Vue.js là framework giúp xây dựng các ứng dụng web sử dụng kiến trúc MVVM (Model-View-ViewModel)
Trong bài viết hôm nay chúng ta sẽ tìm hiểu thêm các kiến thức khác như chỉ thị (directive), các chỉ thị có điều kiện, chỉ thị lặp… Chúng ta cùng xem ví dụ sau:
Chỉ thị trong Vue.js
Chúng ta tạo một model như sau:
var myFrameworks = {
frameworks: [
{ name: "CodeIgniter", vote: 40 },
{ name: "Laravel", vote: 100 },
{ name: "Symfony", vote: 35 },
{ name: "Zend", vote: 18 },
{ name: "Yii", vote: 7 }
]
};Code language: JavaScript (javascript)Tạo môt view như sau:
<div id="best_framework">
<h1>Top 5 PHP framework tốt nhất hiên nay:</h1>
<ul>
<li v-for="framework in frameworks | orderBy 'vote'"> {{ framework.name }}</li>
</ul>
</div>Code language: HTML, XML (xml)Ok, giờ chúng ta tạo View-Model cầu nối cho View và Model vừa tạo:
var myViewModel = new Vue({
el: '#best_framework',
data: myFrameworks
});Code language: JavaScript (javascript)Như vậy đã xong, chúng ta tổng hợp các thành phần trên vào file third-example.html.
<html>
<head>
<title>Ví dụ thứ ba về Vue.js - All Laravel</title>
</head>
<body>
<div id="best_framework">
<h1>Top 5 PHP framework tốt nhất hiên nay:</h1>
<ul>
<li v-for="framework in frameworks | orderBy 'vote' -1"> {{ framework.name }}</li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.min.js"></script>
<script type="text/javascript">
var myFrameworks = {
frameworks: [
{ name: "CodeIgniter", vote: 40 },
{ name: "Laravel", vote: 100 },
{ name: "Symfony", vote: 35 },
{ name: "Zend", vote: 18 },
{ name: "Yii", vote: 7 }
]
};
var myViewModel = new Vue({
el: '#best_framework',
data: myFrameworks
});
</script>
</body>
</html>Code language: HTML, XML (xml)Chạy thử thấy trang trắng tinh, “Ông đùa tôi à?”. Mục đích của ví dụ này là tạo một Model chứa danh sách các vote từ các framework, trên view chúng ta sẽ hiển thị danh sách này được sắp xếp theo vote. Tuy nhiên nó đã không hoạt động do trong phiên bản Vue.js 2.0 orderBy đã được bỏ đi, thay vào đấy chúng ta có thể sử dụng các cách để sắp xếp trong các phương thức (sẽ nói đến trong các bài kế tiếp). Để ứng dụng này hoạt động, tạm thời chúng ta chuyển về Vue.js 1.0. Comment Vue.js 2.0 và insert Vue.js 1.0 vào file HMTL.
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script>
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.min.js"></script>
-->Code language: HTML, XML (xml)Giờ chúng ta xem kết quả thế nào
Ok, nó đã hoạt động tốt. Giờ chúng ta nói tiếp về các chỉ thị. Trong view, chúng ta thấy v-for, đây gọi là một chỉ thị. Các chỉ thị luôn bắt đầu bằng chữ v (Vue). v-for hỗ trợ tham số thứ hai là chỉ mục của phần tử hiện hành, ví dụ:
<div id="best_framework">
<h1>Top 5 PHP framework tốt nhất hiên nay:</h1>
<ul>
<li v-for="(framework, index) in frameworks | orderBy 'vote'"> {{ index }} - {{ framework.name }}</li>
</ul>
</div>Code language: HTML, XML (xml)Sử dụng điều kiện khi render trong Vue.js
Câu lệnh v-if
Ví dụ trên chúng ta đã làm quen với chỉ thị vòng lặp v-for có sắp xếp, tiếp theo chúng ta xem v-if là gì bằng ví dụ sau đây:
<div id="example-4">
<p v-if="seen">Bạn đã thấy rồi.</p>
</div>Code language: HTML, XML (xml)Tạo ViewModel
var example4 = new Vue({
el: '#example-4',
data: {
seen: true
}
})Code language: JavaScript (javascript)Tổng hợp nội dung cho file 4th-example.html
<html>
<head>
<title>Ví dụ thứ 4 về Vue.js - All Laravel</title>
</head>
<body>
<div id="example-4">
<p v-if="seen">Bạn đã thấy rồi.</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.min.js"></script>
<script type="text/javascript">
var example4 = new Vue({
el: '#example-4',
data: {
seen: true
}
})
</script>
</body>
</html>Code language: HTML, XML (xml)Khi chạy chúng ta thấy kết quả như sau:
v-if kiểm tra xem giá trị trong Model là true hay false để thực hiện các lệnh tiếp theo, giờ chúng ta sửa giá trị seen thành false xem thế nào. ### Câu lệnh v-else
Bạn có thể sử dụng v-else để hiển thị các thành phần cần thiết khi v-if không được hiển thị.
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>Code language: HTML, XML (xml)Câu lệnh v-else-if
Như tên gọi của nó, nó giống như elseif trong PHP, sử dụng khi một khối giao diện nào đó cần tùy chỉnh theo các trường hợp khác nhau:
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>Code language: HTML, XML (xml)Câu lệnh v-show
Một tùy chọn trong điều kiện hiển thị nữa là v-show, nó có cú pháp giống với v-if nhưng hoạt động khác v-if.
<h1 v-show="ok">Hello!</h1>Code language: HTML, XML (xml)v-show cũng hỗ trợ v-else. Sự khác biệt giữa v-show và v-if:
- v-show thích hợp với các thành phần được thay đổi thường xuyên khi đang chạy.
- v-if không có khả năng thay đổi khi đang chạy, trừ khi thay đổi điều kiện và bắt đầu lại từ đầu.
Quản lý sự kiện trong Vue.js
Trong Vue.js chúng ta có thể quản lý các sự kiện liên quan đến một view như click, hover… Nó rất đơn giản bằng cách thêm các phương thức quản lý sự kiện (event handlder) vào ViewModel, trong phương thức này sử dụng this để truy xuất đến các thành phần trong dữ liệu của Model. Xem xét ví dụ sau:
<html>
<head>
<title>Ví dụ thứ 5 về Vue.js - All Laravel</title>
</head>
<body>
<div id="example5">
Name: <input type="text" v-model="name">
<button v-on:click="myClickHandler">Xin chào</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.min.js"></script>
<script type="text/javascript">
var myModel = {
name: "Kiên Đặng",
age: 35,
gender: "male"
};
var myViewModel = new Vue({
el: '#example5',
data: myModel,
// Phương thức quản lý sự kiện trong Vue
methods: {
myClickHandler: function(e) {
alert("Chào mừng " + this.name + " đến với All Laravel");
}
}
});
</script>
</body>
</html>Code language: HTML, XML (xml)Ở ví dụ trên, trong ViewModel có thêm thuộc tính methods và trong đó có phương thức myClickHandler để quản lý việc click chuột ở view.
Lời kết
Càng đi sâu vào chúng ta thấy vì sao Vue.js được nhiều các framework và website lớn lựa chọn như Laravel, GitLab… đơn giản là vì sự đơn giản của Vue.js. Mới qua 5 ví dụ nhỏ chúng ta đã thấy thực sự Vue.js làm được rất nhiều điều trong việc xây dựng ứng dụng web cho người dùng. Bạn có thể tải về cả 5 ví dụ trong file zip dưới đây để thực hành nhanh. vue.js-example-allaravel-com
Cảm ơn các bạn đã đọc.
Các bạn có thể tham khảo các bài viết hay về Laravel tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
Nguồn tham khảo: Allaravel
Leave a Reply