003. Vue.js "script setup" Sintaksisi

Vue.js-da script setup sintaksisi Vue 3.2 versiyasidan boshlab qo’shilgan yangi sintaksis variantidir va Composition API-ni ishlatishni juda osonlashtiradi. Bu sintaksis yordamida siz Vue komponentlarini yozish uchun ancha qisqa va tushunarli kod yozishingiz mumkin. Mana asosiy nuqtalari:

script setup Sintaksisi

1. Asosiy Struktur:

   <template>
     <!-- Shablon  HTML kodi -->
   </template>
   
   <script setup>
   // Bu yerda Composition API kodlarini yozasiz
   </script>
   
   <style>
   /* Stil kodi */
   </style>
   

2. O’zgaruvchilar va Funksiyalar:

   • script setup blokida siz to’g’ridan-to’g’ri o’zgaruvchilar va funksiyalarni aniqlashingiz mumkin va ular avtomatik ravishda shablon bilan bog’lanadi.

   • Misol:

     <template>
       <p>{{ message }}</p>
     </template>
     
     <script setup>
     import { ref } from "vue";
     
     const message = ref("Salom, dunyo!");
     </script>
     

3. Props va Emits:

   • props va emits ni aniqlash juda oson.
   • Props:

     <script setup>
     defineProps({
       msg: String,
     });
     </script>
     

   • Emits:

     <script setup>
     const emit = defineEmits(["update"]);
     </script>
     

4. Komponentlar:

   • Mahalliy komponentlarni script setup ichida import qilib, bevosita ishlatishingiz mumkin.

   • Misol:

     <script setup>
     import MyComponent from "./MyComponent.vue";
     </script>
     
     <template>
       <MyComponent />
     </template>
     

5. Reaktivlik:

   • ref va reactive kabi Composition API funksiyalarini to’g’ridan-to’g’ri ishlatishingiz mumkin.

   • Misol:

     <script setup>
     import { ref } from "vue";
     
     const count = ref(0);
     
     function increment() {
       count.value++;
     }
     </script>
     
     <template>
       <button @click="increment">Increment</button>
       <p>{{ count }}</p>
     </template>
     

Afzalliklari:

• Qisqaroq va Tushunarli Kod: Kodni qisqartiradi va ko’proq intuitiv qiladi.
• Soddaligi: Composition API va Props ni aniqlash osonlashadi.
• Kodni Tashkillashtirish: O’zgaruvchilar va funksiyalarni soddaroq qilib tashkil qilish imkonini beradi.

script setup Vue 3-ning yanada qulay va zamonaviy usulida komponentlar yaratishga yordam beradi. Keyingi postda reactivlik haqida gaplshamiz.