Vue.js xususiyatlarini sanab bering?

1.Virtual DOM

Vue.js-dagi Virtual DOM - bu foydalanuvchiga interfeysni ko'rsatish samaradorligi oshirish uchun foydalaniladigan usul.

HTML DOM-ni to'g'ridan-to'g'ri manipulyatsiya qilish o'rniga (bu sekin va resurs talab qilishi mumkin), Vue.js JavaScript xotirasida DOM daraxtining virtual tasvirini yaratadi. Ushbu virtual taqdimot haqiqiy DOM bilan o'zaro aloqada bo'lmasdan tezda yangilanishi va o'zgartirilishi mumkin bo'lgan yengil va samarali ma'lumotlar strukturasini yaratadi

Vue.js dasturda maʼlumotlarga oʻzgartirishlar kiritilganda, virtual DOM avval yangilanadi, soʻngra haqiqiy DOMni yangilash uchun zarur boʻlgan oʻzgarishlarning minimal sonini topish uchun virtual DOMning oldingi versiyasi bilan solishtiriladi. Keyinchalik bu o'zgarishlar haqiqiy DOMga qo'llaniladi, natijada yangilanishlar tezroq va samaraliroq bo'ladi.

2. Ma'lumotlarni ikki tomonlama bog'lash

Vue v-modeli shablonimizdagi qiymat va ma'lumotlar xususiyatlarimizdagi (data properties) qiymat o'rtasida ikki tomonlama ma'lumotlar bog'lanishini yaratuvchi direktivdir, ma'lumot uchun, v-bind esa ma'lumotlarni faqat bitta yo'l bilan bog'laydi.

Demak kettik, kodlar orqali v-model sahna ortida qanday ishlashini ko'ramiz:

<MyChild v-model="someRef" />
<!-- quyidagi bilan bir xil -->

<MyChild
    :modelValue="someRef"
    @update:modelValue="someRef = $event"
/>

Keyingi misolda keling custom input komponent yaratib ko'ramiz:

<script setup>
import { ref } from 'vue'
import CustomInput from './CustomInput.vue'

const fullname = ref('')
</script>

<template>
    <form>
        <CustomInput v-model="fullname" />
    </form>
</template>

<!-- CustomInput.vue -->
<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

<template>
<input
:value="modelValue"
@input="$emit('update:modelValue',$event.target.value)"
/>
</template>