Laravel phiên bản 5.4 ra mắt ngày 24/01/2017, trong phiên bản mới này Laravel khuyến cáo sử dụng hai framework để xây dựng fontend là Bootstrap và Vue.js. Bootstrap thì cũng khá quen thuộc rồi, là một CSS framework giúp thiết kế nhanh giao diện đặc biệt hỗ trợ responsive. Còn lại Vue.js là gì, tại sao Laravel lại kết thân với Vue trong phiên bản mới nhất này?
Vue.js là gì, sử dụng ở đâu?
Vue (phiên âm /vjuː/, đọc giống như từ view) là một framework Javascript tiên tiến trong xây dựng giao diện người dùng, không giống như các framework khác, Vue được xây dựng từ những dòng code cơ bản nhất nhằm tối ưu tốc độ. Thư viện của Vue chỉ tập trung vào lớp hiển thị, rất đơn giản để tiếp cận và dễ dàng tích hợp vào các hệ thống khác. Vue cũng có khả năng cung cấp các ứng dụng web đơn trang Single Page Application (toàn bộ website chỉ là một trang) cho phép kết hợp với nhiều các công cụ hiện đại, như Laravel chẳng hạn. Vue.js được sử dụng để xây dựng giao diện người dùng giống như React (sử dụng bởi Facebook), Angular (được hậu thuẫn bởi Google), Ember... Tuy nhiên, Vue.js có tốc độ tạo trang (render) rất nhanh và chiếm khá ít bộ nhớ. Chúng ta có thể xem bảng benchmark các framework Javascript nổi tiếng nhất hiện nay, Vue có một thứ hạng không tồi chút nào.
Click vào để xem ảnh lớn hơn. 
Vue.js mới chỉ ra mắt năm 2015, nhưng Vue.js đã sớm khẳng định mình và sớm trở thành người thay thế Angular và React, đây cũng chính là lý do Laravel giới thiệu Vue.js trong thiết lập mặc định. Một ví dụ đơn giản về quản lý người dùng bao gồm thêm, sửa, xóa sử dụng Vue.js giúp bạn hình dung Vue.js là gì?
Sử dụng Vue.js trong giao diện người dùng
Vue.js sử dụng mô hình MVVM (Model-View-ViewModel) với 3 đối tượng cần quan tâm là Model, View và ViewModel. Chúng ta sẽ thực hành ví dụ thực tế, giúp hiểu một cách nhanh chóng hơn Vue.js là gì và ứng dụng như thế nào. Đầu tiên, với bất kỳ framework javascript nào chúng ta cũng phải đưa vào trang html.
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.min.js"></script>Tạo một file first-example.html với nội dung:
<html>
<head>
<title>Ví dụ đầu tiên về Vue.js - All Laravel</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.min.js"></script>
</body>
</html>Trong Vue.js có 3 đối tượng cần để ý là View, Model và ViewModel. View có thể là bất kỳ thành phần nào trong HTML, còn gọi là DOM (Document Object Model). Để xem ViewModel hoạt động như thế nào, chúng ta tạo một View tên là my_view là một thẻ div rỗng.
<div id="my_view">
</div>Tiếp đến Model là một đối tượng thuần túy trong Javascript, chúng ta tạo một Model có tên myModel.
<script type="text/javascript">
var myModel = {
name: "All Laravel",
url: "https://allaravel.com",
author: "Kiên Đặng"
};
</script>Ok, giờ chúng ta đã có một View và một Model, chúng ta tạo ra một ViewModel là một instance của Vue class là cầu nối giữa view my_view và model myModel:
var myViewModel = new Vue({
el: '#my_view',
data: myModel
});thuộc tính el trỏ đến View, còn thuộc tính data trỏ đến Model. Như vậy ViewModel đã có thể hoạt động. Để hiển thị dữ liệu của Model trong View chúng ta sử dụng như sau:
<div id="my_view">
<a href="{{ url }}">{{ name }}</a> là website do <b>{{ author }}</b> phát triển.
</div>Đây là cách in ra các dữ liệu thông thường, tuy nhiên Vue cũng có các lệnh riêng (directive), chúng ta viết lại như sau:
<div id="my_view">
<a v-bind:href="url" v-text:"name"></a> là website do <b v-text:"author"></b> phát triển.
</div>Từ phiên bản Vue.js 2, Vue khuyến cáo không sử dụng các biểu thức dạng Javascript. Tổng hợp tất cả những code ở trên ta có file first-example.html như sau:
<html>
<head>
<title>Ví dụ đầu tiên về Vue.js - All Laravel</title>
</head>
<body>
<div id="my_view">
<a v-bind:href="url" v-text="name"></a> là website do <b v-text="author"></b> phát triển.
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.min.js"></script>
<script type="text/javascript">
var myModel = {
name: "All Laravel",
url: "https://allaravel.com",
author: "Kiên Đặng"
};
var myViewModel = new Vue({
el: '#my_view',
data: myModel
});
</script>
</body>
</html>Kết quả hoàn chỉnh như sau:
[jsfiddle url="https://jsfiddle.net/allaravel/33y6my1t/" height="200px" include="result,html,js" font-color="39464E" menu-background-color="FFFFFF" code-background-color="f3f5f6" accent-color="1C90F3"]
Ví dụ này hết sức đơn giản, dữ liệu được đẩy vào trong quá trình render trang web, chúng ta cũng thấy được mối quan hệ giữa các đối tượng View, Model và ViewModel trong Vue.js. Tuy nhiên, trong ví dụ đơn giản này dữ liệu mới chỉ đi theo một chiều từ Model sang ViewModel và hiển thị trên View.
Chúng ta cùng nhau tiếp tục ví dụ thứ 2, trong ví dụ này dữ liệu được đi hai chiều còn gọi là two-way data binding (Model <-> ViewModel <-> View). Tạo file second-example.html
<html>
<head>
<title>Ví dụ thứ hai về Vue.js - All Laravel</title>
</head>
<body>
<div id="my_view">
<label for="name">Tên website:</label>
<input type="text" v-model="name"/>
<label for="url">URL:</label>
<input type="text" v-model="url"/>
<label for="author">Tên website:</label>
<input type="text" v-model="author"/>
<br>
<a v-bind:href="url" v-text="name"></a> là website do <b v-text="author"></b> phát triển.
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.min.js"></script>
<script type="text/javascript">
var myModel = {
name: "All Laravel",
url: "https://allaravel.com",
author: "Kiên Đặng"
};
var myViewModel = new Vue({
el: '#my_view',
data: myModel
});
</script>
</body>
</html>Kết quả như sau:
Chúng ta cùng đi sâu hơn vào ví dụ này, ở chiều thứ nhất dữ liệu cũng từ Model sang ViewModel và hiển thị trên View, nhưng thú vị hơn khi chúng ta thử thực hiện chiều ngược lại, thay đổi dữ liệu trên View xem nó có đi ngược lại về Model không?
Bạn thử thay đổi giá trị trong các textbox, chúng ta thấy ngay lập tức dòng chữ phía dưới được thay đổi ngay mà dòng phía dưới này được in ra từ nội dung của myModel, như vậy khi dữ liệu trên View thay đổi nó tác động ngược lại Model ngay lập tức. Thật tuyệt vời phải không bạn, đây chỉ là một ví dụ nhỏ, chúng ta có thể tưởng tượng được ngay Vue.js có thể làm được những gì.
Lời kết
Vue.js thật là đơn giản trong các khái niệm phải không? chỉ với 3 đối tượng View, Model và ViewModel chúng ta có dữ liệu được truyền qua lại theo hai chiều. Vue.js cho phép chúng ta xây dựng các giao diện người dùng tuyệt vời với tốc độ render trang rất nhanh. Nếu bạn muốn xây dựng những ứng dụng web tương tác kiểu như Facebook, Google Plus, Twitter... thì bạn đã tìm được công cụ thích hợp rồi đấy. Bài viết Vue.js là gì tạm dừng ở đây, chúng ta sẽ tiếp tục với Vue.js trong các bài tiếp theo các bạn chờ đọc nhé.
CÁC BÀI VIẾT KHÁC
Vietus
6 years ago
Phản hồiFirebirD
5 years ago
Phản hồiTuấn Anh
6 years ago
Phản hồiFirebirD
5 years ago
Phản hồiCẩm Tú
5 years ago
Phản hồiFirebirD
5 years ago
Phản hồiKulit
5 years ago
Phản hồiHiT
5 years ago
Phản hồi