קיימות כל כך הרבה מסגרות JavaScript בימינו, שיכול להיות קשה לעקוב אחר כולן, ובוודאי שלא סביר שמישהו ישלוט בהן בשלמותן. המשמעות עבור רובנו היא שנצטרך להיות סלקטיביים לגבי מסגרות הפיתוח שאנו הולכים להשקיע זמן בלמידה.
במאמר זה, נסקור במהירות את Vue.js, כך שתוכל להחליט בעצמך אם הוא עשוי להתאים לסוג הפרויקטים שאתה נוטה לעבוד עליהם, והאם זה נראה כמו מתאים לך.
מה זה Vue.js?
למרות שבדרך כלל זה לא באותיות רישיות, "Vue" הוא באמת ראשי תיבות של Visual Understanding Environment. מטרתו העיקרית היא להקל על פיתוח יישומי אינטרנט על ידי הפחתת מורכבות הקוד. יש לו הרבה מן המשותף עם React.js, אבל הגרסה הנוכחית של Vue מתארכת מהר יותר מאשר React, ונראה כי היא יעילה יותר.
האם Vue קשה ללמוד?
אם אתה כבר קודן מנוסה, לא אמור להיות לך קושי רב להתחיל עם Vue, אבל זה לא יהיה נכון לתאר אותה כשפת מתחילים. אתה צריך קצת ניסיון עם HTML, CSS ו-JavaScript כדי לבנות איתם משהו מעשי.
עקומת הלמידה עם Vue היא קצת פחות תלולה מאשר עם React, והיא הרבה פחות תלולה מאשר עם Angular. אז מה שניתן לקבוע במדויק הוא שקל יחסית ללמוד את Vue בהשוואה למסגרות פיתוח פופולריות אחרות.
איך Vue עוזר להשיג יעדים?
זה משתנה קצת בהתאם למה שהמטרה שלך בעצם, אבל באופן כללי, אתה קושר בלוקים של קוד ל-HTML divs. מתודולוגיה זו מקלה על הכנסת אינטראקטיביות ותוכן דינמי מאשר עם HTML, CSS ו-JavaScript רגילים.
מצד שני, אתה לא באמת יכול לעשות יותר ב-Vue ממה שאתה יכול על ידי שימוש בדרכים הקונבנציונליות יותר. השימוש ב-Vue הוא פשוט עניין של להקל עליכם בשלב הפיתוח, אך אין לו השפעה רבה על התוצאה הסופית, מלבד השפעה קטנה על הביצועים עקב טעינת קוד המסגרת.
יתרון נוסף של Vue הוא שהוא מספק מודולריות, כלומר אתה יכול לעשות שימוש חוזר ברכיבים שאתה מפתח במספר פרויקטים.
האם ל-Vue יש טריקים מגניבים בשרוול?
זה בהחלט כן, והטוב שבהם הוא אפקטי מעבר מובנים, המאפשרים לך להשתלט על מה שאחריםwise להיות מבני CSS ו-JavaScript עתירי קוד תוך שימוש בשורה או שתיים בלבד של קוד. זה חוסך לך זמן ומאמץ בעת יצירת האפליקציות שלך.
תכונה שימושית נוספת היא עיבוד מקורי עבור סוגי מכשירים ספציפיים כגון אנדרואיד ו-iOS, כך שתוכל לכוונן את היישומים שלך למכשירים שהם פועלים עליהם ללא הרבה עבודה נוספת.
תחילת עבודה
כפי שצוין קודם לכן, קל ללמוד את Vue, אבל זו לא שפת מתחילים. אתה עדיין צריך לדעת את הדרך שלך בתוך בלוק קוד.
הבעיה היא שכמו רוב המסגרות, התיעוד מאוד עצלן, ובעיקר מוקדש לשכנע אותך להשתמש בו. הרבה פחות תשומת לב ניתנת בתיעוד להסבר איך הכל עובד או למה אתה עושה דברים בצורה מסוימת. כמעט כל דוגמה רשמית של מסגרת שנוצרה אי פעם משאירה תוכן חיוניformatיון שאתה צריך לחטט בו במשך שעות כדי לגלות. זה פגם משותף גם לתיעוד ולדוגמאות של Vue.
כדי שיהיה קל יותר להבין מה אתה באמת צריך לעשות כדי ליצור מחדש את הפרויקט הזה, אלה השלבים הנדרשים:
1. הוסף סקריפט המפנה ל-vue.js
לאופטימיזציה של מהירות, עדיף לכלול את זה אחרי כל תוכן הדף שלך, אבל ממש לפני תג הגוף הסוגר במקור ה-HTML. ייתכן שיש לך גם משאבי דפים אחרים שנטענים בחלק זה, וסדר העדיפות של הטעינה קובע איזה סדר עליך להוסיף כל משאב.
הנה דוגמה של הכללת vue.js מ-CDN:
והנה דוגמה של הכללת vue.js מתוך ספרייה בשרת שלך:
ללא התייחסות זו ל-vue.js, שום דבר הקשור ל-Vue לא יכול לקרות.
2. הוסף את רכיבי Vue לגוף ה-HTML שלך
זה מה שקורה עם הקוד הזה:
לעת עתה זה לא הגיוני במיוחד, אבל החלק של Vue הוא אלמנט ה-"demo-grid" הריק, בתוספת תוספת של "v-directive" לקלט השאילתה (במקרה זה הוא "v-model" ", המשמש לקשירת קוד Vue ליצירת תשומות).
3. אם הפרויקט דורש תבנית רכיב, הוסף זאת לגוף ה-HTML
קטע קוד זה יוצא דופן מכיוון שהוא נראה כמו HTML רגיל בתוך תג סקריפט, מה שיבלבל את רוב תוכנות עריכת ה-HTML (שים לב שצבעי המחוונים שגויים במקומות מסוימים).
4. הוסף את מופע Vue
זה אמור להיות אחד הדברים האחרונים שיופיעו בדף, מכיוון שהוא מבצע משימת רינדור דינמית. זה מספק כמה יתרונות אופטימיזציה על פני הוספתו מוקדם יותר בדף.
- שורה 46 מציינת שהדפדפן צריך לחפש רכיב בדף שנקרא "demo-grid", ושורה 47 מציינת שיש להשתמש ב-"#grid-template" כתבנית עבור הרכיב (זהו קוד התבנית שנוסף בשלב 3 משורה 9 עד שורה 30).
- בלוק משורה 48 עד שורה 52 מגדיר את המאפיינים של הרכיב.
- שורות 53 עד 62 מגדירות פונקציה למיון הנתונים בטבלה.
- שורות 63 עד 85 מגדירות פונקציה לסינון נתונים (מתוצאות בשאילתת החיפוש).
- שורות 86 עד 90 מגדירות פונקציה לאותיות רישיות של המילים במערך נתונים.
- שורות 91 עד 97 מגדירות את שיטת מיון הנתונים.
5. הוסף את קוד ההשקה לפני תג הסקריפט הסוגר
אם השלמת את שלבים 1 עד 4 ופתחת את הקובץ בדפדפן, כל מה שתראה הוא תיבת החיפוש ותו לא. הסיבה לכך היא שכל מה שנדרש לבניית הטבלה הוגדר אך לא נוצר. אז בשלב 5, נוסיף את הקוד שיוצר למעשה את הטבלה שהוגדרה על ידי כל השלבים הקודמים.
- שורה 100 יוצרת אובייקט Vue חדש.
- שורה 101 מציינת לאיזה אלמנט לאגד את הפעולה.
- שורות 102 עד 111 מספקות את נתוני האובייקט שיהיו קשורים לאלמנט.
בדיקות
לאחר הגדרת ויצירת האובייקט הדרוש, כעת אתה מוכן לבדוק את התוצאה. התכונן להיות מבולבל, כי זה מה שאתה צריך לראות בדפדפן:
מה קורה? למה זה כל כך משעמם? זה בגלל שלא הוחל סטיילינג. אם נשתמש בעיצוב ברירת המחדל מהדוגמה של JSFiddle, הטבלה תיראה כך:
הקלדת כל דבר בתיבת החיפוש (לא תלוי רישיות) תסנן את התוצאות בהתאם:
לחיצה על כותרת עמודה תאפשר לך לשנות את סדר התצוגה. לדוגמה, לחיצה על כותרת העמודה "כוח" תשנה את התוצאות שיוצגו לפי סדר רמת ההספק.
שיפור והתאמה
בעיה נוספת עם דוגמאות מסגרת היא שהן בדרך כלל לא כוללות הרבהformatיון כדי לעזור למישהו שלא מכיר את בסיס הקוד להבין איך ליישם בשטח את מה שהם רואים בדוגמה. Vue עושה עבודה נהדרת בהשוואה ל-Bootstrap (שידוע לשמצה ב-under-informative), אבל עדיין משאיר הרבה שאלות ללא מענה.
להלן מספר שינויים שאנו עשויים לבצע ביישום זה כדי לשנות את מראהו ומה הוא עושה:
- סגננו את השולחן כ- Bootstrap stripeד טבלה
- שנה את מספר העמודות
- שנה את הנתונים למשהו אחר לגמרי
1. הוספת Bootstrap
2. עטיפה של האלמנט בטבלת Bootstrap
3. התאמת אלמנט השורש לשימוש במודל פריסת Bootstrap
4. עיצוב מחדש של החצים
5. שינוי הנתונים
6. בדיקה
- לא מסונן ולא ממוין
- ממוין לפי הנחיות (עולה)
- ממוין לפי משמש עבור (עולה)
- מסונן עבור "מותנה"
- מסונן לפי "מותנה" וממוין לפי הנחיות (עולה)
מחשבות סופיות
אני מקווה שמה שהיה ברור מהדוגמאות האלה הוא שבנו שני יישומים עם מראה ותוכן שונים מאוד מפרוסת קוד משותפת. עם Vue קל מאוד לעשות שימוש חוזר בקוד שלך במספר פרויקטים, ואפשר ליהנות מחסכון ניכר בזמן.
תמונת כותרת באדיבות אלכסנדר סאביץ'
תגובות תגובות 0