Làm quen với Vue.js

Mở đầu với VueJS

Gọi tắt là Vue (phát âm là /vjuː/, giống như view trong tiếng Anh), Vue.js là một framework linh động dùng để xây dựng giao diện người dùng.

Khác với các framework nguyên khối, Vue được thiết kế từ đầu theo hướng cho phép và khuyến khích việc phát triển ứng dụng theo từng bước. Vue dễ học và dễ dàng tích hợp với các thư viện và dự án có sẵn

Xem thêm về các nguyên tắc cốt lõi và dự án mẫu:

1. Bắt đầu

Để làm quen với Vue, chúng ta sẽ bắt đầu với ví dụ đơn giản “Hello World”:

var myApp = new Vue({

  el: '#myApp',

  data: {

      message: 'Hello world!'

  }

})

Ví dụ trên được viết trong file Test.js. Phần “el: '#myApp'” cho biết Vue phải hiển thị ứng dụng bên trong phần tử DOM bên trang html có id là myApp. Đối tượng data trong Vue là phần để khai báo dữ liệu và biến bạn sử dụng trong trang web của mình. Trong ví dụ trên, biến message đặt trong thẻ data sẽ tham chiếu sang file HTML mà cũng có biến message.

Sau khi chạy file HTML, trên trang web sẽ hiển thị nội dung của message chính là “Hello World”

Vue quan tâm liên kết đối tượng data đến DOM, chính vì vậy dữ liệu thay đổi thì trang web cũng sẽ được cập nhật

2. Các khái niệm cơ bản.

2.1. Directives: là các thuộc tính HTML có tiền tố v-

   -  Directive điều kiện cho thẻ HTML là v-if.

VD: <p v-if=”seen”></p>

-     Directive xử lý input của người dùng: Lắng nghe sự kiện Click v-on:click=”hover”. Ta có thể viết tắt là @click=”hover”

-     Directive v-model: tạo rang buộc dữ liệu 2 chiều trên các thẻ HTML

-     Directive v-bind: giữ các giá trị trong data đã khai báo trong key data tại file JS. Ta có thể viết tắt directive v-bind bằng cách chỉ viết dấu “:” đằng trước thuộc tính muốn bind

-     Directive v-text: xuất ra text thông thường

-     Directive v-show: Ẩn hiện phần tử theo điều kiện

VD: <p v-bind:id=”1234”></p> trong đó thuộc tính id đã được khai báo trong data.

2.2. Components

   -  Hệ thống component là 1 khái niệm quan trọng trong Vue, vì nó cho phép chúng ta xây dựng app quy mô từ những phần tử nhỏ, độc lập, có thể tái sử dụng, dễ dàng quản lý và bảo trì

   -  Một component trong Vue bản chất là 1 đối tượng Vue với các tùy chọn cho trước.

VD: Vue.component(‘todo’, {

       template: ‘<li>Job1</li>’

})

Bây giờ các bạn có thể sử dụng thẻ ‘todo’ như 1 component

-     Chúng ta hoàn toàn có thể truyền dữ liệu từ bên ngoài vào cho component bằng cách sử dụng các “prop” trong Vue. Thêm key prop vào Vue.component

VD: Vue.component(‘todo’, {

       template: ‘<li>Job1</li>’,

       prop : [‘todo’]

})

(to be continued)