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 2: Cài đặt VueJS và viết chương trình đầu tiên

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

0/5, 0 phiếu

    1. Phạm Đạt TBit-Mod

      Lại là VueJS đây. Trong bài hôm mình sẽ cùng các bạn tìm hiểu cách cài đặt và viết chương trình đầu tiên với VueJS. Thực ra thì việc cài đặt VueJS khá đơn giản nhưng do nó được viết từ phiên bản ES5 trở lên nên sẽ có một số lưu ý và điều kiện để cân nhắc trước khi quyết định sử dụng nó vào dự án của các bạn.

      [​IMG]

      1. Điều kiện sử dụng
      VueJS chạy tốt ở hầu hết các phiên bản browser mới nhất hiện nay, riêng với các phiên bản cũ thì nó chỉ chạy ở browser nào có hỗ trợ ES5, điều này không thực sự lo ngại bởi vì hầu hết người sử dụng internet đều nâng cấp browser của mình lên phiên bản mới nhất để sử dụng hết tính năng mà browser cung cấp.
      Tuy nhiên nếu khách hàng của bạn yêu cầu dự án phải chạy được trên các trình duyệt cũ như IE8 thì VueJS không phải là sự lựa chọn tốt nhất, hay nói cách khác là không có một JS framework nào có thể sử dụng được bởi vì đa số các framework đã nâng cấp lên version có sử dụng luôn cả ES6.

      2. Cài đặt VueJS
      Việc cài đặt VueJS không khó khăn, bạn chỉ việc download nó về và gắn vào project của bạn như một file javascript bình thường, điều này tương tự như việc nhúng jQuery vào website của bạn vậy.

      VueJS có hai phiên bản, một dành cho nhà phát triển (development), một dành cho sản phẩm đã hoàn thiện (production). Điều này tương tự như jQuery bạn sẽ có 2 file, một file đã được nén gọn và một file chưa nén gọn.
      Lưu ý: Bạn nên sử dụng phiên bản development vì nó không lược bỏ những dòng thông báo lỗi giúp việc debug của bạn dễ dàng hơn, sau khi hoàn thành dự án thì bạn hãy đổi sang phiên bản production.

      CND
      Nếu bạn không muốn rườm rà thì có thể sử dụng đường link trực tiếp từ trang chủ của nó, với cách này bạn chỉ việc copy đường link này và chèn vào mã nguồn website của bạn là xong.
      • Ưu điểm là mã nguồn của Vue sẽ luôn được cập nhật mới
      • Nhược điểm là sẽ load rất chậm ở Việt Nam nếu như bị cá mập cắn cáp.
      NPM
      Đây là cách sử dụng được khuyến khích nếu dự án của bạn lớn, bạn sẽ sử dụng CPM để quản lý mã nguồn của bên thứ ba. Bạn chỉ cần chạy lệnh sau để cài đặt.

      Mã (Text):
      1. $ npm install vue
      3. Chương trình VueJS đầu tiên
      Bây giờ mình sẽ viết một chương trình Hello World nhé.
      Bạn tạo một file index.html với nội dung như sau:

      HTML:
      1. <!DOCTYPE html>
      2.     <head>
      3.         <title>VueJS</title>
      4.         <meta charset="UTF-8">
      5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
      6.         <script language="javascript" src="https://www.tbit.vn/cnd/js/vuejs/vue_2.3.4.js"></script>
      7.         <script language="javascript">
      8.  
      9.             window.onload = function(){
      10.                 var app = new Vue({
      11.                     el: '#message',
      12.                     data: {
      13.                         name: "Tất cả các bạn",
      14.                         domain : "Tbit.vn"
      15.                     }
      16.                 });
      17.             };
      18.  
      19.         </script>
      20.     </head>
      21.     <body>
      22.         <div id="message">
      23.             Xin chào: {{name}} <br/>
      24.             Bạn đang học lập trình Vue tại: {{domain}}
      25.         </div>
      26.     </body>
      27. </html>
      * Giải thích

      Dùng từ khóa new Vue(config) để khởi tạo một ứng dụng Vue, và config là một mảng các tham số truyền vào lúc khởi tạo.
      Mỗi ứng dụng được đặt bởi ID (chính là message)
      Để định nghĩa một đoạn text thf ta dùng cú pháp {{ten}}

      4. Lời kết
      Việc giải thích chi tiết cách cài đặt và các lưu ý của VueJS được trình bày rất kỹ trên trang chủ của nó nên nếu muốn biết rõ hơn thì bạn hãy vào trang chủ của nó để đọc nhé. Bài này mình dừng tại đây, bài tiếp theo chúng ta vẫn sẽ tìm hiểu về VueJS nhé.

      * Tài liệu tham khảo: https://vuejs.org/
       
      Đang tải...

Chia sẻ trang này

Đang tải...