Bài viết hôm nay mình sẽ giới thiệu những project Vuejs dành cho người mới bắt đầu với mục đích giúp bạn có thể thực hành viết code dựa trên những kiến thức VueJs cơ bản đã học. Nào bây giờ chúng ta hãy cùng nhau đi vào tìm hiểu nhé!
Những Project Thực Hành VueJS Cho Người Mới Bắt Đầu
Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu file là Pug thì bạn có thể chuyển sang HTML ở đây nhé : Pug to HTML. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.
Tạo To Do List VueJs
Còn dưới đây là dự án trên Codepen nhé:
See the Pen Todo List UI with VueJs by Sawsan (@saawsan) on CodePen.
Thiết Kế Vue Sidebar
Còn dưới đây là dự án trên Codepen nhé:
See the Pen Vue.js Recipe - Slideout Menu by Andy Merskin (@andymerskin) on CodePen.
Thiết Kế Vue Tab Component
Còn dưới đây là dự án trên Codepen nhé:
See the Pen 3D Vue Tabs by Bobby Korec (@bobbykorec) on CodePen.
Thiết Kế Card Vue Component
Còn dưới đây là dự án trên Codepen nhé:
See the Pen Blog Card by Katherine Kato (@kathykato) on CodePen.
Tạo Weather App Bằng VueJS
Còn dưới đây là dự án trên Codepen nhé:
See the Pen Vue Weather App by Christophor Wilson (@CSWApps) on CodePen.
Cách Add Product Bằng Vue
Còn dưới đây là dự án trên Codepen nhé:
See the Pen UI: Button morphing into form by Greg Hovanesyan (@gregh) on CodePen.
Thiết Kế Clock Bằng VueJS
Còn dưới đây là dự án trên Codepen nhé:
See the Pen Digital Clock with Vue.js by Toshiyuki TAKAHASHI (@gau) on CodePen.
Thiết Kế Vuejs Contact Form
Còn dưới đây là dự án trên Codepen nhé:
See the Pen Vue Contact Form by Béla Varga (@netzzwerg) on CodePen.
Cách Tạo Countdown Timer VueJS
Còn dưới đây là dự án trên Codepen nhé:
See the Pen Flip clock & countdown, Vue by Shaw (@shshaw) on CodePen.
Cách Tạo Vue Search Component
Còn dưới đây là dự án trên Codepen nhé:
See the Pen Vue search filter by Andrew thian (@AndrewThian) on CodePen.
Tạo Image Hotspot Bằng Vue
Còn dưới đây là dự án trên Codepen nhé:
See the Pen Image Hotspot concept with Vue by Irko Palenius (@ispal) on CodePen.
Cách Tạo Vue Timepicker
Còn dưới đây là dự án trên Codepen nhé:
See the Pen Vue timepicker by Irko Palenius (@ispal) on CodePen.
Thiết Kế Vue Login Form
Còn dưới đây là dự án trên Codepen nhé:
See the Pen Sign Up Form by Sicontis (@Sicontis) on CodePen.
Cách Tạo Vuejs Caculator
Còn dưới đây là dự án trên Codepen nhé:
See the Pen vue.js - Calculator by Clément Roche (@ClementRoche) on CodePen.
Cách Validate Password Bằng Vuejs
Còn dưới đây là dự án trên Codepen nhé:
See the Pen Vue Password Strength Meter by Mehmet Burak Erman (@mburakerman) on CodePen.
Tạo Event Card Vuejs
Còn dưới đây là dự án trên Codepen nhé:
See the Pen Vue Events Card List by Noah (@noahbres) on CodePen.
Thiết Kế Vue Gallery
Còn dưới đây là dự án trên Codepen nhé:
See the Pen Simple Vue Photo Gallery by Christophor Wilson (@CSWApps) on CodePen.
Cách Tạo Loader Vue.js
Còn dưới đây là dự án trên Codepen nhé:
See the Pen Vue.js page preloader by Mathias Nielsen (@MathiasNielsen) on CodePen.
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những dự án bài tập Vuejs hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!