Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
18 Project VueJS Cho Người Mới Bắt Đầu

18 Project VueJS Cho Người Mới Bắt Đầu


Ngày 2 Tháng 10 Năm 2020

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

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.

Nguồn


Thiết Kế Vue Sidebar

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.

Nguồn


Thiết Kế Vue Tab Component

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.

Nguồn


Thiết Kế Card Vue Component

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.

Nguồn


Tạo Weather App Bằng VueJS

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.

Nguồn


Cách Add Product Bằng Vue

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.

Nguồn


Thiết Kế Clock Bằng VueJS

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.

Nguồn


Thiết Kế Vuejs Contact Form

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.

Nguồn


Cách Tạo Countdown Timer VueJS

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.

Nguồn


Cách Tạo Vue Search Component

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.

Nguồn


Tạo Image Hotspot Bằng Vue

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.

Nguồn


Cách Tạo Vue Timepicker

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.

Nguồn


Thiết Kế Vue Login Form

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

Nguồn


Cách Tạo Vuejs Caculator

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.

Nguồn


Cách Validate Password Bằng Vuejs

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.

Nguồn


Tạo Event Card Vuejs

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.

Nguồn


Thiết Kế Vue Gallery

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.

Nguồn


Cách Tạo Loader Vue.js

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.

Nguồn

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ẻ!