Skip to content

Tag: vue 3

Vue Router – từ Vue 2 to Vue 3

Đã từng sử dụng Vue 2 và muốn chuyển sang Vue 3 nhưng không biết có ~ update gì ?

Đừng lo ! đã có chúng tôi :))))

Lưu ý rằng : bài viết này không cover hoàn toàn 100% những thay đổi của Vue 3. Bài sẽ nêu những thay đổi chính và cần được nắm rõ . . . cỡ 79.9% nhé

Xem full những thay đổi từ Vue 2 -> Vue 3

VueCore – Composition API : computed, watch & watchEffect

<template>
  <h1>{{ finalContent }}</h1>
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    const content = ref("Trung Thinh");

    const finalContent = "Tên tôi là : " + content.value;
    // change content 
    content.value = "Not Trung Thinh"
    return {
      finalContent
    }
  }
}
</script>

Ở trên tôi đã thay đổi content.value = ‘Not Trung Thinh’

Tại sao kết quả lại như thế này ?

Vì data phụ thuộc vào reactive state muốn có thuộc tính reactive luôn (luôn update nếu state thay đổi) thì phải sử dụng computed, watch hoặc watchEffect

VueCore – Tìm hiểu Composition Vue 3

Composition là một tính năng hoàn toàn mới giúp cải thiện đáng kể về cách mà chúng ta phân phối code hay còn gọi là refactor đó

Đối với Vue 2 thì ta sử dụng Option API

Composition API RFC | Vue Composition API

Với Option API thì code của ta hoàn toàn bị phân mảnh –> khó quản lý

Sẽ có 1 bài biết khác nói về lý do sử dụng Composition thay vì Option API (need update)

Nhưng trong bài viết này hãy cùng tìm hiểu cách để sử dụng tính năng mới của Vue 3 nhé

VueCore – v-model ở Vue 3 không chỉ tiện mà còn là nghệ thuật

Vue cung cấp cho chúng ta cách để có thể binding (trao đổi) thông tin 2 chiều (bi-direction) một cách nhanh chóng

Bây giờ Vue 3 còn nâng cấp nó mạnh mẽ hơn bao giờ hết !

<MyStudentCmp 
    v-model:studentName="studentName"
    v-model:studentAge.number="studentAge"
></MyStudentCmp>

Thấy cái gì không ????? Sử dụng v-model trên Component ? à ừ đã dùng ở Vue 2 rồi nhưng 2 v-model trên 1 component ! Excuse miii??

Đúng rồi đó ! Cùng tìm hiểu cách sử dụng v-model 1 cách chuẩn chỉnh nhất nhé <3