Đối tượng Vue

Tạo một đối tượng Vue

Một số tài liệu kĩ thuật ở Nước Ta dịch “ instance ” là “ biểu lộ. ” Chúng tôi cho rằng cách dịch này nghe rất lạ tai với người Việt, nên sẽ dịch “ instance ” là “ đối tượng người tiêu dùng ” và giữ nguyên “ object ” là “ object ” như trong bản tiếng Anh .

Một ứng dụng Vue luôn được bắt đầu bằng cách khởi tạo một đối tượng Vue (Vue instance) sử dụng hàm Vue:

var vm = new Vue({
Bạn đang đọc: Đối tượng Vue — Vue.js 


} )

Thiết kế của Vue chịu ảnh hưởng – mặt dù không liên kết chặt chẽ – từ pattern MVVM. Vì thế trong bản hướng dẫn này, chúng tôi quy ước sử dụng tên biến vm (viết tắt của ViewModel) cho một đối tượng Vue.

Khi khởi tạo một đối tượng Vue, bạn truyền vào một object options với các tùy chọn. Phần lớn bản hướng dẫn này sẽ mô tả cách sử dụng các tùy chọn đó để tạo ra behavior (hành vi) mong muốn. Bạn cũng có thể tham khảo danh sách đầy đủ các tùy chọn ở trang API.

Một ứng dụng Vue bao gồm một đối tượng Vue gốc (root Vue instance) được tạo với lệnh new Vue. Ứng dụng này cũng thường được sắp xếp thành một cây gồm các component lồng nhau và tái sử dụng được. Ví dụ, cây component của một ứng dụng todo có thể trông như thế này:

Root Instance
└ ─ TodoList
├ ─ TodoItem
│ ├ ─ DeleteTodoButton
│ └ ─ EditTodoButton
└ ─ TodoListFooter
├ ─ ClearTodosButton
└ ─ TodoListStatistics

Chúng ta sẽ nói chi tiết về hệ thống component sau. Hiện tại, bạn chỉ cần biết rằng một component Vue cũng là một đối tượng Vue và do đó cũng nhận cùng một object options (trừ một số tùy chọn chỉ dành riêng cho root).

Dữ liệu và phương thức

Khi một đối tượng Vue được khởi tạo, tất cả các thuộc tính (property) được tìm thấy trong object data sẽ được thêm vào reactivity system (hiểu nôm na là “hệ thống phản ứng”) của Vue. Điều này có nghĩa là view sẽ “react” (phản ứng) khi giá trị của các thuộc tính này thay đổi, và tự cập nhật tương ứng với các giá trị mới.

var data = { a: 1 }



var vm = new Vue({

data : data
} )



vm. a = = data. a



vm.a = 2

data. a


data.a = 3

vm. a

Khi dữ liệu thay đổi, view sẽ render lại. Cũng nên lưu ý rằng một thuộc tính trong object data chỉ trở nên reactive nếu nó đã tồn tại khi chúng ta khởi tạo đối tượng Vue. Có nghĩa là nếu bạn thêm vào một thuộc tính mới như sau:

vm.b = ' Aloha '

thì những thay đổi với b sẽ không kích hoạt thay đổi trên view. Vì thế, nếu bạn biết là sau này mình sẽ cần một thuộc tính nào đó nhưng khi khởi tạo Vue thì thuộc tính này là rỗng hoặc chưa tồn tại, bạn cần gán cho nó một giá trị ban đầu, ví dụ như thế này:

data : {
  newTodoText: ' ',

  visitCount: 0,

  hideCompletedTodos: false,

todos : [ ] ,
  error: null

}

Ngoại lệ duy nhất ở đây là việc sử dụng Object.freeze(). Object.freeze() ngăn không cho những thuộc tính sẵn có bị chỉnh sửa, cũng có nghĩa là hệ thống reactivity không thể theo dõi các thay đổi xảy ra.

var obj = {

  foo: ' bar '

}

Object.freeze(obj)


new
Xem thêm: Tải iMindmap 11 mới nhất 2021-Hướng dẫn cài đặt iMindmap 11 chi tiết. 
 Vue({

  el: ' # app ',

data : obj
} )

  
{{ foo }}< p class = " name " p>