The most basic form of data binding :

<span>{{ message }}</span>

Raw HTML

Có thể sử dụng với v-html (⚠ có thể bị tấn công XSS)
Ví dụ:
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

Attribute Bindings:

<div v-bind:id="dynamicId"></div>

Shorthand:

<div :id="dynamicId"></div>

Same-name shorthand:

<!-- same as :id="id" -->
<div :id></div>
<!-- this also works -->
<div v-bind:id></div>

Dynamically Multiple Attribute

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green'
}

<div v-bind="objectOfAttrs"></div>

Dynamic Argument

const attributeName = 'abc' | 'href' | 'alt'

<a v-bind:[attributeName]="value"> ... </a>

<!-- shorthand -->
<a :[attributeName]="value"> ... </a>

const eventName = 'click' | 'change' | 'close'

<a v-on:[eventName]="doSomething"> ... </a>

<!-- shorthand -->
<a @[eventName]="doSomething"> ... </a>

Mount component Vue với html

<script setup lang="ts">
import {createApp} from "vue";
import Text from "./components/Text.vue";
createApp(Text).mount("#textApp");
</script>

ở html khai báo đoạn div với id=textApp:
<div id="textApp"></div>

Tác dụng của Directive trong Vue: gắn câu lệnh trực tiếp vào thẻ html

Ví dụ khi ở input, nếu ta muốn auto focus vào input thì sẽ phải khai báo ref đến input đó và gọi inputRef.value?.focus()
Nhưng nếu muốn tối ưu hơn ta có thể viết một directive xong rồi khai báo vào thẻ html là xong

const app =createApp(App);
app.directive('kfocus',  {
    mounted: (el) => {
        el.focus();
    }
})

<input v-kfocus />

app.use(): Dùng để cài đặt plugin

Các cách truyền dữ liệu từ giữa hai component:

Dùng defineModel(): Dùng để tạo two-way binding giữa hai component, phù hợp khi cần đồng bộ dữ liệu hai chiều.
Dùng defineProps(): Truyền dữ liệu từ component cha xuống component con theo hướng một chiều.
Dùng defineEmits(): Truyền dữ liệu hoặc sự kiện từ component con lên component cha.
Dùng provide/inject: Truyền dữ liệu từ component cha xuống nhiều component con ở các cấp sâu hơn, tránh phải truyền qua từng cấp trung gian.
Dùng state toàn cục (Vuex hoặc Pinia): Dùng để chia sẻ dữ liệu giữa các component không có quan hệ cha–con trực tiếp.
Dùng ref component: Dùng ref để truy cập trực tiếp vào instance của component con, từ đó gọi method hoặc đọc dữ liệu bên trong thông qua defineExpose

Watch và WatchEffect:

watch: Theo dõi một hoặc nhiều biến cụ thể do ta chỉ định. Nó cung cấp cả newValue và oldValue. Mặc định, watch không chạy khi component khởi tạo, nếu muốn chạy ngay thì cần thêm { immediate: true }.
watchEffect: Theo dõi mọi biến phản ứng (reactive) được sử dụng bên trong callback. Hàm sẽ chạy ngay lập tức khi component khởi tạo, và tự động chạy lại mỗi khi có bất kỳ biến nào thay đổi. Tuy nhiên, vì nó theo dõi tự động, nên có thể khó kiểm soát khi có quá nhiều biến liên quan.

isRef() : kiểm tra có phải là 1 ref object

`unref()` : kiểm tra nếu là ref thì trả về .value của ref còn không thì trả về đúng value của đối tượng đó

toRef() : chuyển đổi các đối tượng thành ref

toValue() : trả về giá trị gốc

toRefs() : Biến từng thuộc tính trong reactive(obj) thành ref

isProxy() : trả về true nếu đối tượng kiểu reactive(), readonly(), shallowReactive() or shallowReadonly()

markRaw() được Vue cung cấp để đánh dấu một object là "không reactive", tức là Vue sẽ không theo dõi các thay đổi bên trong nó.

v-once : Vue bỏ qua hoàn toàn các lần update, không check, không render lại → tiết kiệm CPU/RAM rõ rệt trong các lần sau.

Khánh Phan