Mình đã cập nhật lại tất cả các bài với các thay đổi ở hiện tại ở năm 2024: Vue 3, Vite, Laravel 10x,...

Chào mừng tất các các bạn đến với series hướng dẫn học VueJS và Laravel từ căn bản đến nâng cao của mình

Giới thiệu

Ở tên của series mình để chữ VueJS lên trước vì trong series này mình sẽ "hơi" nói nhiều hơn về VueJS vì khi học tập và đi làm mình thiên hướng về nó nhiều hơn (tất nhiên có cả Laravel nữa).

Hiện tại mình chưa thấy có nhiều khoá học tiềng Việt cho các bạn chưa giỏi tiếng Anh mà về nội dung thực sự đầy đủ, những khoá hay thì đều phải mua cả. Nên mình hi vọng rằng với những kiến thức và kinh nghiệm trong quá trình học tập và làm việc của mình có thể đem lại cho các bạn những kiến thức hữu dụng để có thể ap dụng vào trong các dự án, công việc của các bạn, hoặc đơn giản là giúp các bạn có thể hiểu thêm về VueJS và Laravel, 2 frameworks mà mình thực sự thấy tuyệt vời nhất ở thời điểm hiện tại để làm frontend và backend.

Tổng quan về series

Trong series này mình sẽ cố gắng mang tới cho các bạn tất cả những gì mình đã học, tìm hiểu được, từ cơ bản đến nâng cao, mong rằng mình có thể đem lại những kiến thức mình học được giúp cho mọi người. Mình sẽ mặc định là các bạn đã có những kiến thức cơ bản về Laravel và mình sẽ hướng dẫn thêm cho các bạn những điều khác(nếu như điều đó hữu ích với bạn)

Vì với Laravel thì hiện tại đã có rất nhiều khoá học hay mà free cả tiếng Việt lẫn tiếng Anh trên google nên mình sẽ tập trung nhiều vào Vue hơn. Mình sẽ đi từ các bước cơ bản như tạo project, install Vue, giới thiệu những điều cơ bản trong Vue đến nâng cao hơn như: directives, bus, performance, vue-router, vuex,... Cùng với đó là làm việc với phần backend sử dụng Laravel (DB, event, route, cache, ...)

Lý do nên học VueJS và Laravel

Với việc sử dụng Laravel trong lập trình web thì các bạn có thể tự tìm hiểu sẽ thấy Laravel là một frameworks rất mạnh và có thể nói là lớn nhất bây giờ, Laravel đem lại cho các lập trình viên nhiều công cụ rất hữu hiệu, giúp quy trình phát triển một ứng dụng web nhanh hơn và mạnh mẽ hơn.

Một điều quan trọng nữa là mình thấy hầu như các tut học VueJS chưa nói lên được nhiều về tính hữu dụng của việc chia app thành các components và cách quản lý chúng, đây là một điều mình rất thích ở Vue(hầu như chỉ tập trung vào việc tạo app, sử dụng v-for, v-if,... binding data)

Còn với VueJS thì đây là một JS frameworks tuổi đời còn khá trẻ (release lần đầu năm 2014). Vue được đánh giá là gần giống React từ các viết, chia components, sử dụng DOM ảo,...Sử dụng Vue chúng ta có thể tạo ra các ứng dụng SPA(Single-page-application) - các ứng dụng đơn trang, khi nội dung thay đổi thì trang không phải load lại, cùng với đó là việc có thể chia code HTML thành các module nhỏ hơn, tách biệt HTML, JS, CSS của các components.

Sau một khoảng thời gian làm việc với Vue thì mình đã fall in love em ấy rồi, vì thực sự những điều Vue mang lại cho chúng ta quá tuyệt vời, Vue rất dễ để học, code gọn gàng, đặc biệt là khả năng bind dữ liệu trực tiếp vào thẻ HTML, sử dụng DOM ảo giúp Vue có thể render nhanh hơn và còn hàng tá thứ nữa mà trong series này mình sẽ cố gắng truyền đạt hết cho các bạn.

Về ưu điểm của Vue. Hiện tại mình thấy nổi lên có 3 JS Framework đó là : VueJS, ReactJS, AngularJS. Với Vue mình đã nói ở trên và trong cả series này, còn với 2 framework còn lại thì ý kiến cá nhân của mình như sau:

• React: React và Vue thì gần giống như nhau, nhưng nếu các bạn thử học qua React có thể thấy code của Vue gọn hơn React (đây là điều duy nhất mình thấy sau khi làm thử với react, cũng hơi cá nhân ), mỗi component của Vue tách biệt rõ ràng 3 thành phần HTML(template), code JS, CSS và rất dễ để chúng ta quan sát chỉnh sửa. Mình mới thử phần phân chia component React mỗi component code HTML lại phải ném hết vào hàm render() trông gớm quá .
• Angular: hiện tại mình đang có 1 dự án riêng làm bằng Angular, thực sự thì mình thích Vue hơn nhưng do các thành viên khác đã quen với Angular nên mình quyết định thử cái mới. Và thực sự mình thấy "kinh khủng" với code của Angular , html 1 file, css 1 file, js 1 file, view nào cũng như thế. Angular 1 khác hoàn toàn 2, 4 (tính kế thừa ở đâu @@) và một điều nữa là inspect Angular ở devtool thấy "choáng" vì độ rối mắt khi để các xử lý tùm lum ở các thẻ html.

Với Vue thì những điều trên đều được cái thiện vì Evan You creator của Vue đã đưa những gì tuyệt vời nhất của 2 framework và cả Meteor (platform mà Evan You đã từng làm ở Google). Đồng thời kết hợp VueJS với Laravel chúng ta sẽ có một ứng dụng mạnh mẽ về cả frontend và backend: bảo mật, performance,...

Nói thế thôi nhỉ, chúng ta cùng học Vue để xem nó tuyệt vời thế nào nhé.