Bạn đang mới bước chân vào làng IT và chưa rõ Vue.js là gì? Đang loay hoay với việc cài đặt và sử dụng Vue.js? Hay đang lùng sục tài liệu uy tín về Vue.js mà chưa tìm được? Chill thôi, để mình giải đáp hết mọi thắc mắc của bạn về Vue.js ngay bây giờ nhé!
Vue.js là gì vậy trời?
Nếu bạn vẫn còn "newbie" với lập trình frontend thì đừng vội vàng quá nhé, hãy trang bị cho mình nền tảng vững chắc trước đã. Nếu kinh nghiệm với các framework frontend như React.js, Angular,... của bạn còn ít ỏi thì đừng lo, vì đây chính là điểm mạnh để bắt đầu với Vue.js đấy!
Định nghĩa Vue.js là gì?
Vue.js (hay gọi tắt là Vue, phát âm là /vjuː/, giống như từ "view" trong tiếng Anh ý) là một framework siêu linh hoạt được sử dụng phổ biến để xây dựng giao diện người dùng. Khác với các framework "nguyên khối" khác, Vue được thiết kế theo hướng cho phép và khuyến khích phát triển ứng dụng từng bước một, từ dễ đến khó một cách dễ dàng hơn.
Khi phát triển lớp giao diện (view layer), bạn chỉ cần xài thư viện lõi của Vue là đủ. Ngoài ra, nếu kết hợp với các kỹ thuật hiện đại thì Vue cũng có thể đáp ứng được mọi nhu cầu xây dựng ứng dụng single-page với độ phức tạp cao hơn nữa đấy!
Lịch sử ra đời
Vue được tạo ra bởi Evan You khi anh đang làm kỹ sư tại Google. Khi đang sử dụng Angular cho một số dự án, Evan đã có phát biểu: "Điều gì sẽ xảy ra nếu trích một phần mà mình thích về Angular rồi xây dựng thêm một cái gì đó nhẹ nhàng hơn mà không cần phải chú ý đến những khái niệm bổ sung?".
Đây chính là bước đệm giúp Vue có mặt như ngày hôm nay. Vue được ra mắt vào đầu năm 2014 và dự án này đã được đăng tải lên HackerNews, Echo JS ngay trong ngày đầu tiên.
Lý do nên sử dụng Vue.js?
Hiện nay, Vue đang giữ số stars cao nhất trên GitHub với hơn 160k stars; trong khi đó framework frontend đứng sau lần lượt là React (>146k) và Angular (>59.2k). Dưới đây là một số lý do bạn nên chọn Vue.js ngay:
No build step required: Dùng Vue thì bạn không cần trải qua quá nhiều bước build mà có thể đi thẳng vào vấn đề. Vue không cần build tool quá phức tạp, bạn chỉ cần khai báo một script là có thể phát triển ứng dụng rồi!
Vue có thể tạo cấu trúc project nhanh chóng hơn nhờ vào command line interface.
Tài liệu về Vue ngày càng đa dạng, rõ ràng nên bạn có thể dễ dàng trở thành pro.
Vue sở hữu hệ sinh thái vững chắc, cung cấp nhiều add-ons hữu ích để xây dựng ứng dụng frontend như: vue-router, vuex, vue-test-utils, vue-dev-tools, vue-cli,...
Core Vue có tính năng tối thiểu, tập trung vào việc render giao diện cho người dùng và các tương tác. Điều này giúp loại bỏ các tính năng không cần thiết, đảm bảo framework nhỏ gọn và mềm dẻo hơn.
Cách cài đặt Vue.js
Dưới đây là một số cách cài đặt Vue.js mà bạn có thể tham khảo:
Cách 1: Sử dụng CDN (Content Delivery Network)
Đây là phương pháp nhanh gọn nhất để cài đặt Vue. Bạn chỉ cần 1 đường link rồi click vào phiên bản mới và ổn định nhất của Vue.js là xong. Các đường link này có nhiều trên mạng, hãy chọn địa chỉ uy tín nhé!
Cách 2: NPM
Nếu muốn xây dựng một ứng dụng lớn với Vue thì lựa chọn NPM là hợp lý nhất. NPM hoạt động rất tốt với các module bundler như Webpack hoặc Browserify để cung cấp các công cụ hỗ trợ viết Single File Component. Bạn có thể sử dụng câu lệnh "npm install vue" để cài đặt Vue nhé.
Cách 3: CLI
Hiện nay, Vue.js đang cung cấp một CLI có khả năng khởi tạo nhanh chóng các ứng dụng single-page. Trong CLI đã có sẵn những cài đặt phong phú để đảm bảo quy trình front-end hiện đại nhất.
Chỉ mất vài phút là bạn có thể bắt đầu xây dựng ứng dụng với những tính năng như: hot-reload, tối ưu code khi save và các bản build sẵn sàng để deploy lên production.
Bạn chỉ cần thực hiện như sau:
• Cài đặt vue-cli: npm install –global vue-cli
• Tạo mới dự án với template webpack: vue init webpack my-project
• Tiếp tục cài đặt thêm các thư viện liên quan rồi chạy thử.
Một số khái niệm cần nắm vững về Vue.js
Dưới đây là những khái niệm cơ bản nhất liên quan đến Vue mà bạn cần nắm rõ:
ViewModel (MVVM patterns)
Hầu hết các Vue instance đều được tạo ra bằng cách gọi new Vue với các tùy chọn chứa các yếu tố: template, callbacks, data, methods và event. Nói đơn giản hơn, bạn có thể xem Vue như một trung gian nằm giữa data và view.
Vue Instance
Trước khi xây dựng ứng dụng Vue.js đầu tiên, mỗi ứng dụng Vue có phiên bản gốc gọi là Vue Instance và hoạt động theo mô hình Model-View-ViewModel.
Data binding trong Vue.js
Thông thường có hai cách bind data trong Vue là one-way data binding và two-way data binding:
• One-way data binding: Liên kết trực tiếp data từ code JavaScript với DOM. Hầu hết các props bên trong không có khả năng làm thay đổi cấp cha.
• Two-way data binding: Bind data từ code JavaScript để view và ngược lại, thay đổi data ở một bên sẽ làm thay đổi global. Vue cung cấp v-model cho mục đích này.
Directives
Directives là một trong những tính năng mạnh mẽ của Vue và chúng là các expressions binding với v-attribute. Các directive được cung cấp dưới dạng mặc định (v-model và v-show). Vue cho phép bạn đăng ký các directive tùy biến riêng.
Lưu ý với phiên bản Vue 2.0, cách tốt nhất để sử dụng lại và trừu tượng code là dùng component. Tuy nhiên, khi cần truy xuất cấp thấp đến các phần tử của trang web thì directive tùy biến sẽ trở nên hữu ích hơn rất nhiều.
Ngoài ra, Vue Instance, Data binding và Directives còn được đánh giá là ba nguyên tắc cơ bản của Vue.js. Để hiểu rõ hơn về các thành phần, đặc tính khác liên quan đến Vue thì bạn nên tham khảo thêm các tài liệu trên internet hoặc hỏi các anh chị đi trước nhé!
Chắc chắn rằng hiện nay Vue.js đã không còn xa lạ với nhiều lập trình viên. Nó là một Progressive framework có kích thước nhỏ nhẹ, kết hợp sử dụng Virtual DOM và chỉ render lại những thành phần có sự thay đổi. Vue còn có cú pháp template rõ ràng và đơn giản nên người dùng có thể dễ dàng tiếp cận. Một điểm cộng nữa là hệ thống component cho phép bạn tái sử dụng ở những template khác nhau.
Nguồn: tinhte.vn
Vue.js là gì vậy trời?
Nếu bạn vẫn còn "newbie" với lập trình frontend thì đừng vội vàng quá nhé, hãy trang bị cho mình nền tảng vững chắc trước đã. Nếu kinh nghiệm với các framework frontend như React.js, Angular,... của bạn còn ít ỏi thì đừng lo, vì đây chính là điểm mạnh để bắt đầu với Vue.js đấy!
Định nghĩa Vue.js là gì?
Vue.js (hay gọi tắt là Vue, phát âm là /vjuː/, giống như từ "view" trong tiếng Anh ý) là một framework siêu linh hoạt được sử dụng phổ biến để xây dựng giao diện người dùng. Khác với các framework "nguyên khối" khác, Vue được thiết kế theo hướng cho phép và khuyến khích phát triển ứng dụng từng bước một, từ dễ đến khó một cách dễ dàng hơn.
Khi phát triển lớp giao diện (view layer), bạn chỉ cần xài thư viện lõi của Vue là đủ. Ngoài ra, nếu kết hợp với các kỹ thuật hiện đại thì Vue cũng có thể đáp ứng được mọi nhu cầu xây dựng ứng dụng single-page với độ phức tạp cao hơn nữa đấy!
Lịch sử ra đời
Vue được tạo ra bởi Evan You khi anh đang làm kỹ sư tại Google. Khi đang sử dụng Angular cho một số dự án, Evan đã có phát biểu: "Điều gì sẽ xảy ra nếu trích một phần mà mình thích về Angular rồi xây dựng thêm một cái gì đó nhẹ nhàng hơn mà không cần phải chú ý đến những khái niệm bổ sung?".
Đây chính là bước đệm giúp Vue có mặt như ngày hôm nay. Vue được ra mắt vào đầu năm 2014 và dự án này đã được đăng tải lên HackerNews, Echo JS ngay trong ngày đầu tiên.
Lý do nên sử dụng Vue.js?
Hiện nay, Vue đang giữ số stars cao nhất trên GitHub với hơn 160k stars; trong khi đó framework frontend đứng sau lần lượt là React (>146k) và Angular (>59.2k). Dưới đây là một số lý do bạn nên chọn Vue.js ngay:
No build step required: Dùng Vue thì bạn không cần trải qua quá nhiều bước build mà có thể đi thẳng vào vấn đề. Vue không cần build tool quá phức tạp, bạn chỉ cần khai báo một script là có thể phát triển ứng dụng rồi!
Vue có thể tạo cấu trúc project nhanh chóng hơn nhờ vào command line interface.Tài liệu về Vue ngày càng đa dạng, rõ ràng nên bạn có thể dễ dàng trở thành pro.
Vue sở hữu hệ sinh thái vững chắc, cung cấp nhiều add-ons hữu ích để xây dựng ứng dụng frontend như: vue-router, vuex, vue-test-utils, vue-dev-tools, vue-cli,...
Core Vue có tính năng tối thiểu, tập trung vào việc render giao diện cho người dùng và các tương tác. Điều này giúp loại bỏ các tính năng không cần thiết, đảm bảo framework nhỏ gọn và mềm dẻo hơn.
Cách cài đặt Vue.js
Dưới đây là một số cách cài đặt Vue.js mà bạn có thể tham khảo:
Cách 1: Sử dụng CDN (Content Delivery Network)
Đây là phương pháp nhanh gọn nhất để cài đặt Vue. Bạn chỉ cần 1 đường link rồi click vào phiên bản mới và ổn định nhất của Vue.js là xong. Các đường link này có nhiều trên mạng, hãy chọn địa chỉ uy tín nhé!
Cách 2: NPM
Nếu muốn xây dựng một ứng dụng lớn với Vue thì lựa chọn NPM là hợp lý nhất. NPM hoạt động rất tốt với các module bundler như Webpack hoặc Browserify để cung cấp các công cụ hỗ trợ viết Single File Component. Bạn có thể sử dụng câu lệnh "npm install vue" để cài đặt Vue nhé.
Cách 3: CLI
Hiện nay, Vue.js đang cung cấp một CLI có khả năng khởi tạo nhanh chóng các ứng dụng single-page. Trong CLI đã có sẵn những cài đặt phong phú để đảm bảo quy trình front-end hiện đại nhất.
Chỉ mất vài phút là bạn có thể bắt đầu xây dựng ứng dụng với những tính năng như: hot-reload, tối ưu code khi save và các bản build sẵn sàng để deploy lên production.
Bạn chỉ cần thực hiện như sau:
• Cài đặt vue-cli: npm install –global vue-cli
• Tạo mới dự án với template webpack: vue init webpack my-project
• Tiếp tục cài đặt thêm các thư viện liên quan rồi chạy thử.
Một số khái niệm cần nắm vững về Vue.js
Dưới đây là những khái niệm cơ bản nhất liên quan đến Vue mà bạn cần nắm rõ:
ViewModel (MVVM patterns)
Hầu hết các Vue instance đều được tạo ra bằng cách gọi new Vue với các tùy chọn chứa các yếu tố: template, callbacks, data, methods và event. Nói đơn giản hơn, bạn có thể xem Vue như một trung gian nằm giữa data và view.
Vue Instance
Trước khi xây dựng ứng dụng Vue.js đầu tiên, mỗi ứng dụng Vue có phiên bản gốc gọi là Vue Instance và hoạt động theo mô hình Model-View-ViewModel.
Data binding trong Vue.js
Thông thường có hai cách bind data trong Vue là one-way data binding và two-way data binding:
• One-way data binding: Liên kết trực tiếp data từ code JavaScript với DOM. Hầu hết các props bên trong không có khả năng làm thay đổi cấp cha.
• Two-way data binding: Bind data từ code JavaScript để view và ngược lại, thay đổi data ở một bên sẽ làm thay đổi global. Vue cung cấp v-model cho mục đích này.
Directives
Directives là một trong những tính năng mạnh mẽ của Vue và chúng là các expressions binding với v-attribute. Các directive được cung cấp dưới dạng mặc định (v-model và v-show). Vue cho phép bạn đăng ký các directive tùy biến riêng.
Lưu ý với phiên bản Vue 2.0, cách tốt nhất để sử dụng lại và trừu tượng code là dùng component. Tuy nhiên, khi cần truy xuất cấp thấp đến các phần tử của trang web thì directive tùy biến sẽ trở nên hữu ích hơn rất nhiều.
Ngoài ra, Vue Instance, Data binding và Directives còn được đánh giá là ba nguyên tắc cơ bản của Vue.js. Để hiểu rõ hơn về các thành phần, đặc tính khác liên quan đến Vue thì bạn nên tham khảo thêm các tài liệu trên internet hoặc hỏi các anh chị đi trước nhé!
Chắc chắn rằng hiện nay Vue.js đã không còn xa lạ với nhiều lập trình viên. Nó là một Progressive framework có kích thước nhỏ nhẹ, kết hợp sử dụng Virtual DOM và chỉ render lại những thành phần có sự thay đổi. Vue còn có cú pháp template rõ ràng và đơn giản nên người dùng có thể dễ dàng tiếp cận. Một điểm cộng nữa là hệ thống component cho phép bạn tái sử dụng ở những template khác nhau.
Nguồn: tinhte.vn