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

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!'
  }
})

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.

Category:

Bình luận!

Xin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. *