היסודות של הנחיות Vue.js

הנחיות Vue.js הן אסימונים מיוחדים בסימון שאומרים לספרייה לעשות משהו לרכיב DOM. הקידומת שלהם היא v- כדי לציין שהם תכונות מיוחדות שמסופקות על ידי Vue. הנחיות הן אחת מתכונות הליבה של Vue.js, המאפשרות למפתחים לתפעל את ה-DOM ביעילות.

במאמר זה, נחקור את היסודות של הנחיות Vue.js, המכסים את ההנחיות הנפוצות ביותר וכיצד להשתמש בהן ביישומי Vue שלך.

הנחיות נפוצות ב-Vue.js

להלן כמה מההנחיות הנפוצות ביותר ב-Vue.js:

• v-bind: קושר באופן דינמי תכונה אחת או יותר או אבזר רכיב לביטוי.
• v-model: יוצר איגוד נתונים דו-כיווני על קלט טופס, אזור טקסט ורכיבי בחירה.
• v-if: מעבד באופן מותנה אלמנט או רכיב.
• v-else: מספק בלוק אחר עבור v-if.
• v-else-if: מספק בלוק else-if עבור v-if.
• v-for: מציג רשימה של פריטים באמצעות מערך או אובייקט.
• v-on: מצרף מאזיני אירועים לאלמנטים.
• v-show: מחליף את החשיפה של אלמנט המבוסס על ביטוי.
• v-html: מעדכן את ה-HTML הפנימי של אלמנט.

v-bind: תכונות מחייבות באופן דינמי

ההנחיה v-bind משמשת לקשירה דינמית של תכונות או מאפיינים לביטוי. לדוגמה, אתה יכול לאגד את התכונה src של אלמנט img למאפיין נתונים:

<template>
  <img v-bind:src="imageSrc" alt="Dynamic Image" />
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'https://example.com/image.jpg'
    };
  }
};
</script>

הקיצור של v-bind הוא פשוט נקודתיים (:), כך שניתן לשכתב את הדוגמה לעיל כ:

<img :src="imageSrc" alt="Dynamic Image" />

דגם v: Binding נתונים דו-כיווני

ההנחיה v-model משמשת ליצירת איגוד נתונים דו-כיווני על רכיבי קלט של טופס. זה שומר על רכיב הקלט ומאפיין הנתונים מסונכרנים:

<template>
  <input v-model="message" placeholder="Type something..." />
  <p>You typed: {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

v-if, v-else-if ו-v-else: עיבוד מותנה

ההנחות v-if, v-else-if ו-v-else משמשות לעיבוד מותנה של אלמנטים. הם מאפשרים לך להציג אלמנטים באופן מותנה על סמך הערכת ביטוי:

<template>
  <div v-if="isLoggedIn">Welcome back!</div>
  <div v-else-if="isGuest">Hello, Guest!</div>
  <div v-else>Please log in.</div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      isGuest: true
    };
  }
};
</script>

v-for: עיבוד רשימה

ההנחיה v-for משמשת לעיבוד רשימה של פריטים על ידי איטרציה על מערך או אובייקט. כל פריט במערך ניתן לעיבוד באמצעות לולאה:

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    };
  }
};
</script>

v-on: טיפול באירועים

ההנחיה v-on משמשת לצירוף מאזיני אירועים לרכיבי DOM. אתה יכול לטפל באינטראקציות של משתמשים כגון קליקים, קלט ועוד:

<template>
  <button v-on:click="showAlert">Click Me</button>
</template>

<script>
export default {
  methods: {
    showAlert() {
      alert('Button clicked!');
    }
  }
};
</script>

הקיצור של v-on הוא סמל האת (@), כך שניתן לשכתב את הדוגמה לעיל כ:

<button @click="showAlert">Click Me</button>

v-show: החלפת נראות

ההנחיה v-show משמשת כדי לשנות את החשיפה של אלמנט המבוסס על ביטוי. שלא כמו v-if, זה לא מסיר את האלמנט מה-DOM; זה רק מחליף את המאפיין display CSS:

<template>
  <div v-show="isVisible">This is visible!</div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

v-html: עיבוד HTML

ההנחיה v-html משמשת לעדכון HTML פנימי של רכיב. זה שימושי כאשר אתה צריך לעבד HTML גולמי ברכיבי Vue שלך:

<template>
  <div v-html="rawHtml"></div>
</template>

<script>
export default {
  data() {
    return {
      rawHtml: '<strong>Bold Text</strong>'
    };
  }
};
</script>

מַסְקָנָה

הנחיות Vue.js מספקות דרכים רבות עוצמה לתמרן את ה-DOM וליצור יישומי אינטרנט דינמיים ואינטראקטיביים. הבנת היסודות של הנחיות Vue.js כמו v-bind, v-model, v-if, v-for, v-on, v-show ו-v-html חיוניים עבור כל מפתח Vue. על ידי שליטה בהנחיות אלו, תוכל לבנות יישומים חזקים ועתירי תכונות עם Vue.js.