Có nên dùng angular với jquery
|
Vue.js là gì? Vue.js khác gì so với jQuery? Tôi có nên khoan hãy đụng đến jQuery nếu đã biết Vue.js? Có thể sử dụng Vue.js ngoài Laravel không? Nếu mới bắt đầu hoặc chỉ vừa mới học Vue.js, nhiều khả năng bạn sẽ gặp những thắc mắc tương tư hoặc bị rối về những trường hợp nên sử dụng Vue.js. Hy vọng bài viết này sẽ giải đáp thắc mắc của bạn, hiểu rõ hơn về framework đang khá nổi này, khi nào thì nên sử dụng và liệu có nên ngừng dùng jQuery vì Vue.js không. Show jQuery là gìjQuery đã xuất hiện được hơn 10 năm và được sử dụng phổ biến, từ những dự án nhỏ, vui vui đến các công ty lớn tiêu tốn hàng triệu USD mỗi tháng. jQuery (viết ít hơn, hiệu quả hơn) là 1 thư viện Javascript nhỏ, nhanh gọn, nhiều tính năng, hoạt động trên nhiều hệ điều hành và góp phần giúp quá trình viết vanilla Javascript dễ dàng hơn. jQuery hỗ trợ DOM/CSS manipulation, event handling, animation và tạo các truy vấn Ajax.  Nên dùng jQuery khi nào?jQuery có thể được sử dụng trong nhiều trường hợp. Rất nhiều thư viện và plugins yêu cầu có jQuery, nhờ đó có thể làm được nhiều thứ đơn giản như chỉnh sửa giá trị của input hoặc lấy content cảu div để tạo các slideshows/ galleries và animations đẹp, ấn tượng. Khi đã quen với việc viết code jQuery, bạn hoàn toàn có thể viết mọi thứ bằng Javascript bằng jQuery. Dưới đây là 1 số ví dụ cho thấy jQuery không khó:
$(‘#input-id’).val(); Lưu ý: Không nhất thiết là ID của element, bạn có thể sử dụng tất cả các CSS selectors quen thuộc như: tag name, class name, attribute, first-child, last-child.
$(‘#element-id’).addClass(‘some-class’);
$.get(‘http://your-site.com/api/endpoint’, function(data){ console.log(data); }); Bạn có thể dễ dàng nhận ra: so với sử dụng vanilla Javascript, thì việc manipulate DOM hoặc tạo Ajax calls sử dụng jQuery rất dễ. Chính vì vậy mà nhiều dev còn quên luôn cách viết code với vanilla Javascript. Bạn có thể tham khảo hình dưới: Cài đặt:Bạn có thể sử dụng jQuery bằng cách tham chiếu CDN như bên dưới: Hoặc có thể cài đặt bằng NPM: $ npm install jquery Vue.js là gì?Khác với jQuery, Vue.js là 1 framework MVC – được truyền cảm hứng bởi Angular. Trên thực tế, người sáng lập Evan You đã khởi tạo dự án này sau khi làm Angular cho Google. Ông quyết định trích những ưu điểm về Angular và tạo ra 1 framework nhẹ, dễ học, dễ sử dụng. Vue ra mắt vào tháng 2/2014 và được cộng đồng Laravel ủng hộ mạnh mẽ. Khi tôi viết bài này, Vue đã có 4,933,779 NPM lượt tải và 65,422 Github Stars. Nên dùng Vue.js khi nào?Vue phù hợp với các dự án nhỏ như chỉ cần thêm 1 ít reactivitity, submit form với AJAX, hiển thị cho user 1 modal, hiển thị giá trị của 1 input khi user đang gõ.. Vuejs scalable và cũng là lựa chọn tuyệt hảo cho dự án lớn. Chính vì vậy mà Vue.js được gọi là progressive framework. Bạn có thể tìm thấy 1 số code mẫu trong documentation chính thức với nhiều ngôn ngữ khác nhau.
.. Xem thêm các ví dụ tại đây. Nhờ vào các core component Router and Vuex, Vue được thiết kế gần như hoàn hảo dành cho các ứng dụng single app lớn. Chúng ta có thể giải quyết nhiều vấn đề nâng cao (Components, Filters, Router, Events, Vuex… ) của framework sau đó trên Scoth.io này. Nếu bạn thích nghiên cứu code của những người khác thì tôi đề xuất ví dụ này: HackerNews Clone. Cài đặt:Bạn có thể sử dụng Vue bằng cách tham chiếu đơn giản CDN như thế này:
Hoặc cài đặt qua NPM:
#Examples:Trong phần này, chúng ta sẽ đi qua nhiều ví dụ về cách thực hiện các tasks khó với jQuery và Vue.js: Events:
jQuery: https://jsfiddle.net/4x445r2r/ (function() {
$('#button').click(function() {
alert('Clicked!');
});
})(); Vue: https://jsfiddle.net/jwfqtutc/ $(‘#element-id’).addClass(‘some-class’);0
jQuery: https://jsfiddle.net/5zdcLdLy/ $(‘#element-id’).addClass(‘some-class’);1 $(‘#element-id’).addClass(‘some-class’);2 Vue: https://jsfiddle.net/as65e4nt/ $(‘#element-id’).addClass(‘some-class’);3 $(‘#element-id’).addClass(‘some-class’);4 Binding classes:jQuery: https://jsfiddle.net/o65nvke2/ $(‘#element-id’).addClass(‘some-class’);5 $(‘#element-id’).addClass(‘some-class’);6 Vue: https://jsfiddle.net/a203pyqf/ $(‘#element-id’).addClass(‘some-class’);7 $(‘#element-id’).addClass(‘some-class’);8 Cập nhật content của 1 element:jQuery: https://jsfiddle.net/ccLffhot $(‘#element-id’).addClass(‘some-class’);9 $.get(‘http://your-site.com/api/endpoint’, function(data){ console.log(data); });0 Vue: https://jsfiddle.net/gjLag10s/ $.get(‘http://your-site.com/api/endpoint’, function(data){ console.log(data); });1 $.get(‘http://your-site.com/api/endpoint’, function(data){ console.log(data); });2 Toggle khả năng hiển thị của 1 element:jQuery: https://jsfiddle.net/4LcL5pco/ $.get(‘http://your-site.com/api/endpoint’, function(data){ console.log(data); });3 $.get(‘http://your-site.com/api/endpoint’, function(data){ console.log(data); });4 Vue: https://jsfiddle.net/a8xoaoqy/ $.get(‘http://your-site.com/api/endpoint’, function(data){ console.log(data); });5 $.get(‘http://your-site.com/api/endpoint’, function(data){ console.log(data); });6 Xây dựng 1 select input từ 1 array:jQuery: https://jsfiddle.net/9f4pcakt/ $.get(‘http://your-site.com/api/endpoint’, function(data){ console.log(data); });7 $.get(‘http://your-site.com/api/endpoint’, function(data){ console.log(data); });8 Vue: https://jsfiddle.net/gktr062m/ $.get(‘http://your-site.com/api/endpoint’, function(data){ console.log(data); });9 0 Tạo các truy vấn Ajax:jQuery: https://jsfiddle.net/t3qef00y/ 1 2 Vue: https://jsfiddle.net/gbjthb3q/ Bạn không thể tạo các AJAX calls với chính Vue, nhưng team đã ra mắt 1 package tương ứng: GitHub – pagekit/vue-resource: The HTTP client for Vue.js 3 4 #Kết luậnSau khi đọc bài này, hy vọng bạn đã rõ về sự khác nhau giữa jQuery và Vue, ưu điểm cũng như những trường hợp nào nên sử dụng jQuery hoặc Vue. Với cá nhân thôi thì tôi vẫn dùng jQuery vì nó phù hợp với dự án tôi đang làm, trong khi đó tôi dùng Vue cho các dự án đòi hỏi sự phức tạp và reacitivity. Thêm nữa, bạn cũng nên cân nhắc dựa trên mức độ thành thạo đối với mỗi công cụ. |
