One-way data binding

Ở bài hôm trước, chúng ta đã học qua về cách sử dụng data binding trong Vue.js, đó là cách thông thường để biểu diễn dữ liệu. Cũng như các Javascript framework khác như React hay Angular, Vue.js có hai kiểu data binding là one-way (một chiều) và two-way (hai chiều).

Chúng ta cùng xem qua ví dụ:

<template>
  <div>
    <h1>Hi, my name is {{ name }}</h1>
    <div>
      Number: {{ number }}
    </div>
    <button @click="number++">Increment</button>
  </div>
</template>

<script>
export default {
  name: 'SayMyName',
  data() {
    return {
      name: "Yeulaptrinh.vn",
      number: 0
    }
  }
}
</script>

Tuy rằng kết quả trên đây nhìn đơn giản chỉ như render một chuỗi kí tự ra màn hình, thật sự Vue.js đã thực hiện khá nhiều việc đằng sau hậu trường. Dữ liệu và DOM đã được liên kết với nhau, và mọi thứ giờ đây đã trở nên reactive – nghĩa là DOM sẽ tự động render lại mỗi khi dữ liệu được thay đổi.

Dữ liệu thay đổi => DOM render lại dữ liệu

Vậy chiều ngược lại, khi dữ liệu trên DOM được thay đổi (bởi user) chúng ta sẽ có kiểu binding thứ hai: two-way data bìnding

Two-way data binding

Dữ liệu thay đổi => DOM render lại dữ liệu và ngược lại

Cú pháp: sử dụng directive: v-model

Directive v-model để tạo ràng buộc dữ liệu 2 chiều lên các phần tử form input và textarea. Vue.js sẽ tự động chọn cách phù hợp để cập nhật phần tử này dựa trên kiểu của input. Có một chút ma thuật, v-model là syntax sugar trong việc cập nhật dữ liệu dựa trên các sự kiện input từ người dùng kèm theo một số trường hợp đặc biệt khác. Ta cũng xem qua ví dụ sau:

<template>
  <div>
    <input type="text" placeholder="Your name" v-model="name">
    <h1>Hi, {{ name }}! Welcome to Yeulaptrinh.vn!</h1>
  </div>
</template>

<script>
export default {
  name: 'SayMyName',
  data() {
    return {
      name: "Alice",
    }
  }
}
</script>

Với khai báo v-model dữ liệu được render lại gần như ngay lập tức, nó làm giảm sự phức tạp của việc giữ cho đầu vào của người dùng nhất quán với mô hình dữ liệu ứng dụng. Nếu được sử dụng đúng cách, nó có thể tăng tốc đáng kể quá trình phát triển của bạn.

Demo:

Tổng kết

Trong bài viết này mình đã đi vào chi tiết về hai kiểu ràng buộc dữ liệu one-way và two-way trong Vue.js. Đây là khái niệm cơ bản, nhưng là một điều không thể thiếu trong lập trình Vue.js. Hy vọng các bạn có thể nắm vững và ứng dụng nhuần nhuyễn nó trong các ứng dụng của mình.