Lập trình Vue.js

Vue.js cung cấp các khái niệm cơ bản và nâng cao về Vue.js. Hướng dẫn Vue.js của chúng tôi được thiết kế cho cả người mới bắt đầu và người chuyên nghiệp. Vue.js là một khung JavaScript tiến bộ mã nguồn mở được sử dụng để phát triển các giao diện người dùng web tương tác và các ứng dụng một trang. Vue.js chủ yếu tập trung vào phần xem của ứng dụng còn được gọi là phát triển giao diện người dùng. Vue.js đang trở nên phổ biến từng ngày vì nó rất dễ tích hợp với các dự án và thư viện khác. Nó rất đơn giản để cài đặt và sử dụng. Ngay cả những người mới bắt đầu cũng có thể hiểu nó một cách dễ dàng và bắt đầu xây dựng giao diện người dùng của riêng họ. Trong hướng dẫn này, bạn sẽ tìm hiểu Vue.js là gì, cách cài đặt Vue.js, Vue.js Instances, Components, Properties, Bindings, Events, Rendering, Directives, Routing, Mixins, Render các chức năng, v.v.

Vue.js là gì?

Vue.js là một framework JavaScript tiến bộ mã nguồn mở được sử dụng để phát triển các giao diện người dùng web tương tác và các ứng dụng một trang (SPA) . Vue.js thường được gọi là Vue và được phát âm là “view.js” hoặc “view”. Hướng dẫn Vue.js

Ứng dụng một trang (SPA) là gì?

Ứng dụng một trang hay SPA là một ứng dụng web hoặc một trang web cung cấp cho người dùng trải nghiệm rất linh hoạt, phản ứng nhanh và tương tự như một ứng dụng trên máy tính để bàn. Một ứng dụng trang đơn chứa một menu, các nút và các khối trên một trang. Khi người dùng nhấp vào bất kỳ trang nào trong số họ, nó sẽ tự động ghi lại trang hiện tại thay vì tải toàn bộ trang mới từ máy chủ. Đó là lý do đằng sau tốc độ phản ứng nhanh của nó. Về cơ bản, Vue được phát triển để phát triển giao diện người dùng, vì vậy nó phải xử lý rất nhiều HTML , JavaScriptvà CSS. Vue.js tạo điều kiện cho người dùng mở rộng HTML với các thuộc tính HTML được gọi là chỉ thị. Vue.js cung cấp các chỉ thị tích hợp sẵn và rất nhiều chỉ thị do người dùng xác định để nâng cao chức năng cho các ứng dụng HTML.

Lịch sử của Vue.js

Vue.js được tạo bởi Evan You, người khi đó đang làm việc cho Google bằng cách sử dụng AngularJs trong các dự án của họ. Anh ấy đã trích xuất một số phần của AngularJS và xây dựng một khung JavaScript nhẹ nào đó sau đó được phát hành dưới tên Vue.js. Phiên bản đầu tiên của Vue.js được phát hành vào tháng 2 năm 2014. Hiện nó được duy trì bởi anh ấy và các thành viên còn lại của nhóm cốt lõi tích cực đến từ nhiều công ty khác nhau như Netlify và Netguru. Vue.js đang trở nên phổ biến từng ngày vì nó rất dễ tích hợp với các dự án và thư viện khác. Nó rất đơn giản để cài đặt và sử dụng. Ngay cả những người mới bắt đầu cũng có thể hiểu nó một cách dễ dàng và bắt đầu xây dựng giao diện người dùng của riêng họ.

Tất cả các phiên bản đã phát hành của Vue.js

Sau đây là danh sách tất cả các phiên bản đã phát hành của Vue.js:

Phiên bản Ngày phát hành Tên phiên bản
0.6 Dec 8, 2013 N/A
0.7 Dec 24, 2013 N/A
0.8 Jan 27, 2014 N/A
0.9 Feb 25, 2014 Animatrix
0.10 Mar 23, 2014 Blade Runner
0.11 Nov 7, 2014 Cowboy Bebop
0.12 Jun 12, 2015 Dragon Ball
1.0 Oct 27, 2015 Evangelion
2.0 Sep 30,2016 Ghost in the Shell
2.1 Nov 22, 2016 Hunter X Hunter
2.2 Feb 26, 2017 Initial D
2.3 Apr 27, 2017 JoJo’s Bizarre Adventure
2.4 Jul 13, 2017 Kill la Kill
2.5 Oct 13, 2017 Level E
2.6 Feb 4, 2019 Sword Art Onlin: Alicization

Các tính năng của Vue.js

Sau đây là danh sách các tính năng nổi bật nhất của Vue.js:

Các thành phần

Vue.js Thành phần là một trong những tính năng quan trọng của khung công tác này. Chúng được sử dụng để mở rộng các phần tử HTML cơ bản để đóng gói mã có thể sử dụng lại. Bạn có thể tạo các phần tử tùy chỉnh có thể sử dụng lại trong ứng dụng Vue.js để sau này có thể sử dụng lại trong HTML.

Mẫu

Vue.js cung cấp các mẫu dựa trên HTML có thể được sử dụng để liên kết DOM được hiển thị với dữ liệu phiên bản Vue. Tất cả các mẫu Vue đều là HTML hợp lệ có thể được phân tích cú pháp bởi các trình duyệt và trình phân tích cú pháp HTML tuân thủ đặc điểm kỹ thuật. Vue.js biên dịch các mẫu thành các chức năng kết xuất DOM ảo. Vue hiển thị các thành phần trong bộ nhớ DOM ảo trước khi cập nhật trình duyệt. Vue cũng có thể tính toán số lượng thành phần tối thiểu để kết xuất lại và áp dụng số lượng thao tác DOM tối thiểu khi bạn thay đổi trạng thái của ứng dụng.

Phản ứng

Vue cung cấp một hệ thống phản ứng sử dụng các đối tượng JavaScript đơn giản và tối ưu hóa kết xuất. Trong quá trình này, mỗi thành phần theo dõi các phụ thuộc phản ứng của nó, do đó hệ thống biết chính xác khi nào và thành phần nào cần kết xuất lại.

định tuyến

Điều hướng giữa các trang được thực hiện với sự trợ giúp của vue-router. Bạn có thể sử dụng thư viện bộ định tuyến vue được hỗ trợ chính thức cho Ứng dụng Trang đơn của mình hoặc nếu bạn chỉ cần định tuyến đơn giản và không muốn sử dụng thư viện bộ định tuyến đầy đủ tính năng, bạn có thể thực hiện việc này bằng cách hiển thị động một thành phần cấp trang như tiếp theo: const NotFound = { template: ‘<p>Page not found</p>’ } const Home = { template: ‘<p>home page</p>’ } const About = { template: ‘<p>about page</p>’ } const routes = { ‘/’: Home, ‘/about’: About } new Vue({ el: ‘#app’, data: { currentRoute: window.location.pathname }, computed: { ViewComponent () { return routes[this.currentRoute] || NotFound } }, render (h) { return h(this.ViewComponent) } })  

Chuyển tiếp

Vue cho phép bạn sử dụng các hiệu ứng chuyển tiếp khác nhau khi các mục được chèn, cập nhật hoặc xóa khỏi DOM.

Điều kiện tiên quyết

Trước khi tìm hiểu chuyên sâu về Vue.js, bạn phải có kiến ​​thức cơ bản về HTML, CSS và JavaScript.

Người học

Chúng tôi đã phát triển hướng dẫn Vue.js này cho cả người mới bắt đầu và chuyên nghiệp.

Vấn đề

Chúng tôi đảm bảo với bạn rằng bạn sẽ không tìm thấy bất kỳ vấn đề nào trong hướng dẫn Vue.js của chúng tôi. Tuy nhiên, nếu bạn tìm thấy bất kỳ sai lầm, bạn có thể đăng nó trong phần bình luận của chúng tôi.

Vue.js

1
Cài đặt Vue.js
2
Bắt đầu với Vue.js
3
Kết xuất khai báo Vue.js
4
Điều kiện và vòng lặp của Vue.js
5
Instance trong Vue.js
6
Template trong Vue.js
7
Component trong Vue.js
8
Thuộc tính Computed
9
Thuộc tính Watch trong Vue.js
10
Sự kiện của Vue.js
11
Liên kết dữ liệu Vue.js
12
Liên kết đầu vào biểu mẫu Vue.js
13
Transition và Animation trong Vue.js
14
Animation trong Vue.js
15
Sử dụng Transition và Animation cùng nhau
16
Chỉ thị tùy chỉnh của Vue.js
17
Định tuyến Vue.js
18
Mixins trong Vue.js
19
Các hàm Render
20
Hệ thống phản ứng Vue.js

Hãy là người đầu tiên đưa ra đánh giá

Vui lòng đăng nhập để đánh giá
Thêm vào danh sách ưa Thích
Bài giảng: 20
Cấp: Mới bắt đầu

Lưu trữ

Thời gian làm việc

Monday 9:30 am - 6.00 pm
Tuesday 9:30 am - 6.00 pm
Wednesday 9:30 am - 6.00 pm
Thursday 9:30 am - 6.00 pm
Friday 9:30 am - 5.00 pm
Saturday Closed
Sunday Closed

Tìm kiếm trên google