הגדר את ההיגיון של רכיב ה-Vue שלך ​​באמצעות האובייקט Options.

Vue.js צברה את המוניטין שלה כמסגרת JavaScript מתקדמת. אתה יכול להשתמש ב-Vue.js כדי לבנות יישומי עמוד בודד (SPAs) או לפתח ממשקי משתמש ספציפיים.

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

Vue.js הוא אחד מה מסגרות JavaScript הפופולריות ביותר. כדי להתחיל עם Vue, וכדי להוסיף אותו לדף ה-HTML שלך, העתק את תג הסקריפט למטה והדבק אותו בקטע head:

<תַסרִיטsrc="">תַסרִיט>

שימוש בקישור CDN הוא אפשרות מצוינת לשיפור HTML סטטי או הוספת פונקציונליות ליישום שלך.

עם זאת, עליך להתקין Vue.js דרך npm כדי להשתמש ביותר מהתכונות המתקדמות שלו, כגון תחביר Single-File Component (SFC), אשר מועילים בעת בניית אפליקציות Vue מן המניין.

יצירת אפליקציית Vue

גישה לספריית Vue דרך הקישור CDN מספקת אובייקט Vue, כולל ה .createApp() שיטה.

כפי שהשם מרמז, אתה יכול ליצור אפליקציית Vue בשיטה זו.

לדוגמה:

html>
<htmllang="he">
<רֹאשׁ>
<כותרת>אפליקציית Vueכותרת>
<תַסרִיטsrc=" https://unpkg.com/vue@3/dist/vue.global.js">תַסרִיט>
רֹאשׁ>
<גוּף>
<תַסרִיט>
 const app = Vue.createApp();
תַסרִיט>
גוּף>
html>
instagram viewer

כאן האפליקציה שנוצרה מאוחסנת ב- אפליקציה מִשְׁתַנֶה. לאחר יצירת מופע האפליקציה, עליך לעבד אותו באמצעות ה .הר() שיטה. שיטה זו אומרת היכן לטעון את האפליקציה ב- מודל אובייקט מסמך (DOM).

ככה:

html>
<htmllang="he">
<רֹאשׁ>
<כותרת>אפליקציית Vueכותרת>
<תַסרִיטsrc=" https://unpkg.com/vue@3/dist/vue.global.js">תַסרִיט>
רֹאשׁ>
<גוּף>
<divתְעוּדַת זֶהוּת="אפליקציה">div>
<תַסרִיט>
 const app = Vue.createApp();
 app.mount("#app");
תַסרִיט>
גוּף>
html>

כדי להשתמש ב-Vue .הר() בשיטה, עליך לספק רכיב DOM או בורר כארגומנט. בדוגמה זו, הרכבנו את אפליקציית Vue באמצעות רכיב DOM עם ה- #אפליקציה תְעוּדַת זֶהוּת.

חשוב לציין שאפליקציית Vue שולטת רק באלמנטים שצוינו באמצעות א תְעוּדַת זֶהוּת. כמו כן, לאפליקציה אין שליטה על שום דבר מחוץ לאלמנטים הללו, כולל אירועי קליקים או כל אינטראקטיביות אחרת.

השלב האחרון ביצירת אפליקציית Vue הוא להתקשר ל- .הר() שיטה לאחר השלמת כל תצורות האפליקציה.

אובייקט האפשרויות ב-Vue

ב-Vue.js, אתה משתמש ב- אפשרויות אובייקט כאובייקט תצורה ליצירת מופע או רכיב Vue.

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

כמה מהמאפיינים הנפוצים ב- אפשרויות האובייקט הם:

  • נתונים: מאפיין זה מגדיר את אובייקט הנתונים עבור יישומי Vue. זוהי פונקציה שמחזירה אובייקט המכיל את מאפייני הנתונים והערכים ההתחלתיים שלהם.
  • שיטות: ה שיטות המאפיין של האובייקט Options מכיל פונקציות חיוניות בהפעלת עיבוד דינמי.
  • תבנית: מאפיין זה מגדיר את תבנית ה-HTML עבור מופע או רכיב Vue. זוהי מחרוזת המכילה את סימון HTML, אשר מהדר התבניות של Vue יכול לנתח.

שים לב שבשימוש במאפיין תבנית, מהדר Vue יציג רק תוכן שהוגדר בתבנית.

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

html>
<htmllang="he">
<רֹאשׁ>
<כותרת>אפליקציית Vueכותרת>
<תַסרִיטsrc=" https://unpkg.com/vue@3/dist/vue.global.js">תַסרִיט>
רֹאשׁ>
<גוּף>
<divתְעוּדַת זֶהוּת="אפליקציה">
<h1 @נְקִישָׁה="הודעה הפוכה" >{{ טקסט }}h1>
div>
<תַסרִיט>
const app = Vue.createApp({
// תבנית: '
ברוכים הבאים לאפליקציית Vue שלך
',
 נתונים() {
לַחֲזוֹר {
 טֶקסט: "זו אפליקציית Vue שלך"
 };
 },
 שיטות: {
 reverseMessage () {
זֶה.text = זֶה.text.split('').reverse().join('')
 }
 }
 });
אפליקציה.הר("#אפליקציה");
תַסרִיט>
גוּף>
html>

תוכנית זו מתארת ​​אפליקציית Vue בסיסית המציגה את הטקסט "This is your Vue App" באמצעות אינטרפולציה של טקסט ומאפשרת למשתמשים ללחוץ עליה כדי להפוך את ההודעה.

ה נתונים() הפונקציה מחזירה אובייקט עם מאפיין בודד שנקרא טֶקסט. ה @נְקִישָׁה ההוראה משמשת לצרף א reverseMessage() שיטה ל אלמנט, אשר הופך את טֶקסט תכונה.

בהפעלת תוכנית זו, אפליקציית Vue שנוצרה תיראה כך:

לחיצה על הטקסט תהפוך אותו.

שים לב שהתוכנית הגיבה על מאפיין התבנית כדי לאפשר את עיבוד התוכן באפליקציית Vue. אם נותר ללא הערה, אפליקציית Vue זו תציג רק מאפיין תבנית:

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

אינטרפולציה של טקסט ב-Vue

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

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

לדוגמה:

html>
<htmllang="he">
<רֹאשׁ>
<כותרת>אפליקציית Vueכותרת>
<תַסרִיטsrc=" https://unpkg.com/vue@3/dist/vue.global.js">תַסרִיט>
רֹאשׁ>
<גוּף>
<divתְעוּדַת זֶהוּת="אפליקציה">
<h1>{{ הודעה }}h1>
<ע>ברוך הבא {{ name }}ע>
div>
<תַסרִיט>
 const app = Vue.createApp({
 נתונים() {
 החזר {
 הודעה: "זו אפליקציית Vue שלך.",
 שם: "אצילי",
 };
 },
 });
 app.mount("#app");
תַסרִיט>
גוּף>
html>

בדוגמה זו, אינטרפולציית הטקסט מחייבת את הוֹדָעָה ו שֵׁם מאפיינים של אובייקט הנתונים שהוחזרו במופע Vue ל- ו אלמנטים. לאחר שיישום Vue עולה, הוא מציג את הערכים של הוֹדָעָה ו שֵׁם מאפיינים ב-HTML במיקומם המתאימים.

אתה יכול גם להציג את התוצאה של קריאת שיטה או לבצע פעולות JavaScript בסיסיות בתוך הסוגריים הכפולים המתולתלים:

html>
<htmllang="he">
<רֹאשׁ>
<כותרת>אפליקציית Vueכותרת>
<תַסרִיטsrc=" https://unpkg.com/vue@3/dist/vue.global.js">תַסרִיט>
רֹאשׁ>
<גוּף>
<divתְעוּדַת זֶהוּת="אפליקציה">
<h1>{{ הודעה }}h1>
<h3>ברוך הבא {{ name.toUpperCase() }}h3>
<ע>יש {{ nameLength() }} אותיות בשמך.ע>
div>
<ע>לא כאןע>
<תַסרִיט>
 const app = Vue.createApp({
 נתונים() {
 החזר {
 הודעה: "זוהי אפליקציית Vue שלך",
 שם: "Noble Okafor",
 };
 },
 שיטות: {
 nameLength() {
 החזר this.name.length - 1;
 },
 },
 });
 app.mount("#app");
תַסרִיט>
גוּף>
html>

בדוגמה זו, לאפליקציית Vue יש א נתונים אובייקט המכיל שני מאפיינים: הוֹדָעָה ו שֵׁם.

בתוך אפליקציית Vue, שלושת רכיבי ה-HTML מציגים נתונים באמצעות מופע Vue. ה h1 אלמנט מציג את הערך של הוֹדָעָה רכוש, בעוד ה h3 אלמנט מציג את הערך של שֵׁם נכס עם א toUpperCase() השיטה המיושמת עליו.

ה ע אלמנט מציג את התוצאה המוחזרת של ה- nameLength() שיטה המוגדרת ב שיטות האובייקט של אפליקציית Vue. ה nameLength() השיטה מחזירה את אורך ה- שֵׁם נכס מופחת באחד.

כדי לגשת לערך מאובייקט הנתונים באובייקט המתודות, עליך להשתמש זֶה מילת מפתח. זֶה מילת מפתח מתייחסת למופע ה-Vue הנוכחי ומאפשרת לך לגשת למאפיינים ולשיטות שלו מתוך מופע ה-Vue. על ידי שימוש ב זֶה, אתה יכול לאחזר את הערך של ה שֵׁם רכוש ולבצע כל מניפולציות נחוצות עליו באמצעות ה שיטות.

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

בנה את הקצה הקדמי שלך באמצעות Vue

במאמר זה, למדת כיצד להתחיל לעבוד עם Vue ולשלב טקסט עם תחביר התבניות של Vue. אתה יכול לגשת למספר פיצ'רים אחרים ב-Vue, כמו הנחיות וווי מחזור חיים, מה שהופך אותו לבחירה מצוינת לבניית יישומי חזית דינמיים.