Vuejs là gì? Tìm hiểu tổng quan về Vue.js

JavaScript là ngôn ngữ lập trình phía Front end có độ phổ biến rất lớn. Hàng loạt Framework Js được ra đời được viết từ nó. Và Vuejs cũng là trường hợp không ngoại lệ. Với cú pháp đơn giản, linh hoạt tuy mới ra đời cách đây 7 năm nhưng Vue js được đông đảo lập trình viên trên thế giới sử dụng.

Vue js là gì?

Vue js thường được gọi là Vue, phát âm là /vju/ gần giống như view. Vue.js là một JavaScript Framework tiến bộ mã nguồn mở để xây dựng giao diện người dùng (UI), Single Page Application và các ứng dụng một trang web.

Vue.js được phát hành lần đầu tiên vào tháng 2 năm 2014. Và cho tới thời điểm hiện tại đã được 7 năm tuổi.

Nó được xây dựng và phát triển bởi Evan You một kỹ sư tại Google. Vào năm 2014 dự án đã được tăng tải lên HackerNew, Echo Js.

Single Page Application là kiểu lập trình web tăng trải nghiệm người dùng. Thông thường các website khi muốn chuyển trang thì phải load lại toàn bộ. Tuy nhiên với SPA thì chỉ load lại thông tin yêu cầu mà thôi.

Tại sao nên sử dụng Vuejs?

Các Framework được ra đời với mục đích giúp cho lập trình viên tiết kiệm thời gian khi làm việc. Họ sẽ không phải viết lại hàng ngàn dòng lệnh mà thay vào đó chỉ cần dùng một vài câu lệnh để gọi thư viện có sẵn.

Với Vuejs sẽ có những ưu điểm vượt trội như:

Kích thước nhỏ

Một tệp tin zip tải xuống chỉ nặng 18 KB. Đó là một trọng lượng nhẹ, khi sử dụng sẽ không ảnh hưởng đến SEO hay UX của website.

Hiệu suất và kết xuất DOM ảo

DOM (Document Object Model) là một đại diện của các trang HTML với các kiểu, phần tử và nội dung trang dưới dạng các đối tượng. Các đối tượng được lưu trữ dưới dạng cấu trúc cây được tạo bởi trình duyệt khi tải một trang.

Khi người dùng tương tác với trang, các đối tượng sẽ thay đổi trạng thái của chúng, vì thế trình duyệt phải cập nhật thông tin và hiển thị thông tin đó trên màn hình.

Tuy nhiên, cập nhật toàn bộ DOM rất phức tạp. Nhưng khi dùng Vue.js nó sẽ sử dụng DOM ảo: Hãy xem đây là bản sao của DOM gốc để tìm ra các phần tử cần cập nhật mà không cần hiển thị toàn bộ DOM. Cách tiếp cận này giúp hiển thị trang khá nhanh chóng và cải thiện hiệu suất ứng dụng.

Hệ sinh thái công cụ vững chắc

Vuejs được hỗ trợ nhiều công cụ mạnh mẽ. Bên cạnh đó nó cũng có các công cụ gỡ lỗi trình duyệt , trình kết xuất máy chủ và trình quản lý trạng thái của riêng mình.

Tương đối dễ học

Tất cả những gì bạn cần bắt đầu để học Vuejs đó là HTML, CSS và JavaScript. Chỉ đơn giản có thế thôi.

Cài đặt Vuejs

Bạn sẽ sử dụng một trong 2 cách sau:

CDN:

<script type="text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>

Nhúng đoạn mã trên vào trong cặp thẻ <head>…</head>.

Nhúng file local:

Download tại đây

<script type="text/javascript" src = "js/vue.js"></script>

Sau đó dùng mã trên đây gọi file vào. Lưu ý: cần phải gọi đúng thư mục.

Viết chương trình đầu tiên

<html>
   <head>
      <title>Ví dụ VueJs</title>
      <script type="text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
   </head>
   <body>
      <div id ="demo" style = "text-align:center;">
         <h1>{{ message }}</h1>
      </div>
      <script type = "text/javascript">
         var demo = new Vue({
            el: '#demo',
            data: {
               message: 'This is First Program'
            }
         });
      </script>
   </body>
</html>

Nhìn vào chương trình trên bạn sẽ thấy nó có 2 phần.

Đầu tiên là render dữ liệu đến DOM

<div id="demo">
  {{ message }}
</div>

Và tiếp theo là chức năng

var demo = new Vue({
  el: '#demo',
  data: {
    message: 'Hello Vue!'
  }
})

Hiện nay có nhiều thư viện và Framework được viết bằng Javascript như Reactjs, Angularjs, Nodejs… Nhưng vue js vẫn là lựa chọn hoàn hảo dành để xây dựng trang web phía Frontend.

Với khái niệm Vuejs là gì trong bài viết này chắc hẳn đã giúp bạn hiểu rõ hơn về JavaScript Framework này rồi. Nó rất hữu ích khi bạn xây dựng một ứng dụng web mà không tốn quá nhiều thời gian và công sức.