Bài viết được sự cho phép bởi tác giả Sơn Dương Vue thực sự là một thư viện JS tuyệt vời để xây dựng các ứng dụng web, đặc biệt là ứng dụng SPA (Single Page Application). Bài viết trước, mình đã giới thiệu về Vue, các cài đặt cũng bước đầu tạo một ứng dụng web với Vue. Phần này, mình tiếp tục giới thiệu Vuejs Router, một module router chính thức của Vue. Vue Router là module được tích hợp sâu vào Vue, giúp bạn dễ dàng tạo các route cho ứng dụng. Để bạn có thể hiểu được đầy đủ về Vuejs router và thực hành thuần thục, chúng ta sẽ cùng nhau tìm hiểu khái niệm trước. #Router là gì? Vuejs router có tính năng gì hay ho? Khi làm việc với các ứng dụng back-end thì các bạn sẽ thấy router thực chất là định nghĩa cách url để ứng dụng điều hướng tới đúng hàm, đúng component xử lý nó. Ví dụ nhé: GET / [...]

Bài viết được sự cho phép của tác giả Sơn Dương Như bài viết trước, chúng ta đã hiểu cơ bản về vue jvs, biết cách cài đặt và tạo một ứng dụng bằng vuejs. Phần tiếp theo, mình muốn các bạn hiểu sâu hơn về cấu trúc dự án được tạo bằng Vuejs CLI sẽ như thế nào? Mô hình của vuejs là MVVM thì cấu trúc các folder trong dự án sẽ ra sao. Để theo dõi bài viết này được suôn sẻ, bạn nhớ chuẩn bị sẵn những thứ bên dưới nhé: Cài đặt Vuejs Cài đặt NPM Ngoài ra, ở bài viết trước, mình đã tạo sẵn bộ khung dự án, các bạn chỉ cần clone từ github về là xong. Ở bài này, mình sẽ hướng dẫn các bạn tự tạo dự án bằng câu lệnh Vuejs CLI. Chúng ta bắt đầu nhé! Vue CLI là gì? Vue-CLI là một gói NPM được cài đặt trên toàn thế giới nhằm cung cấp vue trong terminal . Bằng [...]

Bài viết được sự cho phép của tác giả Kiên Nguyễn Làm việc với Vuejs applications là làm việc với Components, nhưng không phải là cứ component thì thảy tất cả vào. Đối với những application lớn (large scale application), đòi hỏi người kĩ sử phải biết thêm về Vuejs Design Pattern để sử dụng tốt những pattern này [irp posts="15311" name="Cách sử dụng các plugins jQuery trong VueJS"] [irp posts="4199" name="API Authentication trong Laravel-Vue SPA sử dụng Jwt-auth"] Xem thêm nhiều chương trình tuyển dụng VueJS hấp dẫn trên TopDev 1. Cơ bản về Vuejs Design Pattern Bắt đầu với câu hỏi Design Pattern là gì? Hiểu sơ Vuejs Design Pattern có thể thông qua hai định nghĩa cơ bản sau: A general reapeatable solution to a commonly occuring problem in software Là giải pháp lặp đi lặp lại cho phần đề chung nhất trong software Not tied to a specific problem. They’re very general and can be applied to a board spectrum of problems. Không ràng buộc với một vấn đề cụ thể. Chúng rất chung chung và có [...]

Bài viết được sự cho phép của tác giả Kiên Nguyễn Tiếp nối series về chuỗi bài Vuejs Anti Pattern, Kieblog hân hạnh giới thiệu bài viết số 2 về chuỗi bài này. Xúc hết hai ba phần của chuỗi bài viết này thì khả năng code tăng lên khá nhiều rồi nhé. Bài viết này chủ yếu bổ sung thêm một số phần còn thiếu về naming, template và prop validation. Nhưng pattern này tuy nhỏ, nhưng không nên vì nhỏ mà khinh thường bỏ qua. Nhỏ mà có võ nha mấy ba! [irp posts="32486" name="10 kinh nghiệm khi làm việc với các dự án lớn viết bằng Vue.js"] [irp posts="2120" name="3 phút làm quen với Vue.js"] Xem thêm nhiều chương trình tuyển dụng VueJS hấp dẫn trên TopDev 1. Naming components – Vuejs Anti pattern Về việc đặt tên cho components, thường một số bạn đặt tên component vô tội vạ, thích đặt gì thì đặt cái đó Đặt tên component quá chung chung và không thể hiện đượ [...]

Bài viết được sự cho phép của tác giả Kiên Nguyễn Bắt đầu với lí do tại sao lại có chuỗi bài Vuejs Anti Pattern. Trong quá trình lead một team làm việc chủ yếu với Nuxtjs và Typescript. Bản thân tôi thấy rất nhiều member bị dính những con bug khá khoai (đại loại như out of control) Sau khi bỏ time điều tra, hầu hết do các bạn code không theo một quy củ nào. Cũng không có tài liệu nào cho biết cách làm A thì tốt hơn cách làm B. Hoặc cách làm C sẽ gây khó khăn sau này khi maintain [irp posts="35748" name="Clean Architecture: Đứng trên vai những gã khổng lồ"] [irp posts="38961" name="Clean Code là gì? Tại sao phải CLEAN CODE trong lập trình?"] Xem thêm các chương trình tuyển dụng Vuejs hấp dẫn trên TopDev Chính vì vậy tui viết chuối bài Vuejs Anti Pattern liệt kê những pattern cần tránh khi làm việc với Vuejs Có 2 [...]

Bài viết được sự cho phép của tác giả Kiên Nguyễn Nếu bạn chưa nắm rõ về Vuejs Life Cycle, hãy nghe lời tôi, đọc và ghi nhớ hết các hooks trong bài viết này. Tôi thề là nó sẽ có ích cho bạn. [irp posts="15311" name="Cách sử dụng các plugins jQuery trong VueJS"] [irp posts="11321" name="Call API trong VueJS theo cách thông minh nhất"] 1. Creation (Initialization) – Khởi tạo component Đầu tiên, bất cứ component nào cũng cần được khởi tạo. Các methods được thực thi ở Creation sẽ được xác nhận (perform actions) trước khi các component này được thêm vào DOM. Nếu các bạn chưa hiểu nhiều về DOM và cách Browser render website, có thể đọc thêm bài viết này ở kieblog.vn Hầu hết các xử lí được thực hiện ở Creation thường là thao tác giữa Client và Server (Xác thực đăng nhập, fetch data từ API). Nhưng tại sao lại thế? Creation là bước đầu tiên trong chuỗi Vuejs life cycle, ở bước này, chúng ta chưa có quyề [...]

Bài viết được sự cho phép của tác giả Kiên Nguyễn Refactor code, câu chuyện không của riêng ai. Tuy nhiên, chỉ có khi đi review source code của ai đó, hoặc họa may có task review, mấy ông dev mới lọc cọc đi review. [irp posts="15311" name="Cách sử dụng các plugins jQuery trong VueJS"] [irp posts="11321" name="Call API trong VueJS theo cách thông minh nhất"] Dưới đây là 4 điều các bạn có thể tham khảo qua trước khi bắt đầu code Vuejs. Nếu thực tế, có thể áp dụng vào dự án. Tránh trường hợp nghe chửi “ầm ì xèo” khi có ai đi review code mình nha. Anh em đọc nhớ rút kinh nghiệm kẻo như này nha =)) BẮT ĐẦU NÀO! 1. Chú ý tới thứ tự life cycle hooks Bạn nào chưa biết về VueJs Life Cycle thì đọc ngay bài viết này ở Kieblog nha. Life Cycle là phần kiến thức cực kì quan trọng cần nắm vững trước khi bắt đầu tìm hiểu sâu hơn. Lời khuyên là ngay từ lúc bắt đầu, [...]

Bài viết được sự cho phép của tác giả Kiên Nguyễn Nay rảnh rỗi lướt Medium thấy có bài viết rất hay về Vuejs NextTick. Tiện đang code project trên công ty bằng Vuejs. Vietsub luôn cho anh em cùng tìm hiểu, trao đổi. Năm nay dự là Vuejs hot khỏi bàn rồi. Bỏ xa AngularJs với đe dọa ngôi vương của ReactJs sớm thôi. Vuejs năm nay dự rất HOT. Nhiều sao lắm rồi. Anh em nên “try hard” học thử Thật sự thì Vuejs NextTick là gì?. Lúc nào nên sử dụng NextTick?. Có khác biệt gì với setTimeout hay setImmediate không? Tuốt tuồn tuột được giải thích qua bài viết dưới đây. [irp posts="11321" name="Call API trong VueJS theo cách thông minh nhất"] [irp posts="37089" name="Những Vuejs concept bắt buộc phải nắm vững – Phần 1"] 1. Khái niệm Theo như tài liệu ở trang chủ của Vuejs thì NextTick sinh ra để làm hai việc sau: Defer the callback to be executed after the next DOM update cycle Định nghĩa một function callback [...]

Bài viết được sự cho phép của tác giả Kiên Nguyễn DEV: Thưa bụt, con đang học Vuejs, bụt biết Vuejs data flow không? BỤT: Tao là thần chứ có phải “đi ven lốp bờ” như m đâu. Biết thế đ** nào được! DEV: Nhưng mà con muốn học, muốn trở thành dev lương 3k BỤT: Ta không giúp được, nhưng có 3 món bảo vật (gọi là tam chủng thần khí) có thể giúp con. Nhớ học và thực hành nhuần nhuyễn từng loại thì kiểu gì cũng có người yêu (nhầm, lương cao). Tìm việc làm VueJS lương cao cho bạn 1. Props và emit 1.1 Ai cũng nên dùng Một Vuejs Application tất nhiên sẽ chia ra làm nhiều component. Component cha, component con. Trường hợp số lượng component không quá nhiều Emit và Props là hai món bảo vật nên biết cách để sử dụng: Dễ hiểu, dễ sử dụng Khuyến khích sử dụng cho các component quan hệ cha – con (parent – child) Không nên sử dụng khi  [...]

Bài viết được sự cho phép của tác giả Kiên Nguyễn Tuần trước đã có bài viết về nextTick() trong Vuejs, nhân đây muốn giới thiệu qua cho anh em luôn về Vuejs Render Process. Hiểu process của Vue mới nâng tầm lên được. Chứ cứ v-if, v-else, v-show hoài mà không biết nó render như thế nào thì toang. Sẵn sàng chưa nào?. Xúc ngay và luôn cho nóng nha! [irp posts="15311" name="Cách sử dụng các plugins jQuery trong VueJS"] [irp posts="11321" name="Call API trong VueJS theo cách thông minh nhất"] 1. Virtual DOM Trước khi tìm hiểu về Vuejs Render Process, bắt buộc phải có kiến thức về DOM (Document Object Model). Anh em nào chưa biết có thể tìm hiểu qua bài viết này. Trước đây khi có thay đổi phía FE, một node trên DOM tree thay đổi sẽ kéo theo phải render lại toàn bộ tree. Việc thay đổi trên toàn bộ cây DOM thật sự tệ. Chính vì vậy, Virutal DOM ra đời. Tóm tắt nhanh như tốc độ crush tỏ tì [...]

Bài viết được sự cho phép của tác giả Kiên Nguyễn Bữa rồi rảnh rỗi ngồi lướt Facebook thấy có status đăng như sau “Phỏng vấn Vuejs một bạn làm Vuejs 2 năm nhưng không rõ về mounted, computed và created“. [irp posts="15311" name="Cách sử dụng các plugins jQuery trong VueJS"] [irp posts="4165" name="Instant AJAX Search với Laravel và Vuejs"] Nghĩ mà buồn thay, nên tiếp sau bài viết về Vuejs life cycle – hiểu sao cho đúng. Mình quyết định viết thêm bài viết một số câu hỏi phỏng vấn Vuejs cơ bản. Hy vọng sẽ giúp đỡ các bạn khi try hard phỏng vấn Vuejs nha. Đệch, đặt tên con đi phỏng vấn đâu cũng pass. LOL 1. Sự khác biệt giữa v-if và v-show? // V-if condition group <template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template> v-if only renders the element to the DOM if the expression passes whereas v-show renders all elements to the DOM and then uses the CSS display property to show/hide elements based on expression. v-if chỉ [...]

Bài viết được sự cho phép của tác giả Kiên Nguyễn Khi bắt đầu học / tìm hiểu môn ngôn ngữ hay framework, technology mới thì code được tất nhiên là tốt, nhưng hiểu về concept lại là điều quan trọng nhất, chính vì lí do đó Kieblog giới thiệu thêm bài viết về Vuejs Concept. Học Vuejs tất nhiên nhanh, nhưng không nên vì quá nhanh mà quên mất những concept quan trọng nhất của Vuejs. [irp posts="11321" name="Call API trong VueJS theo cách thông minh nhất"] [irp posts="37031" name="Top 3 Vuejs Library không thể không biết"] Bắt đầu ngay thôi nào! 1. Computed và methods Thật ra mục này tương tự như câu hỏi “Computed và Methods khác gì nhau?”. Đầu tiên, computed tất nhiên không có tham số (đối số) – argument. Thường được sử dụng để xử lý data từ những properties của component hiện tại hoặc chuyển từ component khác tới Computed properties actually work like getters, they are usually using to compose new data from existing properties and they don’t accept arguments. Computed properties know if [...]

Bài viết được sự cho phép của tác giả Kiên Nguyễn Muốn trở thành Vuejs Master tất nhiên không thể suốt ngày dựa dẫm vào các “Top 3 Vuejs Library”, “Top 5 Vuejs Library”. Một Senior Vuejs Engineer luôn có những component riêng được viết từng dòng code. Lượng sao trên github tất nhiên chẳng bao giờ tồi. Tuy nhiên, nói đi cũng phải nói lại. Biết Library chưa chắc đã là không tốt. Một số dự án khi đã bị dí “tới đít”, sử dụng Library là điều không thể tránh khỏi. Do viết byhand một component bao giờ cũng tốn thời gian. Tuy nhiên, dùng là một chuyện, biết để dùng lại là chuyện khác. [irp posts="15311" name="Cách sử dụng các plugins jQuery trong VueJS"] [irp posts="4165" name="Instant AJAX Search với Laravel và Vuejs"] Bài viết dưới đây Kieblog giới thiệu Top 3 Vuejs Library thường hay sử dụng nhất. Dùng khá là ok nên mới giới thiệu nha! Bắt đầu ngay thôi nào! 1. User Ratings Đứng thứ nhấ [...]

Tính năng tìm kiếm tức thì (instant search) hiện là một tính năng khá phổ biến trong web và app. Trong bài đăng này, mình cố gắng trình bày các điểm chính của việc xây dựng một component tìm kiếm theo thời gian thực có các tính năng như debounce* hoặc highlighting các kết quả. * : Các sự kiện input từ người dùng (thông qua mouse, keyboard,…) thường diễn ra với tần suất rất nhanh. Điều này khiến hàm xử lý sự kiện được thực thi rất nhiều và có thể ảnh hưởng đến performance cũng như user experience (UX), đặc biệt khi việc input tác động đến giao diện trang web. Để khắc phục điều này, ta hãy tìm hiểu và ứng dụng phương pháp “Debounce” trong javascript. Để hiểu rõ hơn bạn vào link tại đây để xem. Mở đầu: Tiến trình cũng như kết quả của 1 process như sau: chúng ta gõ bất kỳ vào input field và dữ liệu được truyền đến server side bằng [...]

Người viết: Max Hế lô! Sau 1 thời gian tu luyện trên núi mình đã quyết định xuống núi để quay lại chiến đấu cùng các anh em. Hôm nay mình xin giới thiệu đến các bạn 1 thứ hoàn toàn mới và khá hay ho mang tên “Viu gi ét” :)) Nếu bạn là một dev front-end chân chính thì chắc hẳn ít nhất một lần đã nghe và có thể là đang làm với framework này rồi nhỉ. Mình cũng vậy, sau khi bị nó thả thính và bắt đầu mê nó nên mình đã quyết định áp dụng dùng thử nó với 1 plugin của WordPress. Trước đây mình cũng đã từng dev AngularJS, rồi Angular 2+ và cũng suýt tẩu hỏa nhập ma với nó. Vì vậy mình đã xách mông lên tìm một môn võ mới mang tên VueJS. Sau 1 thời gian dev với VueJS thì mình đã phải thốt lên “Sao mày không đến với cuộc đời tao sớm hơn :))” bởi vì nó quá tuyệt vời và phù hợp [...]