הנה מה שאתה צריך לדעת על איגוד נתונים ב-Vue

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

כאן תוכלו לחקור כריכות שונות ב-Vue, כולל כריכות חד-כיווניות ודו-כיווניות. תלמדו גם ליישם את הכריכות הללו עם תבניות והנחיות שפם כמו v-bind ו-v-model.

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

אינטרפולציה היא אחד מסוגי איגודי הנתונים הפופולריים ביותר של Vue. אינטרפולציה מאפשרת לך להציג ערכי נתונים בתגיות Hyper Text Markup Language (HTML) שלך עם תבנית השפם, המסומנת בדרך כלל בסוגרים כפולים מתולתלים ({{ }}).

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

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

<גוּף>
<divתְעוּדַת זֶהוּת="אפליקציה">
<h1>{{ כותרת }}h1>
<ע>{{ text.toUpperCase() }}ע>
div>
<תַסרִיט>
 const app = Vue.createApp({
 נתונים() {
 החזר {
 title: "ברוך הבא",
 text: "זה העולם שלך?",
 };
 },
 });
 app.mount("#app");
תַסרִיט>
גוּף>

בלוק הקוד שלמעלה משתמש בתבנית השפם כדי להציג את הערך של מאפיין הכותרת באובייקט הנתונים של אפליקציית Vue. אתה יכול גם להציג תוצאות ביטוי JavaScript עם אינטרפולציה. לדוגמה, ה {{text.toUpperCase()}} ביטוי ב ע תג מציג את הגרסה האותיות של ערך הטקסט, כפי שמוצג בתמונה למטה:

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

לדוגמה:

<תַסרִיט>
 const app = Vue.createApp({
 נתונים() {
 החזר {
 כותרת: "שלום",
 text: "זה העולם שלך?",
 };
 },
 });
 app.mount("#app");
תַסרִיט>

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

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

כריכת נתונים בכיוון אחד עם הוראה v-bind

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

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

אתה יכול להשיג כריכת נתונים חד-כיוונית ב-Vue עם ה v-bind הנחיה או אופי הקיצור שלה (:):

 הנחיית v-bind 
<קֶלֶטסוּג="טֶקסט"v-bind: ערך="טֶקסט">
 את: דמות קצרצרה 
<קֶלֶטסוּג="טֶקסט":ערך="טֶקסט">

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

<גוּף>
<divתְעוּדַת זֶהוּת="אפליקציה">
<קֶלֶטסוּג="טֶקסט"v-bind: ערך="טֶקסט">
<ע>{{ טקסט }}ע>
div>
<תַסרִיט>
 const app = Vue.createApp({
 נתונים() {
 החזר {
 text: 'Vue זה מדהים!'
 }
 }
 })
 app.mount('#app')
תַסרִיט>
גוּף>

למעלה, שדה קלט ואלמנט פסקה מציגים את הערך של ה- טֶקסט תכונה. ה ערך התכונה של שדה הקלט קשורה למאפיין הטקסט באמצעות ה- v-bind הוֹרָאָה.

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

כדי להראות זאת, נוכל להתחיל עם הערך ההתחלתי של ה- טֶקסט תכונה, "Vue זה מדהים!":

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

עם זאת, כאשר אנו משנים את הערך של טֶקסט רכוש ל שלום עולם! במופע של אפליקציית Vue במקום משדה הקלט, שדה הקלט מתעדכן כך שישקף את הערך החדש:

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

קישור נתונים דו כיווני עם ה-V-model Direktiv

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

Vue.js מאפשר כריכה דו-כיוונית עם ה- דגם v הוֹרָאָה. ה דגם v directive יוצרת קישור נתונים דו-כיווני בין רכיב קלט טופס למאפיין נתונים. כאשר אתה מקליד ברכיב קלט, הערך מתעדכן אוטומטית במאפיין הנתונים, וכל שינוי במאפיין הנתונים יעדכן גם את רכיב הקלט.

הנה דוגמה לאפליקציית Vue המשתמשת ב דגם v הנחיה להשגת כריכת נתונים דו-כיוונית:

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

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

שדה הקלט מעדכן את מאפיין הטקסט כאשר אתה מקליד בו ומשקף שינויים במאפיין הטקסט ב- ע תָג. Vue.js משתמש בהנחיית v-model ובאלמנט הקלט כדי להשיג קישור נתונים דו-כיווני.

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

הרחב את המומחיות שלך בבניית אפליקציות Vue

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

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