Skip to content

Category: Vue Core

Vue core sẽ chứa tất cả nội dung cốt lõi của Vuejs Framework. Các bước sử dụng directive cơ bản, hiểu component, cách component giao tiếp v.v.

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 !!!

VueCore – Hiểu các directives trong 15 phút (Phần 4)

Directive là những cú pháp được apply trực tiếp lên html tag qua đó mà thực hiện những chức năng logic như : calculation(tính toán), loop (iteration – duyệt), condition(điều kiện) mà Vue cung cấp cho ta

Trang này chỉ dành cho ~ ai muốn tham khảo về dùng làm tài liệu trong quá trình code (tham khảo, gợi nhớ..) của mình thôi . . . bởi vì tôi sẽ không giải thích rõ từng chức năng ở đây

Nếu bạn muốn hiểu rõ hãy tham khảo ~ resources này :

*100% chỉ cần xem kỹ 2 course này là làm trùm cmnl


Ở phần này, mình sẽ không tìm hiểu nhiều về v-slot, v-is … mà chỉ nói sơ qua công dụng cũng như là cách dùng chúng nói với những thành phần khác ở trong Vue

Vì những directive này yêu cầu bạn biết những kiến thức nhiều hơn

VueCore – Hiểu các directives trong 15 phút (Phần 3)

Directive là những cú pháp được apply trực tiếp lên html tag qua đó mà thực hiện những chức năng logic như : calculation(tính toán), loop (iteration – duyệt), condition(điều kiện) mà Vue cung cấp cho ta

Trang này chỉ dành cho ~ ai muốn tham khảo về dùng làm tài liệu trong quá trình code (tham khảo, gợi nhớ..) của mình thôi . . . bởi vì tôi sẽ không giải thích rõ từng chức năng ở đây

Nếu bạn muốn hiểu rõ hãy tham khảo ~ resources này :

*100% chỉ cần xem kỹ 2 course này là làm trùm cmnl


Trong phần này ta sẽ tìm hiểu để lấy giá trị từ input –> sau đó display và binding giá trị ở data() vào input. Đồng thời tìm hiểu cách duyệt mảng, list với v-for

VueCore – Hiểu các directives trong 15 phút (Phần 2)

Nếu bạn muốn hiểu rõ hãy tham khảo ~ resources này :

*100% chỉ cần xem kỹ 2 course này là làm trùm cmnl


Ở phần 1, chúng ta đã tiềm hiểu sơ về cách hiển thị nội dung với v-text hoặc {{ mustache }} , gán giá trị từ data với v-bind v.v.

Hôm nay ta sẽ tìm hiểu cách ẩn / hiển theo điều kiện & tìm hiểu sự khác nhau giữa v-show & v-if

VueCore – Hiểu các directives trong 15 phút (Phần 1)

Directive là những cú pháp được apply trực tiếp lên html tag qua đó mà thực hiện những chức năng logic như : calculation(tính toán), loop (iteration – duyệt), condition(điều kiện) mà Vue cung cấp cho ta

Trang này chỉ dành cho ~ ai muốn tham khảo về dùng làm tài liệu trong quá trình code (tham khảo, gợi nhớ..) của mình thôi . . . bởi vì tôi sẽ không giải thích rõ từng chức năng ở đây

Nếu bạn muốn hiểu rõ hãy tham khảo ~ resources này :

*100% chỉ cần xem kỹ 2 course này là làm trùm cmnl


v-text hay {{ mustache }}

cách v-bind để gán các giá trị vào thẻ mong muốn như thế nào ?,

v-html và những lưu ý khi sử dụng nó & đồng thời lắng nghe ~ event bằng v-on