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

1. קוד JavaScript בתוך ה HTML

ראינו שקובץ vue מחולק-3 חלקים: בלוק setup, בלוק template ובלוק style. בשיעור זה נדבר על שני הראשונים בדגש על ה template. הסימן הראשון שנלמד הוא הסוגריים המסולסלים הכפולים. כתיבתם בתוך טקסט של אחד האלמנטים גורמת להפעלת קוד ה JavaScript שכתוב בתוכם והצגת התוצאה שלו על העמוד. לדוגמה:

<template>
  <p>1 + 1 = {{ 1 + 1 }}</p>
</template>

מה שיגרום להצגת המשוואה 1 + 1 = 2 על המסך.

או בדוגמה נוספת עם תאריך:

<template>
  <p>Today is: {{ new Date() }}</p>
</template>

נשים לב שלא ניתן להשתמש בסוגריים מסולסלים כפולים בתור ערך של Attribute, כלומר הקוד הזה:

<template>
  <input type="text" value="{{ 1 + 1 }}" />
</template>

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

<template>
  <input type="text" :value="1 + 1" />
</template>

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

<template>
  <input type="text" v-bind:value="1 + 1" />
</template>

ואפשר להשתמש בתחילית v-bind או בקיצור שלה : לכל מאפיין בתבנית.

2. הגדרת משתנים ב setup וגישה אליהם מהתבנית

הרבה פעמים יהיה לנו יותר נוח להגדיר את החלקים הדינמיים בתבנית בתור משתנים ולהפריד בין הקוד לבין התבנית. בשביל זה בדיוק יש לנו את בלוק ה script setup. מתוך התבנית ניתן לקרוא תוכן של כל משתנה גלובאלי שמוגדר בבלוק זה אוטומטית. התבנית הזאת מציגה מספר אקראי בין 0 ל-9:

<script setup lang="ts">
const number = Math.floor(Math.random() * 10);
</script>

<template>
  <p>The number is: {{ number }}</p>
</template>

וכל פעם שאני מרענן את העמוד אני מקבל מספר אחר.

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

<script setup lang="ts">
const number = Math.floor(Math.random() * 10);
</script>

<template>
  <p>The number is: {{ number }}</p>
  <p v-if="number > 5">Great number!</p>
</template>

רעננו את העמוד מספר פעמים כדי לראות את ההודעה השנייה מופיעה ונעלמת.

אפשר להרחיב את v-if עם שני מאפיינים מיוחדים קשורים שהם v-else ו v-else-if. נסו את זה:

<script setup lang="ts">
const number = Math.floor(Math.random() * 10);
</script>

<template>
  <p>The number is: {{ number }}</p>
  <p v-if="number < 5">Too small</p>
  <p v-else-if="number < 8">Number is ok</p>
  <p v-else>Wow great number!</p>
</template>

3. טיפול באירועים

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

<script setup lang="ts">
function ouch() {
  alert('Ouch!');
}
</script>

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

ובדיוק כמו שנקודותיים היו קיצור ל v-bind כך סימן @ הוא קיצור ל v-on ולכן נוכל לכתוב את אותה דוגמה באופן הבא:

<script setup lang="ts">
function ouch() {
  alert('Ouch!');
}
</script>

<template>
  <button @click="ouch">Click Me</button>
</template>

עכשיו אני יודע מה אתם חושבים - האם אפשר לשנות ערך של משתנה כמו number מתוך פונקציה שנקראת אחרי לחיצת כפתור? כי הרי אם נוכל לשנות ערך של משתנה גלובאלי נוכל לכתוב קוד שיגרום לדברים להשתנות על המסך. התשובה היא כן אבל זה דורש עוד טריק קטן שנגיע אליו בשיעורים הבאים. בינתיים בשביל התרגילים נסתפק ב alert-ים.

4. קשר בין קבצים

הדבר האחרון שנרצה לעשות עם תבניות לשיעור זה הוא לחבר תבניות של מספר קומפוננטות. למעשה כבר ראינו קוד שעושה את זה בסטארטר של הפרויקט שנוצר אבל הפעם אנחנו נכתוב משהו יותר פשוט משלנו. אני יוצר קובץ חדש בשם Number.vue בתוך תיקיית components עם התוכן הבא:

<script setup lang="ts">
const number = Math.floor(Math.random() * 10);
</script>

<template>
  <p>The number is: {{ number }}</p>
</template>

ומשנה את הקובץ App.vue לתוכן הבא:

<script setup lang="ts">
import Number from './components/Number.vue';
</script>

<template>
  <Number />
  <Number />
  <Number />
</template>

פקודת import של JavaScript ו TypeScript אחראית פה לטעינת קומפוננטה מקובץ אחר וכך אנחנו יכולים לבנות תוכנית על המסך שמורכבת מתבניות ממספר קבצים. אם אתם לא מכירים את פקודת import אני ממליץ להסתכל בשיעור עליה מתוך קורס JavaScript בקישור:

https://www.tocode.co.il/bundles/frontend/lessons/esmodules?tab=video

5. עכשיו אתם

1. כתבו קובץ נפרד בשם Header.vue שמציג שורת כותרת שכוללת בלוק עיצוב משלה.

2. כתבו קובץ נפרד בשם Main.vue שמציג טקסט ומשתמש גם הוא באלמנטים מסוג h1 כמו Header. שימו לב להפריד בין ה style של Main ל style של Header באמצעות בלוק style scoped.

3. כתבו קובץ בשם Surprise.vue שמציג על המסך כפתור, לחיצה על הכפתור מציגה הודעה Surprise.

4. עדכנו את הקוד של App.vue שיכלול את שלושת הקומפוננטות החדשות שיצרתם, ולאחר מכן עדכנו אותו שוב כך שיציג את Surprise רק אם השעה היא לפני 12 בצהריים.