Ngày nay có rất nhiều khung JavaScript tồn tại, thật khó để theo dõi tất cả chúng và chắc chắn khó có ai có thể thành thạo chúng hoàn toàn. Điều đó có ý nghĩa đối với hầu hết chúng ta là chúng ta cần phải chọn lọc về những khuôn khổ phát triển mà chúng ta sẽ đầu tư thời gian vào việc học.
Trong bài viết này, chúng ta sẽ tìm hiểu nhanh về Vue.js để bạn có thể tự quyết định xem nó có phù hợp với loại dự án mà bạn có xu hướng thực hiện hay không và liệu nó có phù hợp với bạn hay không.
Vue.js là gì?
Mặc dù thông thường nó không được viết hoa nhưng “Vue” thực sự là từ viết tắt của Môi trường hiểu biết trực quan. Mục đích chính của nó là giúp phát triển ứng dụng web dễ dàng hơn bằng cách giảm độ phức tạp của mã. Nó có nhiều điểm chung với React.js, nhưng phiên bản hiện tại của Vue hiển thị nhanh hơn React và có vẻ hiệu quả hơn.
Học Vue có khó không?
Nếu bạn đã là một lập trình viên có kinh nghiệm, bạn sẽ không gặp nhiều khó khăn khi bắt đầu với Vue, nhưng sẽ không đúng nếu mô tả nó là ngôn ngữ dành cho người mới bắt đầu. Bạn cần có một số kinh nghiệm với HTML, CSS và JavaScript để xây dựng mọi thứ thiết thực với nó.
Quá trình học tập với Vue ít dốc hơn một chút so với React và ít dốc hơn rất nhiều so với Angular. Vì vậy, điều có thể nói chính xác là Vue tương đối dễ học so với các framework phát triển phổ biến khác.
Vue giúp đạt được mục tiêu như thế nào?
Nó thay đổi một chút tùy thuộc vào mục tiêu thực sự của bạn là gì, nhưng nói chung, bạn liên kết các khối mã với các div HTML. Phương pháp này giúp việc giới thiệu nội dung tương tác và động dễ dàng hơn so với HTML, CSS và JavaScript thông thường.
Mặt khác, bạn thực sự không thể làm được nhiều việc hơn trong Vue bằng cách sử dụng những cách thông thường hơn. Sử dụng Vue chỉ đơn giản là giúp bạn dễ dàng hơn trong giai đoạn phát triển, nhưng nó không ảnh hưởng nhiều đến kết quả cuối cùng, ngoài tác động nhỏ đến hiệu suất do tải mã khung.
Một ưu điểm khác của Vue là nó cung cấp tính mô-đun, nghĩa là bạn có thể sử dụng lại các thành phần bạn phát triển trong nhiều dự án.
Vue có thủ thuật hay ho nào không?
Chắc chắn là có, và điều tuyệt vời nhất trong số này là các hiệu ứng chuyển tiếp tích hợp sẵn, cho phép bạn kiểm soát những gì sẽ khácwise là các cấu trúc CSS và JavaScript sử dụng nhiều mã chỉ bằng một hoặc hai dòng mã. Điều này giúp bạn tiết kiệm thời gian và công sức khi tạo ứng dụng của mình.
Một tính năng hữu ích khác là hiển thị gốc cho các loại thiết bị cụ thể như Android và iOS, do đó bạn có thể tinh chỉnh ứng dụng của mình cho các thiết bị đang chạy mà không cần phải làm gì thêm.
Bắt đầu
Như đã nêu trước đó, Vue rất dễ học nhưng nó không phải là ngôn ngữ dành cho người mới bắt đầu. Bạn vẫn cần phải biết cách di chuyển bên trong khối mã.
Vấn đề là giống như hầu hết các framework, tài liệu rất lười biếng và chủ yếu dành để thuyết phục bạn sử dụng nó. Tài liệu ít chú ý hơn đến việc giải thích cách mọi thứ hoạt động hoặc lý do tại sao bạn làm mọi việc theo một cách nhất định. Hầu như mọi ví dụ khung chính thức từng được tạo ra đều không có ý nghĩa quan trọng trongformation mà bạn phải lục lọi hàng giờ mới khám phá được. Đó cũng là một lỗ hổng được chia sẻ trong tài liệu và ví dụ của Vue.
Để dễ hiểu hơn những gì bạn thực sự cần làm để tạo lại dự án này, đây là các bước bắt buộc:
1. Thêm tập lệnh tham chiếu vue.js
Để tối ưu hóa tốc độ, tốt nhất nên đưa phần này vào sau tất cả nội dung trang của bạn, nhưng ngay trước thẻ nội dung đóng trong nguồn HTML. Bạn cũng có thể tải các tài nguyên trang khác trong phần này và thứ tự ưu tiên tải sẽ xác định thứ tự bạn nên chèn từng tài nguyên.
Đây là một ví dụ về việc đưa vue.js từ CDN:
Và đây là một ví dụ về việc đưa vue.js từ một thư mục trên máy chủ của riêng bạn:
Nếu không có tham chiếu đến vue.js này thì không có gì liên quan đến Vue có thể xảy ra.
2. Thêm các thành phần Vue vào phần nội dung HTML của bạn
Đó là những gì đang xảy ra với mã này:
Hiện tại, nó không có nhiều ý nghĩa, nhưng phần Vue là phần tử “lưới demo” trống, cộng với việc bổ sung “v-directive” vào đầu vào truy vấn (trong trường hợp này là “v-model ”, được sử dụng để liên kết mã Vue để tạo thành đầu vào).
3. Nếu dự án yêu cầu mẫu thành phần, hãy thêm mẫu này vào phần nội dung HTML
Đoạn mã này không bình thường vì nó trông giống như HTML thông thường bên trong thẻ script, điều này sẽ gây nhầm lẫn cho hầu hết các phần mềm chỉnh sửa HTML (lưu ý rằng màu chỉ báo sai ở một số chỗ).
4. Thêm phiên bản Vue
Đây sẽ là một trong những thứ cuối cùng xuất hiện trên trang vì nó đang thực hiện tác vụ hiển thị động. Điều này mang lại một số lợi ích tối ưu hóa so với việc thêm nó sớm hơn trong trang.
- Dòng 46 chỉ định rằng trình duyệt nên tìm kiếm một thành phần trên trang có tên là “demo-grid” và dòng 47 chỉ định rằng “#grid-template” nên được sử dụng làm mẫu cho thành phần đó (đây là mã mẫu được thêm ở bước 3 từ dòng 9 đến dòng 30).
- Một khối từ dòng 48 đến dòng 52 xác định các thuộc tính của thành phần.
- Các dòng từ 53 đến 62 xác định hàm sắp xếp dữ liệu trong bảng.
- Các dòng từ 63 đến 85 xác định chức năng lọc dữ liệu (từ kết quả trong truy vấn tìm kiếm).
- Các dòng từ 86 đến 90 xác định hàm viết hoa các từ trong tập dữ liệu.
- Các dòng 91 đến 97 xác định phương pháp sắp xếp dữ liệu.
5. Thêm mã khởi chạy vào trước thẻ script đóng
Nếu bạn đã hoàn thành các bước từ 1 đến 4 và mở tệp trong trình duyệt, tất cả những gì bạn sẽ thấy là hộp tìm kiếm và không có gì khác. Đó là bởi vì mọi thứ cần thiết để xây dựng bảng đều đã được xác định nhưng chưa được tạo. Vì vậy, ở bước 5, chúng tôi thêm mã để tạo bảng đã được xác định bởi tất cả các bước trước đó.
- Dòng 100 tạo một đối tượng Vue mới.
- Dòng 101 chỉ định phần tử nào được liên kết với hành động.
- Các dòng từ 102 đến 111 cung cấp dữ liệu đối tượng sẽ được liên kết với phần tử.
Kiểm tra
Sau khi xác định và tạo đối tượng cần thiết, bây giờ bạn đã sẵn sàng để kiểm tra kết quả. Hãy sẵn sàng để bị choáng ngợp vì đây là những gì bạn sẽ thấy trên trình duyệt:
Chuyện gì đang xảy ra vậy? Tại sao nó lại nhàm chán như vậy? Đó là bởi vì không có kiểu dáng được áp dụng. Nếu chúng ta sử dụng kiểu dáng mặc định từ ví dụ JSFiddle, bảng sẽ trông như thế này:
Nhập bất cứ thứ gì vào hộp tìm kiếm (không phân biệt chữ hoa chữ thường) sẽ lọc kết quả tương ứng:
Nhấp vào tiêu đề cột sẽ cho phép bạn thay đổi thứ tự hiển thị. Ví dụ: nhấp vào tiêu đề cột “Power” sẽ thay đổi kết quả được hiển thị theo thứ tự mức năng lượng.
Cải thiện và thích ứng
Một vấn đề khác với các ví dụ khung là chúng thường không bao gồm nhiềuformation để giúp những người chưa quen với cơ sở mã tìm ra cách áp dụng những gì họ thấy trong ví dụ vào lĩnh vực này. Vue thực hiện công việc tuyệt vời so với Bootstrap (nổi tiếng là kémformative), nhưng vẫn để lại rất nhiều câu hỏi chưa được trả lời.
Dưới đây là một số thay đổi mà chúng tôi có thể thực hiện đối với ứng dụng này để thay đổi giao diện và chức năng của ứng dụng:
- Tạo kiểu cho bảng dưới dạng Bootstrap stripebảng d
- Thay đổi số lượng cột
- Thay đổi dữ liệu thành một cái gì đó hoàn toàn khác
1. Thêm Bootstrap
2. Gói phần tử vào bảng Bootstrap
3. Điều chỉnh phần tử gốc để sử dụng mô hình bố cục Bootstrap
4. Tạo kiểu lại mũi tên
5. Sửa đổi dữ liệu
6. Kiểm tra
- Chưa lọc và chưa sắp xếp
- Sắp xếp theo Chỉ thị (tăng dần)
- Sắp xếp theo Sử dụng cho (tăng dần)
- Lọc theo “có điều kiện”
- Lọc “có điều kiện” & sắp xếp theo Chỉ thị (tăng dần)
Lời cuối
Hy vọng rằng điều hiển nhiên từ những ví dụ này là chúng tôi đã xây dựng hai ứng dụng có giao diện và nội dung rất khác nhau từ một đoạn mã chung. Với Vue, bạn có thể dễ dàng sử dụng lại mã của mình trên nhiều dự án và có thể tiết kiệm đáng kể thời gian.
hình ảnh tiêu đề lịch sự của Aleksandar Savic
Nhận xét Responses 0