• בלוג
  • vue
  • טיפ ויו: לאן נעלמה הטמפלייט

טיפ ויו: לאן נעלמה הטמפלייט

14/02/2025
vue

פוסט זה כולל טיפ קצר לעבודה עם Vue. אם אתם רוצים ללמוד איתי Vue מההתחלה ובצורה מקצועית תשמחו לשמוע שבניתי קורס מלא הכולל עשרות שיעורי וידאו והמון תרגול בו לומדים ויו מההתחלה ועד לנושאים המתקדמים.
לפרטים נוספים והרשמה בקרו בדף קורס Vue.JS כאן באתר.
 

הקוד הבא ב Vue מראה על המסך את הטקסט Hello Vue:

<template>
    <template v-if="true">
        <p>Hello Vue</p>
    </template>
</template>

אבל זה כבר לא מראה כלום:

<template>
    <template>
        <p>Hello Vue</p>
    </template>
</template>

בואו נראה למה.

1. אלמנט template ב HTML

ב HTML יש אלמנט בשם template שמאפשר בניה של Web Components. הקוד שנמצא בתוך טמפלייט ב HTML אמור להיטען מתוך קוד JavaScript כדי ליצור אלמנט ב DOM בשלב מאוחר יותר. הקוד הזה לכן הוא HTML תקני לגמרי, שללא JavaScript לא מראה כלום על המסך:

<my-counter></my-counter>
<my-counter></my-counter>
<my-counter></my-counter>

<template id="counter">
  <p>I'm a counter. value = <span class="value">0</span>
    <button class="inc">+1</button>
    <button class="dec">-1</button>
  </p>
</template>

2. אלמנט template ב Vue

ב Vue לאלמנט template יש מספר תפקידים, השניים שרלוונטיים לדוגמה שלנו הם:

  1. אלמנט template מאפשר לחבר יחד כמה אלמנטים עבור Directive אחד, לדוגמה להציג או להסתיר מספר אלמנטים לפי תנאי ב v-if או לחזור על מספר אלמנטים בלולאה ב v-for.

  2. אלמנט template מאפשר בנייה של תגית template ב HTML.

ואיך ויו מבין לאיזה משני התפקידים התכוונו? לפי ה Directives: אם יש ב template פקודות כמו v-if או v-for הוא נחשב לטמפלייט שמחבר כמה דברים יחד, אם אין אז הוא יופיע בתור אלמנט template ב HTML.

ב ESLint יש כלל בשם vue/no-lone-template שמזהה שימוש ב template בלי directives ומעיר עליו. אפשר לקרוא עליו כאן:

https://eslint.vuejs.org/rules/no-lone-template