הקוד הבא ב 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