التوجيهات: v-if وv-for وv-bind وv-on

ما هي توجيهات Vue؟

v-if وv-else-if وv-else

<div v-if="isLoggedIn">
  <UserDashboard />
</div>
<div v-else-if="isLoading">
  <Spinner />
</div>
<div v-else>
  <LoginForm />
</div>

v-show — تبديل الظهور

<!-- Good for frequently toggling: -->
<div v-show="isDropdownOpen">...</div>

<!-- Good for rarely changing: -->
<div v-if="userHasPremium">...</div>

v-for — تصيير القوائم

<ul>
  <li v-for="user in users" :key="user.id">
    {{ user.name }} — {{ user.email }}
  </li>
</ul>

<!-- With index: -->
<li v-for="(item, index) in items" :key="item.id">
  {{ index + 1 }}. {{ item.title }}
</li>

v-for مع كائن

<dl>
  <template v-for="(value, key) in user" :key="key">
    <dt>{{ key }}</dt>
    <dd>{{ value }}</dd>
  </template>
</dl>

v-bind — ربط السمات

<img :src="user.avatar" :alt="user.name">
<a :href="getLink(post.id)">{{ post.title }}</a>
<button :disabled="isLoading" :class="{ active: isActive }">Save</button>

صيغة كائن v-bind

<input v-bind="{
  type: 'email',
  placeholder: 'Enter email',
  disabled: isSubmitting
}">

ربط الأصناف: :class

<div :class="{ 'is-active': isActive, 'has-error': hasError }">...</div>

<!-- Array syntax: -->
<div :class="[baseClass, isActive ? 'active' : '']">

<!-- Dynamic in script setup: -->
:class="{ card: true, [variantClass]: true }"

ربط الأنماط: :style

<div :style="{ backgroundColor: brandColor, padding: spacing + 'px' }">

v-on — الاستماع إلى الأحداث

<button @click="handleClick">Click Me</button>
<input @input="value = $event.target.value">
<form @submit.prevent="handleSubmit">...</form>

معدِّلات الأحداث

<form @submit.prevent="submit">
<button @click.stop="selectItem">
<div @click.self="closeModal">
<div @scroll.passive="onScroll">

تحقّق سريع

مراجعة: توجيهات Vue