GIỚI THIỆU
CĂN BẢN
NÂNG CAO
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

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.

test php

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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é.

vi du vuejs png

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.

Cùng chuyên mục:

VueJS 2: Conditional Rendering (v-if và v-show)

VueJS 2: Conditional Rendering (v-if và v-show)

Trong bài này chúng ta sẽ tìm hiểu một số directive có nhiệm vụ xử…

VueJS 2: Binding Class và Binding Style

VueJS 2: Binding Class và Binding Style

Trong bài này chúng ta sẽ tìm hiểu cơ chế ràng buộc dữ liệu (binding…

VueJS 2: Tìm hiểu Watchers

VueJS 2: Tìm hiểu Watchers

Trong bài này chúng ta sẽ tìm hiểu về Vue Watcher, đây là cách để…

VueJS2: Computed Properties

VueJS2: Computed Properties

Computed Properties dịch sang tiếng Việt rất khó hiểu nên mình sẽ dùng từ này…

VueJS 2: Tìm hiểu Methods

VueJS 2: Tìm hiểu Methods

Methods không còn xa lạ với nhưng bạn đã từng tìm hiểu qua lập trình…

VueJS 2: Template Syntax

VueJS 2: Template Syntax

Giống như những thư viện Javascript khác, việc xử lý template chủ yếu dựa vào…

VueJS 2: Tìm hiểu Vue Instance

VueJS 2: Tìm hiểu Vue Instance

Instance trong lập trình chính là thể hiện của một lớp. Ví dụ nếu bạn…

VueJS là gì?

VueJS là gì?

Hôm nay chúng ta lại tiếp tục tìm hiểu một thư viện Javascript mới, hay…

Top