1. Hãy dành vài giây Đăng nhập hoặc Đăng ký tài khoản để truy cập và sử dụng TBit hiệu quả nhất.
    Ẩn thông báo
  2. Bạn hãy like trang Facebook của TBit để nhận được tin tức công nghệ nhanh nhất từ chúng tôi.
    Ẩn thông báo

VueJS Bài 3: Tìm hiểu Vue Instance

Thảo luận trong 'JavaScript' bắt đầu bởi Phạm Đạt, 6/7/18.

0/5, 0 phiếu

    1. Phạm Đạt TBit-Mod

      Hôm nay chúng ta sẽ tìm hiểu bài 3 về VueJS. Trước khi bắt đàu bài học thì mình khuyên bạn không nên học quá nhiều, học một cách tràn lan mà không thực hành. Mỗi hôm học một ít, học chậm nhưng mà chắc. Rồi giờ thì chúng ta bắt đầu học thôi !

      [​IMG]

      Instance trong lập trình chính là thể hiện của một lớp. Ví dụ nếu bạn khai báo một lớp Xe và khi bạn tạo một đối tượng xe thì đối tượng đó chính là một thể hiện của lớp xe.

      Mã (Text):
      1. class  A{
      2. }
      3. var a = new A(); // Một instance
      4. var b = new A(); // Một instance khác
      Vậy hôm nay chúng ta sẽ tìm hiểu về Vue Instance là gì và cách thức hoạt động của nó như thế nào nhé.

      1. Vue Instance là gì?
      Chúng ta có thể coi Vue là một lớp có tên gọi là Vue, lúc này để khởi tạo một Instance thì bạn sẽ sử dụng cú pháp như sau:

      Mã (Text):
      1. var app = new Vue({
      2.     // các options
      3. });
      4.  
      Để xem một Vue Instance có những gì thì ta sử dụng lệnh console.log và kết hợp với firebug để xem kết quả

      Mã (Text):
      1. var app = new Vue({
      2.     el: '#message',
      3.     data: {
      4.         name: "Tất cả các bạn",
      5.         domain : "tbit.vn"
      6.     }
      7. });
      8.  
      9. console.log(app);
      Chạy chương trình này và nhấn F12 để bật Firebug lên thì bạn sẽ thấy kết quả như sau:

      [​IMG]

      2. Vue Constructor
      Khi khởi tạo một Instance thì bạn phải truyền một tham số vào, và tham số này là một object chứa các thuộc tính như: data, template, element (el), method và các hàm callback được định nghĩa trong lifecyle. Để rõ ràng và chi tiết hơn thì bạn hãy tham khảo bài Vue API reference.
      Ví dụ: Tạo ra 2 Instance

      HTML:
      1. <!DOCTYPE html>
      2.     <head>
      3.         <title>VueJS Hello World</title>
      4.         <meta charset="UTF-8">
      5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
      6.         <script language="javascript" src="https://tbit.vn/cnd/js/vuejs/vue_2.3.4.js"></script>
      7.         <script language="javascript">
      8.  
      9.             window.onload = function(){
      10.                 var mv1 = new Vue({
      11.                     el: '#message1',
      12.                     data: {
      13.                         message: "Chào mừng bạn đến với series học VueJS"
      14.                     }
      15.                 });
      16.  
      17.                 var mv2 = new Vue({
      18.                     el: '#message2',
      19.                     data: {
      20.                         message: "Được trình bày tại tbit.vn"
      21.                     }
      22.                 });
      23.             };
      24.          
      25.          
      26.         </script>
      27.     </head>
      28.     <body>
      29.         <div id="message1">
      30.             {{message}}
      31.         </div>
      32.      
      33.         <div id="message2">
      34.             {{message}}
      35.         </div>
      36.     </body>
      37. </html>
      38.  
      3. Property và method
      Thuộc tính (property) và phương thức (method) là hai khái niệm khá quen thuộc trong lập trình hướng đối tượng. Thuộc tính có thể hiểu là những đặc điểm của đối tượng và phương thức là hành động của đối tượng. Vậy trong Vue thì hai khái niệm này hoạt động như thế nào?
      Tất cả các thuộc tính và phương thức bạn muốn đưa vào Vue đều phải thông qua key data lúc khởi tạo, key data này ta gọi là biến được ủy nhiệm (proxies) cho Vue instance khi vừa được khởi tạo.

      Ví dụ với thuộc tính

      Mã (Text):
      1. var vm = new Vue({
      2.     data : {
      3.         domain : "tbit.vn"
      4.     }
      5. });
      6.  
      7. console.log(vm.domain); // Kết quả: tbit.vn
      8.  
      9. vm.domain = 'cnd.tbit.vn';
      10.  
      11. console.log(vm.domain); // Kết quả: cnd.tbit.vn
      Ví dụ với phương thức

      Mã (Text):
      1. var vm = new Vue({
      2.     data : {
      3.         domain : "tbit.vn",
      4.         showMessage : function(){
      5.             console.log(this.domain); // this chính là biến vm
      6.         }
      7.     }
      8. });
      9.  
      10. vm.showMessage(); // Kết quả: tbit.vn
      Lưu ý rằng chỉ có những thuộc tính nào được thêm vào lúc khởi tạo thì mới thay đổi được giá trị trong view, còn nếu bạn cố tình chỉnh sửa hoặc thêm vào sau thì view sẽ không nhận đc giá trị đó, điều này chúng ta sẽ tìm hiểu ở một bài khác. Ngoài ra bạn không được sử dụng Arrow Function trong các property và callback function bởi lúc này đối tượng this của các function đó sẽ không phải là Vue Instance nữa.

      4. Instance Lifecycle Hooks
      Mỗi một Vue instance sẽ phải thông qua nhiều bước trước khi nó được khởi tạo, ví dụ khi ban khai báo một instance mới thì instance đó sẽ phải thông qua bước như: thiết lập cài đặt dữ liệu, biên dịch template, liên kết với DOM, cập nhật giá trị của DOM khi dữ liệu thay đổi. Trong suốt quá trình đó Vue instance sẽ phải gọi ra một số lifecycle hooks. Bây giờ chắc hẳn bạn sẽ thắc mắc là lifecycle hooks là gì phải không nào?

      Lifecycle hooks là gì?
      lifecycle hooks chính là những hàm, phương thức đặc biệt xử lý cho một chức năng nào đó. Ví dụ khi Vue instance được khởi tạo thì chúng ta có hook tên là created, hook này sẽ được gọi khi instance khởi tạo xong. Nếu bạn đã từng tìm hiểu qua WordPress thì chắc chắn sẽ biết khái niệm này bởi WordPress hoạt động chủ yếu dựa vào hai cơ chế là Hooks và Action.

      Mã (Text):
      1. var vm = new Vue({
      2.     data : {
      3.         domain : "tbit.vn"
      4.     },
      5.     created : function(){
      6.         console.log("Instance khởi tạo xong. Thuộc tính domain là: " + this.domain);
      7.         // Kết quả: Instance khởi tạo xong. Thuộc tính domain là tbit.vn
      8.     }
      9. });
      Ngoài ra còn rất nhiều hooks khác như mounted, updated, destroyed. Tất cả các hooks này sẽ được gọi thông qua đối tượng this (chính là vue instance).

      5. Lifecycle Diagram
      Mình sẽ copy hình ảnh lifecycle diagram từ trang chủ của nó nhé, tạm thời thì bạn không cần hiểu ý nghĩa của bản đồ này, bạn chỉ cần tham khảo và chõ nào chưa hiểu thì cứ để đấy, sau này học xong bạn sẽ quay lại bài này để xem mô hình của nó.

      [​IMG]

      6. Lời kết
      Qua bài này đã giới thiệu với các bạn khái niệm về instance và cách thức hoạt động của Vue instance, ngoài ra trong bài cũng đề cập đến lifecycle và các hooks. Sau khi học xong bài này thì phải chắn chắn là bạn phải hiểu khái niệm và ý nghĩa của từng thành phần trên nhé.

      * Tài liệu tham khảo:
      https://vuejs.org/
      https://www.google.com.vn/ ;)
       
      Chỉnh sửa cuối: 7/7/18
      Đang tải...

Chia sẻ trang này

Đang tải...