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

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 nói đúng hơn là một Javascript Framework mới đó là VueJS. Ngay khi vừa ra đời VueJS đã được bổ sung vào danh sách các JS Framework đáng học, điều này khiến cho các lập trình viên càng có nhiều sự lựa chọn, hay nói đúng hơn là càng khó lựa chọn cho mình một Framework thích hợp. Điều này chỉ khó khăn với những bạn newbie, còn những bạn đã thành thạo một số framework khác như Angular, React thì sẽ tiếp cận rất dễ dàng.

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.

Trước tiên chúng ta tìm hiểu khái niệm VueJS là gì đã nhé.

1. VueJS là gì?

VueJS là một progressive framework được xây dựng dựa vào nền tảng của ngôn ngữ lập trình phí client Javascript, nhiệm vụ chính của VueJS là dùng để xây dựng giao diện phía người dùng (UI). Không giống với các Framework khác, VueJS chỉ tập trung vào phần giao diện người dùng (view) nên bạn hoàn toàn có thể tích hợp vào project một cách đơn giản tương tự như jQuery. Nếu bạn đã từng học qua Angular thì bạn sẽ thấy có rất nhiều mô hình được đưa ra bởi các lập trình viên có kinh nghiệm, nhưng với VueJS thì bạn hoàn toàn sử dụng tự do.

vuejs la gi jpg

Tính đến thời điểm hiện tại thì VueJS đã cho ra 4 version khác nhau và cao nhất là version 2.3.4. Các version đó là:

Bài viết này được đăng tại [free tuts .net]

  • VueJS 0.11
  • VueJS 0.12
  • VueJS 1.0
  • VueJS 2.x

Bởi vì lúc mình học VueJS là mình học version 2.0 nên mình sẽ không đi sâu vào việc phân tích sự khác nhau giữa các version nhé.

2. Điều kiện học VueJS

Để học được VueJS thì bắt buộc bạn phải có kiến thức nên tảng HTML - CSS và Javascript. Nếu ban là một người chỉ mới bắt đầu tìm hiểu về lập trình web thì việc bắt tay vào tìm hiểu một Framework là bước đi sai hướng. Ngoài ra với Javascript thì ban phải thực sự vững một chút vì nó sử dụng rất nhiều kiến thức nâng cao như Object, ES6, ... Vì vậy nếu bạn chưa biết những kiến thức đó thì hãy quay lại và đọc nhé, bạn chỉ cần đọc đủ để hiểu và trong quá trình học VueJS bạn sẽ tự trau dồi thêm.

3. Một đoạn code mẫu của VueJS 2

Đây là bài tìm hiểu VueJS là gì nên mình không hướng dẫn code, thay vào đó mình sẽ đưa ra một bài toán mẫu và được giải bằng hai cách, cach thứ nhất là sử dụng Javascript thuần và cách thứ hai là sử dụng VueJS để từ đó bạn sẽ thấy sự khác nhau giữa chúng.

Bài toán: Hãy xuất hiện một câu chào "Học VueJS tại freetuts.net" khi trang web được load xong.

Sử dụng Javascript thuần

Viết bằng Javascript thuần RUN
<!DOCTYPE html>
<html>
    <head>
        <title>Javascript Example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <script language="javascript">
            window.onload = function(){
                document.getElementById('messsage').innerHTML = "Học VueJS tại Freetuts.net";
            };
        </script>
    </head>
    <body>
        <div id="message"></div>
    </body>
</html>

Sử dụng VueJS

Đối với VueJS thì chúng ta phải import thư viện của nó vào.

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

            window.onload = function(){
                var app = new Vue({
                    el: '#message',
                    data: {
                        message: "Học VueJS tại Freetuts.net"
                    }
                });
            };

        </script>
    </head>
    <body>
        <div id="message">{{message}}</div>
    </body>
</html>

Qua ví dụ trên bạn có thấy cách sử dụng VueJS rất đơn giản phải không nào?

4. Lời kết

Bài này mình chỉ tập trung vào khái niệm VueJS là gì nên mình không giải thích các đoạn code ở trên, nếu bạn không hiểu thì đừng lo lắng nhé vì các bài tiếp theo mình sẽ giải thích rõ ràng và chi tiết hơn. Hẹn gặp lại các bạn ở bài tiếp theo.

Cùng chuyên mục:

Bài tập VueJS 2: Sử dụng Axios hoặc Fetch API trong VueJS 2

Bài tập VueJS 2: Sử dụng Axios hoặc Fetch API trong VueJS 2

Bài tập VueJS 2: Two-way binding trong VueJS 2

Bài tập VueJS 2: Two-way binding trong VueJS 2

Bài tập VueJS 2: Xử lý sự kiện trong VueJS 2

Bài tập VueJS 2: Xử lý sự kiện trong VueJS 2

Bài tập VueJS 2: Components trong VueJS 2

Bài tập VueJS 2: Components trong VueJS 2

Bài tập VueJS 2: Binding dữ liệu trong VueJS 2

Bài tập VueJS 2: Binding dữ liệu trong VueJS 2

Sử dụng directives (v-bind, v-model) để hiển thị và cập nhật dữ liệu bằng VueJS 2

Sử dụng directives (v-bind, v-model) để hiển thị và cập nhật dữ liệu bằng VueJS 2

Tạo nút và xử lý sự kiện khi nút được nhấn trong VueJS 2

Tạo nút và xử lý sự kiện khi nút được nhấn trong VueJS 2

VueJS 2 Components: Tạo và quản lý ToDo List đơn giản

VueJS 2 Components: Tạo và quản lý ToDo List đơn giản

Các quy tắc trong VueJS 2

Các quy tắc trong VueJS 2

Tạo component và binding data trong VueJS 2

Tạo component và binding data trong VueJS 2

Tìm hiểu Scoped CSS trong VueJS 2

Tìm hiểu Scoped CSS trong VueJS 2

Sử dụng forceUpdate trong VueJS 2

Sử dụng forceUpdate trong VueJS 2

Sử dụng v-for trong VueJS 2

Sử dụng v-for trong VueJS 2

10 best practices trong VueJS 2

10 best practices trong VueJS 2

Các tạo Custom Directives trong VueJS 2

Các tạo Custom Directives trong VueJS 2

Sử dụng V-for và V-if trong VueJs 2

Sử dụng V-for và V-if trong VueJs 2

Sử dụng methods trong VueJS 2

Sử dụng methods trong VueJS 2

Khác nhau giữa slot và scoped slots trong VueJS 2

Khác nhau giữa slot và scoped slots trong VueJS 2

Tìm hiểu Slots trong VueJS 2

Tìm hiểu Slots trong VueJS 2

Xử lý Custom Events trong VueJS 2

Xử lý Custom Events trong VueJS 2

Top