VueJS 2: Cài đặt VueJS và viết chương trình Hello World

Trong bài này 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 Hello World đầ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.

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 như bạn đã nghĩ đâu :) 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.

Download

Mỗi version của Vue sẽ có hai phiên bản, một dành cho nhà phát triển (lập trình viên)  hay còn gọi là (development), vmộ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.

Download phiên bản development Download phiên bản production

Lưu ý: Khi sử dụng trong quá trình xây dựng dự án thì bạn nên sử dụng phiên bản development (phiên bản chưa nén) bởi vì nó không lượt 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 và chèn vào mã nguồn website của bạn là xong. Với cách này thì có ưu điểm là mã nguồn của Vue sẽ luôn được cập nhật mới, tuy nhiên sẽ có 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.

$ npm install vue

3. Chương trình VueJS Hello World

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:

Hello World VueJS RUN
<!DOCTYPE html>
<html>
    <head>
        <title>VueJS Hello World</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script language="javascript" src="https://freetuts.net/cnd/js/vuejs/vue_2.3.4.js"></script>
        <script language="javascript">

            window.onload = function(){
                var app = new Vue({
                    el: '#message',
                    data: {
                        name: "Tất cả các bạn",
                        domain : "Freetuts.net"
                    }
                });
            };
            
        </script>
    </head>
    <body>
        <div id="message">
            Xin chào: {{name}} <br/>
            Bạn đang học lập trình Vue tại: {{domain}}
        </div>
    </body>
</html>

Khi chạy lên bạn sẽ thấy kết quả nội dung của trang web đã bị thay đổi. Bây giờ bạn hãy xem bức ảnh sau để dễ hình dung hơn nhé.

Dựa vào hình ảnh trên ta có kết luận như sau:

  • 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 sẽ tìm hiểu instance của VueJS.

GIẢM GIÁ CUỐI TUẦN

Nhân dịp sinh nhật Cường ngày 18/08, mình giảm giá cực mạnh các khóa học fedu đến hết tuần này, các bạn tranh thủ nhé :)

Nguồn: freetuts.net

TỰ TẠO COMBO ĐỂ TIẾT KIỆM CHI PHÍ

Nếu bạn muốn tự tạo combo theo ý mình thì hãy sử dụng chức năng dưới đây, nó cho phép bạn chọn bất kì khóa học nào và cuối cùng là nhấn vào nút tạo combo, nếu mua càng nhiều thì chi phí càng rẻ.

Lập trình Backend

Lập trình Frontend

Thiết kế - Đồ họa