ארטיקלען

וואָס איז אַ איין בלאַט אַפּלאַקיישאַן און וואָס איז Vue.js

Vue.js איז אַ פּראָגרעסיוו און אָפֿן מקור דזשאַוואַסקריפּט פריימווערק געניצט צו אַנטוויקלען ינטעראַקטיוו וועב באַניצער ינטערפייסיז און איין בלאַט אַפּלאַקיישאַנז.

Vue.js פאָוקיסיז דער הויפּט אויף די וויזשוואַלאַזיישאַן טייל פון די אַפּלאַקיישאַן, אויך גערופן פראָנט-סוף אַנטוויקלונג. Vue.js ווערט פאָלקס טאָג צו טאָג ווייַל עס איז זייער גרינג צו ויסשטימען מיט אנדערע פּראַדזשעקס און לייברעריז. עס איז זייער פּשוט צו ינסטאַלירן און נוצן.

וואָס איז Vue.js?

Vue.js איז אַ פּראָגרעסיוו דזשאַוואַסקריפּט פריימווערק עפענען מקור געניצט פֿאַר דעוועלאָפּינג ינטעראַקטיוו וועב באַניצער ינטערפייסיז און איין בלאַט אַפּלאַקיישאַנז (ספּאַס). Vue.js איז אָפט ריפערד צו ווי Vue און פּראַנאַונסט ווי "view.js" אָדער "view".

וואָס איז אַ איין בלאַט אַפּלאַקיישאַן (SPA)?

א איין בלאַט אַפּלאַקיישאַן אָדער ספּאַ איז אַ וועב אַפּלאַקיישאַן אָדער וועבזייטל וואָס גיט ניצערס אַ זייער גלאַט, אָפּרופיק און שנעל דערפאַרונג ענלעך צו אַ דעסקטאַפּ אַפּלאַקיישאַן. א איין בלאַט אַפּלאַקיישאַן כּולל אַ מעניו, קנעפּלעך און בלאַקס אויף אַ איין בלאַט. ווען אַ באַניצער קליקס אויף איינער פון זיי, עס דינאַמיקאַללי רירייט די קראַנט בלאַט אלא ווי לאָודינג גאַנץ נייַע בלעטער פֿון אַ סערווער. דאָס איז די סיבה פֿאַר זייַן אָפּרופיק גיכקייַט.

Vue איז בייסיקלי דעוועלאָפּעד פֿאַר פראָנטענד אַנטוויקלונג, אַזוי עס דאַרף אַ פּלאַץ פון HTML, דזשאַוואַסקריפּט און CSS טעקעס. Vue.js מאכט עס גרינג פֿאַר יוזערז צו פאַרברייטערן HTML מיט HTML אַטריביוץ גערופן דיירעקטיווז. Vue.js גיט געבויט-אין דיירעקטיווז און פילע דיירעקטיווז defiניט דורך דער באַניצער צו פֿאַרבעסערן די פאַנגקשאַנאַליטי פון HTML אַפּלאַקיישאַנז.

פֿעיִקייטן פון Vue.js

ונטער איז די רשימה פון די מערסט וויכטיק פֿעיִקייטן פון Vue.js:

קאָמפּאָנענט

Vue.js קאַמפּאָונאַנץ זענען איינער פון די וויכטיק פֿעיִקייטן פון דעם פריימווערק. זיי זענען געניצט צו פאַרברייטערן יקערדיק HTML עלעמענטן צו ענקאַפּסאַלייט ריוזאַבאַל קאָד. איר קענען מאַכן ריוזאַבאַל מנהג עלעמענטן אין Vue.js אַפּלאַקיישאַנז וואָס קענען שפּעטער זיין ריוזד אין HTML.

טעמפּלאַטעס

Vue.js גיט HTML-באזירט טעמפּלאַטעס וואָס קענען זיין גענוצט צו פאַרבינדן די רענדערד DOM מיט Vue בייַשפּיל דאַטן. כל Vue טעמפּלאַטעס זענען גילטיק HTML וואָס קענען זיין פּאַרסעד דורך ספּעק-געהאָרכיק בראַוזערז און HTML פּאַרסערס. Vue.js קאַמפּיילז מאָדעלס אין ווירטואַל DOM רענדערינג פאַנגקשאַנז. Vue רענדערז קאַמפּאָונאַנץ אין ווירטואַל DOM זכּרון איידער רעפרעשינג דעם בלעטערער. Vue קענען אויך רעכענען די מינימום נומער פון קאַמפּאָונאַנץ צו שייַעך-פאָרפירן און צולייגן די מינימום סומע פון ​​DOM מאַניפּיאַליישאַן ווען טשאַנגינג אַפּלאַקיישאַן שטאַט.

ריאַקטיוואַטי

Vue גיט אַ ריספּאַנסיוונאַס סיסטעם וואָס ניצט פּשוט דזשאַוואַסקריפּט אַבדזשעקץ און אָפּטימיזעס שייַעך-רענדערינג. אין דעם פּראָצעס, יעדער קאָמפּאָנענט האלט זיין ריאַקטיוו דיפּענדאַנסיז, אַזוי די סיסטעם ווייסט פּונקט ווען און וואָס קאַמפּאָונאַנץ צו שייַעך-פאָרפירן.

רוטינג

בלאַט נאַוויגאַציע איז דורכגעקאָכט מיט די הילף פון vue-router. איר קענט נוצן די אַפישאַלי געשטיצט vue-router ביבליאָטעק פֿאַר דיין איין בלאַט אַפּלאַקיישאַן.

טראַנזישאַנז

Vue אַלאַוז איר צו נוצן פאַרשידענע יבערגאַנג יפעקץ ווען עלעמענטן זענען ינסערטאַד, דערהייַנטיקט אָדער אַוועקגענומען פון די DOM.

ווי צו ינסטאַלירן Vue.js?

עס זענען עטלעכע מעטהאָדס צו נוצן Vue.js. איר קענען ינסטאַלירן עס דורך גיין צו זיין באַאַמטער פּלאַץ אָדער איר קענען אָנהייבן ניצן די Vue.js טעקע פֿון די CDN ביבליאָטעק. דאָ זענען עטלעכע וועגן צו נוצן Vue.js אין דיין פּרויעקט.

גלייך אין די HTML טעקע

אויב איר ווילן צו נוצן דעם קוויטל <script> פון Vue.js גלייַך אין דיין HTML טעקע, איר דאַרפֿן צו אָפּלאָדירן עס פֿון דער באַאַמטער וועבזייטל.

<html>  
   <head>  
      <script type = "text/javascript" src = "vue.min.js"></script>  
   </head>  
   <body>
   </body>  
</html>  

לאָמיר גיין צו דער באַאַמטער וועבזייטל פון Vue.js https://vuejs.org/v2/guide/installation.html צו אָפּלאָדירן vue.js לויט דיין באדערפענישן.

ניצן CDN

איר קענט אויך נוצן די Vue.js טעקע פֿון CDN אין דיין אַפּלאַקיישאַן. ניצן די לינק https://unpkg.com/vue@3/dist/vue.global.js אין דעם עלעמענט <script>, ווי אונטן:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

בענעפיץ פון ניצן Vue.js

Vue.js איז איינער פון די לעצטע ווייכווארג טעקנאַלאַדזשיז וויידלי געניצט פֿאַר וועב אַנטוויקלונג און בנין איין בלאַט אַפּפּליקאַטיאָנס (SPA). ווי איר קענען טרעפן דעם נאָמען, עס איז מערסטנס געניצט פֿאַר וי אָדער אַרויסווייַזן זייַט פון די פּרויעקט.

לאָמיר זען די בענעפיץ פון ניצן Vue.js אין דיין פּרויעקט:

זייער קליין גרייס

איינער פון די ביגאַסט אַדוואַנטידזשיז פון Vue.js איז אַז עס איז זייער קליין אין גרייס. די הצלחה פון אַ דזשאַוואַסקריפּט פריימווערק דעפּענדס פיל אויף זיין גרייס און דעם יקסייטינג דזשאַוואַסקריפּט פּלוגין איז בלויז 18-21KB, אַזוי איר קענען זייער לייכט אראפקאפיע און נוצן עס אין קיין צייט.

כידעש נוזלעטער
דו זאלסט נישט פאַרפירן די מערסט וויכטיק נייַעס וועגן כידעש. צייכן אַרויף צו באַקומען זיי דורך E- בריוו.
גרינג צו פֿאַרשטיין און קאָד

די Vue.js פריימווערק האט אַ זייער פּשוט סטרוקטור און איז זייער גרינג צו פֿאַרשטיין. דאָס איז איינער פון די סיבות פֿאַר די פּאָפּולאַריטעט פון דעם פריימווערק. אויב איר זענט באַקאַנט מיט HTML און דזשאַוואַסקריפּט, איר קענען לייכט קאָד אין Vue.js. יוזערז קענען לייכט לייגן Vue.js צו זייער וועב פּרויעקט רעכט צו זיין פּשוט סטרוקטור און אַנטוויקלען אַפּלאַקיישאַנז.

פּשוט ינאַגריישאַן מיט יגזיסטינג אַפּלאַקיישאַנז

Vue.js האט פילע קאַמפּאָונאַנץ פֿאַר אַלץ און קענען זיין ינאַגרייטיד זייער געשווינד מיט יגזיסטינג אַפּלאַקיישאַנז. איר קענען ויסשטימען עס מיט קיין אַפּלאַקיישאַן געשריבן אין דזשאַוואַסקריפּט.

פלעקסאַבאַל דורך נאַטור

די פלעקסאַבאַל נאַטור פון Vue.js אויך מאכט עס גרינג פֿאַר דעוועלאָפּערס פון React.js, Angular.js און קיין אנדערע נייַ דזשאַוואַסקריפּט פראַמעוואָרקס צו פֿאַרשטיין. עס גיט אַ פּלאַץ פון בייגיקייט צו נוצן ווירטואַל נאָודז צו שרייַבן HTML טעקעס, דזשאַוואַסקריפּט טעקעס און ריין דזשאַוואַסקריפּט טעקעס.

קאָמפּאָנענט

איר קענען מאַכן מנהג עלעמענטן וואָס זענען ריוזאַבאַל אין Vue.js אַפּלאַקיישאַנז.

פּשוט, גאַנץ און דיטיילד דאַקיומענטיישאַן

Vue.js גיט זייער פּשוט, גאַנץ און דיטיילד דאַקיומענטיישאַן, אַזוי דעוועלאָפּערס וואָס האָבן אַ ביסל געדאַנק וועגן HTML און דזשאַוואַסקריפּט קענען נוצן עס צו פּראָגראַם.

ווירטועל דאָם

Vue.js ניצט ווירטואַל DOM ענלעך צו אנדערע יגזיסטינג פראַמעוואָרקס ווי ReactJS, Ember, עטק. די ווירטועל DOM איז אַ לייטווייט אין-זיקאָרן בוים פאַרטרעטונג פון דער אָריגינעל HTML DOM און איז דערהייַנטיקט אָן אַפעקטינג די ערשט DOM.

צוויי-וועג קאָמוניקאַציע

Vue.js גיט צוויי-וועג קאָמוניקאַציע מיט זיין מאָדעל View View מאָדעל (MVVM) אַרקאַטעקטשער וואָס סימפּלאַפייז די האַנדלינג פון HTML בלאַקס.

Vue.js דעקלאַראַטיווע רענדערינג

די פריימווערק קומט מיט אַ סיסטעם וואָס אַלאַוז אונדז צו דעקלאַראַטיוועלי רענדערן דאַטן צו די DOM ניצן פּשוט און סטרייטפאָרווערד מאָדעל סינטאַקס.

דאָ איז אַ בייַשפּיל:

<body>
<div id="app">  
  {{ message }}  
</div>

<script>
var app = new Vue({  
  el: '#app',  
  data: {  
    message: 'This is a simple Vue.js Declarative Rendering example!'  
  }  
})  
</script>
</body>

די Vue.js פריימווערק אַלאַוז אונדז צו defiניט קיין HTML אַטריביוץ גערופן דיירעקטיווז, וואָס זענען געניצט צו צושטעלן פאַנגקשאַנאַליטי צו HTML אַפּלאַקיישאַנז.

עס זענען צוויי טייפּס פון דיירעקטיווז אין Vue.js:

  • ינאַגרייטיד דיירעקטיווז E
  • דיירעקטיווז defiנישעד דורך דער באַניצער.

Vue.js ניצט טאָפּל ברייסאַז {{}} ווי פּלאַסכאָולדערז פֿאַר דאַטן, און Vue.js דיירעקטיווז זענען HTML אַטריביוץ וואָס נוצן אַ v- פּרעפיקס.

א Vue אַפּ קאַנעקץ צו אַ איין DOM עלעמענט און גאָר קאָנטראָלס עס. אין די אויבן בייַשפּיל, עס איז #אַפּ.

מיט Vue מיר קענען באַטראַכטן HTML ווי די פּאָזיציע פונט, און אַלץ אַנדערש כאַפּאַנז אין די באשאפן וויו בייַשפּיל.
לאָמיר זען אַ בייַשפּיל ווו מיר פּרובירן עלעמענט און אַטריביוט ביינדינג:

<html>  
    <head>  
        <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    </head>  
    <body>         
        <div id="app-2">  
        <span v-bind:title="message">  
            Hover mouse over me for a few seconds  
            and see a dynamically bound title which I have set!  
        </span>  
        </div>          
        <script>
           var app2 = new Vue({  
           el: '#app-2',  
           data: {  
           message: 'You loaded this page on ' + new Date().toLocaleString()  
                 }  
           })  
       </script>  
    </body>  
</html>  

אין דעם פאַל, די נייַע v-bind אַטריביוט איז די דירעקטיוו. דיירעקטיווז זענען געניצט מיט אַ V- פּרעפיקס צו אָנווייַזן אַז זיי זענען יינציק אַטריביוץ צוגעשטעלט דורך Vue, און זענען געניצט צו צולייגן ספּעציעל אָפּרופיק נאַטור צו די רענדערד DOM.

דער רעזולטאַט פון דעם בייַשפּיל איז די פאלגענדע

Ercole Palmeri

כידעש נוזלעטער
דו זאלסט נישט פאַרפירן די מערסט וויכטיק נייַעס וועגן כידעש. צייכן אַרויף צו באַקומען זיי דורך E- בריוו.

לעצטע ארטיקלען

Veeam פֿעיִקייטן די מערסט פולשטענדיק שטיצן פֿאַר ראַנסאָמוואַרע, פֿון שוץ צו ענטפער און אָפּזוך

Coveware דורך Veeam וועט פאָרזעצן צו צושטעלן ענטפער באַדינונגס פֿאַר סייבער יקסטאָרשאַן אינצידענט. קאָוועוואַרע וועט פאָרשלאָגן פאָרענסיקס און רימעדייישאַן קייפּאַבילאַטיז ...

קסנומקס אפריל קסנומקס

גרין און דיגיטאַל רעוואלוציע: ווי פּרידיקטיוו וישאַלט איז טראַנספאָרמינג די אָיל און גאַז אינדוסטריע

פּרידיקטיוו וישאַלט איז רעוואַלושאַנייזינג די ייל & גאַז סעקטאָר, מיט אַן ינאַווייטיוו און פּראָואַקטיוו צוגאַנג צו פאַבריק פאַרוואַלטונג.…

קסנומקס אפריל קסנומקס

וק אַנטיטראַסט רעגולאַטאָר רייזאַז ביגטעטש שרעק איבער GenAI

די UK CMA האט ארויס אַ ווארענונג וועגן ביג טעק ס נאַטור אין די קינסטלעך סייכל מאַרק. דאָרט…

קסנומקס אפריל קסנומקס

Casa Green: ענערגיע רעוואָלוציע פֿאַר אַ סאַסטיינאַבאַל צוקונפֿט אין איטאליע

די "קאַסע גרין" דעקרעט, פארמולירט דורך די אייראפעישע יוניאַן צו פאַרבעסערן די ענערגיע עפעקטיווקייַט פון בנינים, האט פארענדיקט זיין לעגיסלאַטיווע פּראָצעס מיט ...

קסנומקס אפריל קסנומקס

לייענען כידעש אין דיין שפּראַך

כידעש נוזלעטער
דו זאלסט נישט פאַרפירן די מערסט וויכטיק נייַעס וועגן כידעש. צייכן אַרויף צו באַקומען זיי דורך E- בריוו.

גיי אונדז