Skip to content

Category: VueJs

Vuelidate – Hướng dẫn Input Validator cho Vuejs

Vuelidate là một thư viện hỗ trợ cho Vue 2.0 & 3.0 kiểm tra form input, đồng thời cung cấp cách thức hiển thị lỗi (yêu cầu) một cách trực quan nhất.

So với đối thủ của nó VeeValidate – cũng là một input validator & display errors thì theo cảm nhận cá nhân : Vuelidate đơn giản hơn hẳn về cách hoạt động cũng như rất dễ dàng có thể tìm hiểu trong vài phút đọc document

Dưới đây là cách sử dụng Vuelidate đi với Vue 3.0 chưa được hỗ trợ hoàn toàn (*hi vọng có thể update post này trong tương lai :)) )

Vue Router – thêm Route vào Router như thế nào

Như này

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes,
})

hoặc 
router.addRoutes(routes)

3 dạng Record

  • Single view record : có 1 component
  • Multiple view record : nhiều component
  • Redirect record : không có component

Những object mà ta truyền vào trong routes sẽ là [RouteRecord] type

Vue Router – RouterLink & Router-View

<router-link> & <router-view> là 2 thành phần chủ chốt của vue-router.

Router link dùng để render ra link <a> dựa trên những route của ta một cách dynamically.

Còn Router view chính là nơi mà ta render ra component dựa trên sự thay đổi của route

Còn hơn thế nữa cách mà chúng ta xử lý link còn có params, query, hash v.v. được Vue-Router hỗ trợ rất mạnh mẽ sau đây

Vue Router – Navigation Guards

Cần quản lý, xác minh User trước khi cho truy cập vào trang web ?

Navigation Guard hỗ trợ rất mạnh mẽ việc này. Đồng thời cho phép ta thoải mái xử lý rất nhiều các loại tác vụ trước & sau khi thực hiện navigation (chuyển route)


  1. Global
    1. Hoặc sử dụng next 3rd argument
    2. After Hooks
    3. Before Resolve
    4. Per-Route Guard (Global setup)
  2. Local (In-Component Guards)
  3. The Full Navigation Resolution Flow

Vue Router – History mode, Catch all/404, Matching Syntax

History mode là phương thức lưu lịch sử trang web vì VueJs là SPA (single page application) nghĩa là ta không có xử lý html code từ server trả về mà trực tiếp thay đổi trên client luôn

Chính vì thế page của chúng ta sẽ không reload full-page nên là đường dẫn sẽ không thay đổi

Nhưng vue-router cho phép ta làm điều đó với createWebHistory()

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

VueCore – Child Component Communication gặp khó khăn ?

Hai hề lô ! Bạn đã biết cách truyền data giữa các child components chưa ?

<template>
  <MyCmp1></MyCmp1>
  <MyCmp2></MyCmp2>
</template>

child component communication
Không thể truyền data giữa 2 child component như này

$emit là gì vậy ? và cách đặt tên emit đúng chuẩn sẽ được giải đáp ở ngay dưới đây

Đọc qua một lần và bạn sẽ không cần phải tìm hiểu lại lần thứ 2

VueCore – Non-prop attributes(cách truyền class, style . . vào vị trí cụ thể trong Component)

Như ở bài VueJs – Component giao tiếp với nhau như thế nào ? thì chúng ta đã biết cách dữ liệu vào Component như student object {name: '...', age: '...'}

Thì ở phần này chúng ta sẽ tập trung vào những thuộc tính : class, style, data-* v.v đây là ~ thuộc tính của html

<template>
    <h1>Student Information</h1>
    <hr>
    <p>Full Name : {{ student.name }}</p>
    <hr>
    <input type="text" placeholder="Adjust full name here">
</template>

// StudentInfoCmp.vue

Làm sao để đặt nó đúng vào vị trí mà chúng ta cần ở Component của ta ?

VueCore – Component giao tiếp với nhau như thế nào ?

Mà tại sao các component lại phải giao tiếp với nhau ?

Giả sử bây giờ ta có 1 component

<template>
    <p>Full Name : student_name_here</p>
    <p>Age : student_age_here</p>
    <p>Grade : student_grade_here</p>
</template>

// Name : StudentInfoCmp.vue

Làm sao để truyền từng item vào để display ra ?

Solution : Sử dụng prop

VueCore – Component là gì ? Tại sao lại sử dụng nó ?

Trước khi đi tìm hiểu về component, tôi muốn hỏi bạn vài câu hỏi !

  1. Tại sao bạn lại tìm hiểu VueJS ?
  2. Bạn có muốn code của mình sau 3 năm vẫn có thể đọc & hiểu không !
  3. Bạn có muốn workflow của mình trở nên tinh tế hơn ?
  4. Bạn có muốn code nhanh hơn ?

Nếu câu trả lời là CÓ ! Thì Component chính là công cụ giải quyết vấn đề đấy cho bạn

Cụ thể là bạn sẽ chia những giao diện tổng thế –> thành nhiều phần nhỏ –> sau đó quản lý

Hơn nữa . . . ta có thể tái sử dụng lại những cấu trúc tương tự nhau

VueCore – Cách sử dụng methods, computed & watch

Cả 3 methods, computed, watch đều cung cấp cho ta 1 chức năng chung đó là : theo dõi những thay đổi trong data() đồng thời update và xử lý những giá trị đã thay đổi đó. Nhưng nếu không nắm rõ behind the scene 3 phương thực này hoạt động như thế nào sẽ khiến slow-performance đấy !!!