Cẩm nang công nghệ

I. Giới thiệu

Hôm nay mình sẽ chia sẻ một số hàm, thuộc tính hữu ích trong VueJS mà đôi khi chúng ta không để ý tới.

II. Nội dung

1. is

• Một số phần tử HTML, chẳng hạn như
  ,
  , và chỉ cho phép một số thẻ nhất định là thẻ con của nó và một số phần tử như
  1. ,
  và chỉ có thể xuất hiện bên trong một số phần tử khác. Điều này sẽ dẫn đến các vấn đề khi sử dụng các thành phần với các phần tử có các hạn chế như vậy. Ví dụ:

  <table> <blog-post-row>blog-post-row>table>

  • Thuộc tính is sinh ra để giải quyết vấn đề này. Đoạn code trên sẽ được sửa như sau

  <table> <tr is="blog-post-row">tr>table>

  • Ngoài ra, để có được dynamic component ta sử dụng thuộc tính is kết hợp với element . Ví dụ ta có component: : là một button custom component và một số các icon component như:

  // <download-icon />:<template> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <rect width="24" height="24" fill="#E3F2FD" fill-opacity="0.01" /> <path d="M7 10L12 15L17 10" stroke="#6200EA" stroke-width="2" /> svg>template>

  Để hiển thị icon bên trong button, ta làm như sau:

  • Sử dụng prop để truyền tên của icon component muốn sử dụng

  <my-button icon="download-icon"> Button my-button>

  • Ở component button, ta xử lý như sau

  <button > <template v-if="icon"> <component :is="icon" /> template> <slot />button>

  • Kết quả ta sẽ được:

  <button > <download-icon /> <slot />button>

  2. v-model
  • v-model có lẽ là một trong số thuộc tính đc sử dụng nhiều nhất, tác dụng của nó là bind dự liệu 2 chiều. Nó được dùng cho các thẻ input. Ví dụ:

  <input v-model="message"><p>Message is: {{ message }}p>

  • Khi đó value của input sẽ bằng message và khi thay đổi ô input state message của được thay đổi theo. Nó tương đương với việc thêm vào input 2 phần: 1 là v-bind, 2 là event onchange Dựa vào tính chất này, ta có thể viết lại các component input. Ví dụ:

  Vue.component('custom-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, template: `  `})

  • Để sử dụng nó ta viết như sau

  <base-checkbox v-model="lovingVue">base-checkbox>

  3. nextTick
  • Để nâng cao hiệu năng, Vue sẽ không cập nhật DOM lại ngay bất cứ một stage nào thay đổi. Vue sẽ cập nhật DOM theo một cách bất đồng bộ. Nó có một cách để giữ các bản cập nhật này được "lưu trữ" cho đến khi nó được áp dụng. Nó tạo ra một queue của các cập nhật và đẩy chúng ra khi cần thiết. Sau đó, DOM được "vá" và được cập nhật lên phiên bản mới nhất. Đoạn code sau sẽ cho bạn thấy rõ điều này.

  const example = Vue.component('example', { template: '
  {{ message }}
  ', data: function () { return { message: 'not updated' } }, mounted () { this.message = 'updated'console.log( 'outside nextTick callback:', this.$el.textContent ) // => 'not updated' this.$nextTick(() => { console.log( 'inside nextTick callback:', this.$el.textContent ) // => 'updated' }) }})new Vue({ el: '#app',render: h => h(example)})

  Kết quả là:

  "outside nextTick callback:" "not updated""inside nextTick callback:" "updated"

  Điều này dẫn đến tình trạng ở một số trường hợp, đoạn code của chúng ta sẽ không khoạt động theo ý mình muốn

  const example = Vue.component('example', { template:` 
    Click Me! 
   `, data: function () { return { isShow: false } }, methods: { onClick(event) { this.isShow = !this.isShow; if(this.isShow) { document.getelementbyid("demo').focus() //focus vào ô input } } }})new Vue({ el: '#app', render: h => h(example)})

  • Đoạn code trên thực hiện chức năng là: khi bấm vào nút 'Click me' nếu đã có ô input id = "demo" rồi thì ẩn ô input đi, nếu không hiển thị ô input có id là "demo" và focus vào ô input đó. Tuy nhiên khi chạy thì ta thấy báo lỗi là

  Error in v-on handler: 'TypeError: Cannot read properties of null (reading 'focus')'

  Để đoạn code trên có thể chạy được ta sửa như sau

  Cách 1: dùng setTimeout

  onClick(event) { this.isShow = !this.isShow; if(this.isShow) { setTimeout(() => { document.getElementById('demo').focus(); }, 0); }}

  Cách 2: dùng nextTick

  onClick(event) { this.isShow = !this.isShow; if(this.isShow) { this.$nextTick(() => { document.getElementById('demo').focus(); }) }}

  Ở cách thứ nhất, khi sử dụng setTimeout, ta có thể gặp nhiều rủi ro nếu không biết quản lý setTimeout một cách hợp lý. Vì vậy mình khuyên mọi người nên dùng cách 2

  III. Kết

  Mình vừa trình bày 3 tip trong Vue mà mình cảm thấy thú vị. Nếu có đóng góp xin vui lòng để lại dưới comment. Cảm ơn các bạn vì đã đọc. Hẹn gặp các bạn trong các bài viết tiếp theo.

  Nguồn: Vibo

  Tin liên quan

  

  Tăng tốc hiệu suất – Bứt phá sáng tạo cùng hơn 50 công cụ AI nổi bật

  Trong bối cảnh công nghệ AI đang ngày càng phát triển và được ứng dụng sâu rộng vào mọi lĩnh vực, việc tận dụng các công cụ AI một cách hợp lý sẽ góp phần...

  07/05/2025

  

  [Technology Newsletter] Giảm áp lực cho Developers cùng Platform Engineering

  Trước đây, hầu hết các developers thường ít quan tâm tới những điều không liên quan đến viết code như: quản lý cơ sở hạ tầng, tạo và cấu hình repositories, xử lý CI/CD pipelines…...

  26/08/2024

  

  [Technology Newsletter] Energy Harvesting: A case study of using RF Plasma

  Thông qua newsletter này, Wireless Solutions Center sẽ mang đến cho bạn các nội dung thú vị xoay quanh energy harvesting và RF plasma như Các xu hướng nghiên cứu energy harvesting chính hiện nay...

  23/08/2024
  Trò chuyện với TMA