Học Javascript – Jquery – Vue js qua từng bài tập bind list data

Avatar Hoc Javascript Jquery Vuejs Qua Tung Bai Tap 02

Tiếp tục với loạt bài viết ” học Javascript – Jquery – Vue js qua từng bài tập “.Ở bài viết này thì mình sẽ hướng dẫn các bạn thực hiện bài tập bind list data. Chúng ta sẽ đi luôn vào bài tập 

Hoc Javascript Jquery Vuejs Qua Tung Bai Tap 02

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 02:  bind list data

Bind List Data Tap 02

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

Mô tả bài tập

  1. Ví dụ mình có một chuỗi dữ liệu JSON là danh sách User gồm họ tên, ảnh đại diện , và thông tin mô tả từ server đẩy xuống. Mình được nhận yêu cầu sẽ xuất danh sách User này ra HTML

# 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. Mình có sử dụng bootstrap để giao diện dễ nhìn.

script.js

  1. Vì đây là bài tập căn bản nên mình sẽ không lấy dữ liệu từ server xuống mà tạo ra một mảng dữ liệu user list.
  2. Tiếp theo mình sẽ lặp qua mỗi phần tử của userList bằng phương thức forEach và call back function injectUserToList
  3. Trong function injectUserToList mình sẽ tạo nên một cái <li> và thêm nội dung cho nó bằng phương thức innerHTML(). Và cuối cùng là đẩy dữ liệu ra html bằng method appendChild <li> hiện tại vào ul

Kết quả là mình đã đẩy được user list kia ra html, còn một cách nữa là nối chuỗi rồi đẩy dữ liệu ra. Không cần phải làm các bước như trên.

# Jquery

  1. Ý  tưởng cũng như Javascript thuần ở trên là lặp qua từng phần tử của userList. Rồi append vào ul nhưng với Jquery thì khỏe hơn nhiều
  2. Chúng ta chỉ cần sử dụng hàm append() của đối tượng Jquery là có thể thêm được dữ liệu vào  element ul

# Vue js

index.html

  1. Như bài trước thì mình có nói là chúng ta phải thêm root element để sử dụng template của Vue. Đơn giản bằng cách đặt <div id="app"> bao quanh phần nội dung html muốn sử dụng các directive (chỉ thị) của Vue. Chú ý các directive v-forv-bind {{ }}

vue.js

  1. var app = new Vue( config) tạo ra object app
  2.  Bạn quan sát ở đây mình có khai báo 2 cái key là el="#app" và  data = { } . Chúng là các thuộc tính cơ bản của object Vue. el khai báo template, data gồm một object chứa các thuộc tính.
  3. Chúng ta chỉ cần tạo ra một key users  trong object data , khi khai báo như thế này uses đã trở thành một thuộc tính của object Vue.app
  4. Các directive sử dụng trong template:
  • v-for xuất dữ liệu mảng và object
  • v-bind: bind property của element html
  • {{}} bind content của element html

Mọi người có thể tham khảo thêm các directive khác  tại đây. Vậy là mình đã thực hiện xong bài tập bind list data. Mình sẽ thực hiện thêm thật nhiều bài tập khác, chào các bạn.

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.