VueJS - Giới thiệu

Vuelà một khung JavaScript để xây dựng giao diện người dùng. Phần cốt lõi của nó tập trung chủ yếu vào lớp xem và nó rất dễ hiểu. Phiên bản Vue mà chúng tôi sẽ sử dụng trong hướng dẫn này là 2.0.

Vì Vue về cơ bản được xây dựng để phát triển giao diện người dùng, chúng tôi sẽ giải quyết nhiều tệp HTML, JavaScript và CSS trong các chương sắp tới. Để hiểu chi tiết, chúng ta hãy bắt đầu với một ví dụ đơn giản.

Trong ví dụ này, chúng ta sẽ sử dụng cơ chế phát triển của vuejs.

Thí dụ

<html>
   <head>
      <title>VueJs Introduction</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "intro" style = "text-align:center;">
         <h1>{{ message }}</h1>
      </div>
      <script type = "text/javascript">
         var vue_det = new Vue({
            el: '#intro',
            data: {
               message: 'My first VueJS Task'
            }
         });
      </script>
   </body>
</html>

Đầu ra

Đây là ứng dụng đầu tiên chúng tôi tạo ra bằng VueJS. Như đã thấy trong đoạn mã trên, chúng tôi đã bao gồm vue.js ở đầu tệp .html.

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

Có một div được thêm vào phần thân in “My first VueJS Task” trong trình duyệt.

<div id = "intro" style = "text-align:center;">
   <h1>{{ message }}</h1>
</div>

Chúng tôi cũng đã thêm một thông báo trong phép nội suy, tức là {{}}. Điều này tương tác với VueJS và in dữ liệu trong trình duyệt. Để lấy giá trị của thông báo trong DOM, chúng tôi đang tạo một phiên bản vuejs như sau:

var vue_det = new Vue({
   el: '#intro',
   data: {
      message: 'My first VueJS Task'
   }
})

Trong đoạn mã trên, chúng ta đang gọi Vue instance, lấy id của phần tử DOM, tức là e1: '# intro', nó là id của div. Có dữ liệu với thông báo được gán giá trị‘My first VueJS Task’. VueJS tương tác với DOM và thay đổi giá trị trong DOM {{message}} bằng’My first VueJS Task’.

Nếu chúng tôi tình cờ thay đổi giá trị của thông báo trong bảng điều khiển, điều tương tự sẽ được phản ánh trong trình duyệt. Ví dụ -

Chi tiết bảng điều khiển

Trong giao diện điều khiển trên, chúng ta đã in đối tượng vue_det, là một thể hiện của Vue. Chúng tôi đang cập nhật tin nhắn với“VueJs is interesting” và điều tương tự cũng được thay đổi trong trình duyệt ngay lập tức như trong ảnh chụp màn hình ở trên.

Đây chỉ là một ví dụ cơ bản cho thấy sự liên kết của VueJS với DOM và cách chúng ta có thể thao tác với nó. Trong vài chương tiếp theo, chúng ta sẽ tìm hiểu về các chỉ thị, các thành phần, các vòng điều kiện, v.v.