Học Javascript – Jquery – Vue js qua từng bài tập phần 1

Avatar Hoc Javascript Jquery Vuejs Qua Tung Bai Tap 01
Hoc Javascript Jquery Vuejs Qua Tung Bai Tap 01

Đúng như tiêu đề của bài viết ” học Javascript – Jquery – Vue js qua từng bài tập ” thì mình sẽ xây dựng các bài tập từ căn bản đến thực tế. Mục đích của loạt bài hướng dẫn này là mình muốn tạo nên một loạt bài viết chất lượng. Trong một bài tập thì mình sẽ áp dụng Javascript thuần, library Jquery và Framework Vue js để thực hiện một bài tập bằng 3 cách.

Hoc Javascript Jquery Vuejs Qua Tung Bai Tap 01

Yêu cầu: 

  • Nắm được Javascript căn bản củ thể là phần JS HTML DOM, tất nhiên thì chưa nắm vững cũng không sao.
  • Khi đọc xong một bài viết bắt tay vào thực hành với bài tập đó.
  • Nếu như trong quá trình làm bài tập gặp phải một vấn đề gì đó thì bạn nên hỏi google. Nếu không tìm được câu trả lời thì mới để lại comment. Bạn nên nhớ google là một kĩ năng không thể thiếu của Dev.

Bài tập căn bản 01:  hello world !

Hello World Bai Tap Javascirpt Jquery Vuejs 01

Click vào đây để xem demo.

Mô tả bài tập

  1. Khi user nhập vào ô input nội dung tiêu đề sẽ thay đổi
  2. Nội dung của tiêu đề liên kết với ô input

# Javascript 

Mình sẽ code và giải thích chi tiết ngay phía dưới.

index.html

Chúng ta sẽ sử dụng chung file index.html này cho cả javascript, jquery và vue js. Ở trên thì mình đã thêm một số style để căn giữa.

script.js

  1. document.addEventListener('DOMContentLoaded', function() { })  bắt sự kiện document loadded. Tức là nếu như html đã loaded thì blog code bên trong sẽ được thực hiện.
  2. Truy xuất 2 element h2input
  3. Bắt sự kiện keyup lấy value của input thay thế cho nội dung của tiêu đề h2.

Vậy là mình đã thực hiện xong bài tập này bằng javascript. Tiếp theo thì chúng ta sẽ thực hiện nó bằng Jquery.

# Jquery

jquery.js

Với jquery thì mình sẽ viết bằng 2 cách

C1.

Ý tưởng giống với Javascript thuần chỉ cách viết khác đi vì chúng ta sử dụng đối tượng Jquery.

  1. $(document).ready(function() {}) ở đây cũng là bắt sự kiện document loaded
  2. Tiếp theo thì mình cũng truy xuất 2 element kia
  3. Và cuối cùng cũng là bắt sự kiện keyup lấy value của input thay thế cho nội dung của tiêu đề h2.

C2.

  1. Chỉ cần một dòng 😀 , ý tưởng thì nó không khác gì cách trên nhưng ở đây mình không bắt sự kiện document loaded và mình cũng không tạo ra 2 biến để chứa 2 element kia. Mà truy xuất trực tiếp khi sự kiện keyup xảy ra
  2. Chúng ta nên tạo ra 2 biến để truy xuất từng element vì làm như c2 thì cứ mỗi lần gõ một phím thì Jquery lại phải truy xuất lại từng element đó.

Nói chung thì Jquery sẽ đỡ khổ hơn Javascript thuần rồi :D. Và sau đây là tận cùng của sự sung sướng

# Vue js

index.html

 

Với vue thì mình phải sửa lại code html một chút, để sử dụng template của nó ta cần đặt root element  bao quanh template. Ở đây là <div id="app"> và mình có sử dụng một số directive của vue {{content}}v-model.

vue.js

Chúng ta chẳng cần phải truy xuất element hay bắt sự kiện nào cả chỉ cần thiết lập các giá trị cho đối tượng app và khai báo các thuộc tính đó trong html thì đã có thể thực hiện xong bài tập này. Vue Js nó đã làm những thao tác đó cho chúng ta rồi. Chúng ta sẽ tìm hiểu Vue js trong những bài tập tiếp theo.

Xem bài viết tiếp theo tại đây 

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.