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 5: Tìm hiểu Methods

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

0/5, 0 phiếu

    1. Phạm Đạt TBit-Mod

      Xin chào các bạn. Hôm nay chúng ta sẽ tìm hiểu về Methods trong VueJS nhé! Methods không còn xa lạ với nhưng bạn đã từng tìm hiểu qua lập trình hướng đối tượng phải không nào, nó là những hàm đặc biệt thể hiện cho những hành động của một đối tượng. Vậy trong VueJS cách trình bày methods như thế nào để đúng chuẩn ?

      [​IMG]

      Methods trong VueJS
      Việc phân chia từng phần trong VueJS giúp việc quản lý của nó trở nên đơn giản hơn, ví dụ với dữ liệu thì bạn sẽ lưu trữ trong key data.

      Mã (Text):
      1. var vm = new Vue({
      2.     el: '#example',
      3.     data: {
      4.         message: 'Chào mừng đến với tbit.vn',
      5.         author : "Phạm Đạt"
      6.     }
      7. });
      Nếu chúng ta muốn tạo một hàm để xử lý dữ liệu thì có thể tạo nó ngay trong data luôn.

      HTML:
      1. <div id="example">
      2.     <p>"{{ showMessage() }}"</p>
      3. </div>
      4. <script language="javascript">
      5.     var vm = new Vue({
      6.         el: '#example',
      7.         data: {
      8.             message: 'Chào mừng đến với tbit.vn',
      9.             showMessage : function(){
      10.                 return  "[" + this.message + "]";
      11.             }
      12.         }
      13.     });
      Cách làm này không thực sự hay lắm, vì vậy VueJS tạo ra một key methods để chúng ta tạo các hàm ở bên trong đó. Như ở ví dụ trên thì mình sẽ viết lại như sau.

      HTML:
      1. <div id="example">
      2.     <p>"{{ showMessage() }}"</p>
      3. </div>
      4. <script language="javascript">
      5.     var vm = new Vue({
      6.         el: '#example',
      7.         data: {
      8.             message: 'Chào mừng đến với tbit.vn'
      9.         },
      10.         methods : {
      11.             showMessage : function(){
      12.                 return  "[" + this.message + "]";
      13.             }
      14.         }
      15.     });
      Việc phân chia nơi lưu trữ data và methods giúp cho chương trình sáng hơn, quản lý code dễ hơn.

      Lưu ý: Việc xử lý của các methods sẽ không được cached, vì vậy cho dù bạn gọi một method nhiều lần thì nó cũng sẽ tính toán lại từ đầu. Ví dụ bạn có một method tính tổng hai số A và B và bạn gọi method này 2 lần thì nó sẽ thực hiện phép toán cộng hai lần, điều này khác hoàn toàn với computed.

      4. Lời kết
      Ok, bài hôm nay chỉ có vậy thôi ! Các bạn chỉ cần hiểu được nó và thực hành nhiều lên một chút là OK. Bên cạnh đó thì cũng có thể học tập bằng cách tham khảo thêm code của những người khác. Những đoạn code sử dụng VueJS của mấy pro ấy.

      * Tài liệu tham khảo:
      https://vuejs.org/
      https://www.google.com.vn/ ;)


       
      Đang tải...

Chia sẻ trang này

Đang tải...