Understanding Templates Chuyên mục Vue Behind The Scenes 2024-03-05 24 Lượt xem 11 Lượt thích 0 Bình luận

Templates ttrong Vue.js là một khía cạnh quan trọng trong việc phát triển ứng dụng Vue. Templates cung cấp cách tiếp cận để định nghĩa giao diện người dùng của ứng dụng bằng cách sử dụng cú pháp dễ đọc và dễ hiểu.

Trong Vue.js, bạn có thể sử dụng templates để mô tả cách các thành phần của ứng dụng của bạn được hiển thị và tương tác với người dùng. Templates trong Vue.js thường bao gồm các phần tử HTML thông thường kết hợp với các directive Vue.js như v-if, v-for, v-bind, v-on để tương tác với dữ liệu và logic của ứng dụng.

Bằng cách sử dụng templates, bạn có thể tạo ra các giao diện người dùng phong phú và tương tác, đồng thời giảm thiểu việc phải can thiệp trực tiếp vào DOM. Templates cũng giúp tách biệt logic và dữ liệu của ứng dụng với giao diện người dùng, giúp cho mã nguồn trở nên dễ đọc và bảo trì hơn.

Ở bài viết này mình muốn giới thiệu cho các bạn các cách sử dụng template khác nhau trong ứng dụng Vue và cách các bạn có thể chạy nhiều ứng dụng Vue song song trên các phần khác nhau của trang.

Dưới đây là một ví dụ

<body>
  <header>
    <h1>Vue Behind The Scenes</h1>
  </header>
  <section id="app">
    <h2>App 1</h2>
    <p>{{ message }}</p>
  </section>

  <section id="app2">
    <h2>App 2</h2>
    <p>{{ messageApp2 }}</p>
  </section>
</body>

const app = Vue.createApp({
  data() {
    return {
      message: 'Vue is great! App 1',
    };
  },
});

app.mount('#app');

const app2 = Vue.createApp({
  data() {
    return {
      messageApp2: 'Vue is great! App 2',
    };
  },
});

app2.mount('#app2');

Trên một trang chúng ta có thể tạo ra 2 Vue App khác nhau để sử dụng, nhưng một điều lưu ý là các biến số ở mỗi App là độc lập, và chỉ về App nó được khởi tạo mà thôi, không thể dùng sang App khác.

Có một cách khác nữa mà chúng ta có thể sử dụng template đó là thêm trực tiếp vào Vue App như sau:

  <body>
    <header>
      <h1>Vue Behind The Scenes</h1>
    </header>
   ....

    <section id="app2">

    </section>
  </body>

const app2 = Vue.createApp({
  template: `
    <h2>App 2</h2>
    <p>{{ messageApp2 }}</p>
  `,
  data() {
    return {
      messageApp2: 'Vue is great! App 2',
    };
  },
});

app2.mount('#app2');