Xuất bản thg 5 19, 2018 2:11 CH 28760 125 16 18
  • 28760 125

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é.

Chia sẻ

NỘI DUNG


BÌNH LUẬN


Avatar Nguyen Vu @Nguyenvu2016
thg 5 19, 2018 2:42 CH

Nếu Backend dùng Graphql, frondend dùng nuxtjs thì có tuyệt hơn không?

Avatar Nguyen Vu @Nguyenvu2016
thg 5 19, 2018 2:52 CH

Trong laravel dùng uuid làm id nhé bạn. Hướng dẫn phân quyền bằng package luôn. Thanks!

Avatar Mai Trung Đức @maitrungduc1410
thg 5 20, 2018 4:03 SA

@Nguyenvu2016 Về graphql và nuxtjs thì mình chưa tìm hiểu, mình chỉ đánh giá theo quan điểm cá nhân và các review từ các developers để đưa ra cho các bạn nhận xét 😃

Avatar Mai Trung Đức @maitrungduc1410
thg 5 20, 2018 4:04 SA

@Nguyenvu2016 còn về laravel dùng uuid làm id nhé bạn. Hướng dẫn phân quyền bằng package, mình sẽ cố gắng đem tới cho các bạn, bạn có thể theo dõi và khi nào có bài mới sẽ có thông báo đến bạn nhé!

Avatar Nguyen Vu @Nguyenvu2016
thg 5 20, 2018 4:11 SA

@maitrungduc1410 khóa học trên https://www.codecourse.com có laravel, có nuxtjs. Nếu tham khảo liên hệ mình gửi. Zalo 01234844567

Avatar Anh Nguyen @xdorro
thg 3 5, 2019 5:23 CH

Cảm ơn về những chia sẻ quý giá của bác, hy vọng bác làm thêm nhiều bài viết bổ ích nữa cho ae 😁😁

Avatar Mai Trung Đức @maitrungduc1410
thg 3 6, 2019 1:35 SA

@xdorro cám ơn bạn nhiều nhé 😃

Avatar Hoàng Hà @hoangha1806
thg 8 19, 2019 4:28 SA

@maitrungduc1410 Cảm ơn bạn nhiều nhé, nhưng mà mình học đến api đang si nghĩ coi có nên quay lại học laravel rồi học tiếp hay ko :3

Avatar Mai Trung Đức @maitrungduc1410
thg 8 19, 2019 1:29 CH

@hoangha1806 vừa Laravel vừa Vue cũng được bạn, quanh đi quẩn lại API thì cũng chỉ có dùng axios để CRUD thôi mà 😄

Avatar Nguyen Trung Duc @thebadboy97
thg 11 3, 2019 2:06 CH

Cảm ơn Bác! Series rất dễ hiểu và có ví dụ rõ ràng! Em đã có thể hiểu các sử dụng Axios để tạo CRUD cho ứng dụng.

Avatar Mai Trung Đức @maitrungduc1410
thg 11 4, 2019 9:42 SA

@thebadboy97 tiếp tục cố gắng tiến lên nhé bạn 😉

thg 3 27, 2020 7:01 SA

@Nguyenvu2016 Nuxtjs để làm dự án lớn hơn và phức tạp hơn thôi bạn, bản chất vẫn là vueJs mà, bên React hình như cũng có thằng Redux tương tự đó bạn

thg 3 27, 2020 7:04 SA

@maitrungduc1410 Minh làm cả 3 framework, kết luận vẫn thích Vuejs

thg 3 27, 2020 7:05 SA

@xdorro Đây là những thứ cơ bản, còn nhiều thứthú vị lắm đó bạn ))

Avatar Folotino @Folotino
thg 1 31, 2023 3:08 SA

@LeXuanSu Nextjs chứ nhỉ , Redux quản lý state mà ta

Avatar Mai Trung Đức @maitrungduc1410
thg 11 8, 2023 9:29 SA

@Folotino uk chắc là bạn ý viết nhầm, NextJS 😃

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí