VueJS – Giới thiệu

Chúng ta sẽ tạo ứng dụng đầu tiên sử dụng VueJs bằng code bên dưới.

Ứng dụng đầu tiên

<html>
   <head>
      <title>VueJs Introduction</title>
      <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/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>

Kết quả

Đầu tiên chúng ta nhúng file VueJS vào head tại dòng

<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

Thẻ div trong body dùng để in ra dòng “My first VueJS Task” ra trình duyệt.

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

message trong cặp thẻ {{ message }} sẽ liên kết với VueJS, lấy giá trị và hiển thị ra trình duyệt, vì thế chúng ta cần tạo 1 instance của VueJS.

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

Như vậy khi tạo Vue instance, sẽ lấy ID của DOM (ID #intro của DOM DIV) và gán dữ liệu “My first VueJS Task” cho nó. VueJS tương tác với DOM và thay đổi giá trị của DOM.

Nếu chúng ta thay đổi giá trị message trong console, thì kết quả trên trình duyệt cũng thay đổi theo.

Như vậy giữa VueJS sẽ tương tác với DOM để thay đổi giá trị của DOM.