Những điều cần biết về liên kết dữ liệu trong Vue

Chí Vỹ

Dữ liệu liên kết trong ứng dụng web tạo link nối phiên bản & UI của ứng dụng. Dưới đây là cách dùng liên kết dữ liệu trong Vue với phép nội suy, v-bind và v-model.

Liên kết dữ liệu trong Vue

Phiên bản ứng dụng quản lý dữ liệu, hành vi và các phần tử, còn UI đại diện cho khía cạnh hình ảnh mà người dùng tương tác với nó. Dữ liệu liên kết cho phép bạn tạo những app web năng động.

Tại đây, bạn sẽ khám phá các liên kết khác nhau trong Vue, bao gồm liên kết một và hai chiều. Bạn cũng sẽ học cách triển khai các liên kết này bằng các mustache template cùng lệnh như v-bind và v-model.

Phép nội suy trong Vue

Nội suy là một trong số những kiểu liên kết dữ liệu phổ biến nhất của Vue. Nội suy cho phép bạn hiện các giá trị dữ liệu bằng các thẻ HTML với mustache template, thường được biểu thị bằng dấu ngoặc nhọn kép ({{ }}).

Với mustache template, bạn có thể tích hợp nội dung app linh động như dữ liệu và thuộc tính phương thức vào HTML. Bạn có thể đạt được điều này bằng cách đặt tên thuộc tính dữ liệu hoặc phương thức từ đối tượng lựa chọn trong Vue ở các dấu ngoặc nhọn.

Đây là một phiên bản của app Vue dùng mustache template để có phép nội suy trong Vue:

<body>
    <div id="app">
      <h1>{{ title }}</h1>
      <p>{{ text.toUpperCase() }}</p>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            title: "Welcome",
            text: "This is your world?",
          };
        },
      });
      app.mount("#app");
    </script>
 </body>

Khối code trên dùng mustache template để hiện giá trị của thuộc tính tên trong đối tượng dữ liệu của app Vue. Bạn cũng có thể hiện kết quả biểu thức JavaScript bằng phép nội suy. Ví dụ, biểu thức {{text.toUpperCase()}} trong thẻ p hiện phiên bản chữ viết hoa của giá trị text, như ảnh minh họa bên dưới:

Liên kết dữ liệu trong Vue

Khi mount một app Vue, Vue đánh giá biểu thức trong các mẫu và kết xuất giá trị ở phần thân HTML. Bất kỳ thay đổi thuộc tính dữ liệu đều cập nhật giá trị tương ứng trong UI.

Ví dụ:

<script>
            const app = Vue.createApp({
              data() {
                return {
                  title: "Hello",
                  text: "This is your world?",
                };
              },
            });
            app.mount("#app");
</script>

Khối code trên thay đổi thuộc tính title sang “Hello”. Thay đổi này sẽ tự động được thể hiện trong UI vì app Vue liên kết thuộc tính title với phần tử UI, như hình bên dưới:

Kết quả

Liên kết dữ liệu một chiều bằng lệnh v-bind

Giống phép nội suy, liên kết dữ liệu một chiều link phiên bản của ứng dụng với UI. Sự khác biệt ở đây là nó liên kết các thuộc tính như dữ liệu và phương thức cho thuộc tính HTML.

Liên kết dữ liệu một chiều hỗ trợ luồng dữ liệu một chiều, ngăn người dùng thực hiện thay đổi ảnh hưởng tới thuộc tính dữ liệu trên phiên bản của ứng dụng. Điều này hữu ích khi bạn muốn hiện dữ liệu tới người dùng app nhưng ngăn người dùng sửa đổi dữ liệu đó.

Bạn có thể đạt liên kết dữ liệu một chiều trong Vue bằng lệnh v-bind hoặc ký tự tốc ký (:):

<!-- the v-bind directive -->
<input type="text" v-bind:value="text"> 

<!-- the : shorthand character -->
<input type="text" :value="text">

Khối code hiện cách sử dụng lệnh v-bind và ký tự viết nhanh của nó để liên kết giá trị của thẻ HTML nhập vào với thuộc tính dữ liệu dạng văn bản. Đây là ví dụ của app Vue dùng lệnh v-bind để đạt được liên kết dữ liệu một chiều:

<body>
  <div id="app">
    <input type="text" v-bind:value="text">
    <p>{{ text }}</p>
  </div>

  <script>
    const app = Vue.createApp({
      data() {
        return {
          text: 'Vue is awesome!'
        }
      }
    })

    app.mount('#app')
  </script>
</body>

Một trường nhập và phần tử đoạn hiện giá trị của thuộc tính text. Thuộc tính value của trường nhập được liên kết với thuộc tính text bằng lệnh v-bind.

Khối code này tạo liên kết một chiều, nơi các thay đổi trong thuộc tính text sẽ update giá trị của trường nhập, nhưng thay đổi đã thực hiện ở trường input sẽ không update thuộc tính text trong phiên bản của app Vue.

Để hiển thị điều này, chúng ta có thể bắt đầu với giá trị ban đầu của thuộc tính text, “Vue is awesome!”.

“Vue is awesome!”

Sau khi thay đổi giá trị của trường nhập sang “Hello World!”, lưu ý rằng app Vue chưa được update. Text trong thẻ đoạn vẫn giữ nguyên:

Hello World!

Tuy nhiên, khi thay đổi giá trị của thuộc tính text sang Hello World! trong phiên bản app Vue thay cho trường nhập, trường input được update phản ánh giá trị mới:

Thay đổi thuộc tính text trong Hello World!

Cách liên kết dữ liệu này hữu ích trong trường hợp bạn muốn hiện dữ liệu tới người dùng nhưng ngăn người dùng chỉnh sửa trực tiếp nó. Dùng v-bind trong Vue.js, bạn có thể thiết lập liên kết một chiều, dễ dàng kết nối dữ liệu của ứng dụng với các phần tử UI.

Liên kết dữ liệu hai chiều bằng lệnh v-model

Liên kết dữ liệu hai chiều cho phép thay đổi sang một giá trị của phần tử UI được tự động thể hiện trong mô hình dữ liệu cơ bản và ngược lại. Hầu hết framework JavaScript front-end đều chia sẻ dữ liệu và xử lý sự kiện tại thời gian thực theo cách này.

Vue.js tạo liên kết hai chiều bằng lệnh v-model. Lệnh v-model tạo liên kết hai chiều giữa một phần tử nhập biểu mẫu và thuộc tính dữ liệu. Khi nhập vào một phần tử input, giá trị tự động được update trong thuộc tính dữ liệu. Bất kỳ thay đổi thuộc tính dữ liệu đều update phần tử input.

Đây là ví dụ của app Vue dùng lệnh v-model để đạt liên kết dữ liệu hai chiều:

<head>
  <title>Two-way data binding in Vue</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <input type="text" v-model="text">
    <p>{{ text }}</p>
  </div>

  <script>
    const app = Vue.createApp({
      data() {
        return {
          text: 'Vue is awesome!'
        }
      }
    })

    app.mount('#app')
  </script>
</body>

Khối code trên có phần tử input với lệnh v-model liên kết nó với thuộc tính dữ liệu text. Thuộc tính text ban đầu được đặt lf “Vue is awesome!”.

Trường nhập update thuộc tính text khi bạn nhập vào nó và phản ánh thay đổi trên thuộc tính text trong thẻ p. Vue.js dùng lệnh v-model và phần tử input để có liên kết dữ liệu hai chiều.

Trong khi v-bind cho phép giao tiếp một chiều từ app Vue tới UI, v-model cung cấp giao tiếp hai chiều giữa app Vue và UI. Do khả năng cho phép giao tiếp hai chiều, v-model thường được sử dụng khi làm việc với các phần tử biểu mẫu trong Vue.

Trên đây là những điều bạn cần biết về liên kết dữ liệu trong Vue. Hi vọng bài viết hữu ích với các bạn.

Thứ Sáu, 19/05/2023 10:05

5 ★ 1 👨 146

#Vue