Artikoli

X'inhi Applikazzjoni ta' Paġna Unika u x'inhu Vue.js

Vue.js huwa qafas JavaScript ta' sors progressiv u miftuħ użat biex jiġu żviluppati interfaces tal-utent tal-web interattivi u applikazzjonijiet ta' paġna waħda.

Vue.js jiffoka prinċipalment fuq il-parti tal-viżwalizzazzjoni tal-applikazzjoni, imsejħa wkoll żvilupp front-end. Vue.js qed isir popolari jum b'jum għaliex huwa faċli ħafna li tintegra ma' proġetti u libreriji oħra. Huwa sempliċi ħafna biex tinstalla u tuża.

X'inhu Vue.js?

Vue.js huwa qafas JavaScript progressiv sors miftuħ użat għall-iżvilupp ta' interfaces tal-utent tal-web interattivi u applikazzjonijiet ta' paġna waħda (SPAs). Vue.js huwa komunement imsejjaħ Vue u ppronunzjat bħala "view.js" jew "view".

X'inhi Applikazzjoni għal Paġna Singola (SPA)?

Applikazzjoni ta' Paġna Unika jew SPA hija applikazzjoni tal-web jew websajt li tipprovdi lill-utenti b'esperjenza bla xkiel ħafna, li tirreaġixxi u veloċi simili għal applikazzjoni tad-desktop. Applikazzjoni ta' paġna waħda fiha menu, buttuni u blokki fuq paġna waħda. Meta utent jikklikkja fuq waħda minnhom, jikteb b'mod dinamiku l-paġna attwali aktar milli jgħabbi paġni ġodda sħaħ minn server. Din hija r-raġuni wara l-veloċità reattiva tagħha.

Vue hija bażikament mibnija għall-iżvilupp tal-frontend, għalhekk trid tieħu ħsieb ħafna fajls HTML, JavaScript u CSS. Vue.js jagħmilha faċli għall-utenti biex jestendu l-HTML b'attributi HTML imsejħa direttivi. Vue.js jipprovdi direttivi integrati u bosta direttivi definite mill-utent biex ittejjeb il-funzjonalità tal-applikazzjonijiet HTML.

Karatteristiċi ta' Vue.js

Hawn taħt hawn il-lista tal-aktar karatteristiċi importanti ta' Vue.js:

Komponenti

Il-komponenti Vue.js huma waħda mill-karatteristiċi importanti ta 'dan il-qafas. Jintużaw biex jestendu elementi HTML bażiċi biex jinkapsulaw kodiċi li jista 'jerġa' jintuża. Tista' toħloq elementi tad-dwana li jistgħu jerġgħu jintużaw fl-applikazzjonijiet Vue.js li aktar tard jistgħu jerġgħu jintużaw f'HTML.

templates

Vue.js jipprovdi mudelli bbażati fuq HTML li jistgħu jintużaw biex jassoċjaw id-DOM mogħtija mad-dejta tal-istanza Vue. Il-mudelli Vue kollha huma HTML validi li jistgħu jiġu analizzati minn browsers u parsers HTML konformi mal-ispeċifikazzjonijiet. Vue.js jiġbor mudelli f'funzjonijiet ta' rendering DOM Virtwali. Vue tirrendi l-komponenti fil-memorja DOM virtwali qabel ma jġedded il-browser. Vue tista 'wkoll tikkalkula n-numru minimu ta' komponenti biex terġa 'tirrendi u tapplika l-ammont minimu ta' manipulazzjoni DOM meta tbiddel l-istat tal-applikazzjoni.

Reattività

Vue tipprovdi sistema ta' rispons li tuża oġġetti JavaScript sempliċi u tottimizza r-rendi mill-ġdid. F'dan il-proċess, kull komponent iżomm rekord tad-dipendenzi reattivi tiegħu, sabiex is-sistema tkun taf eżattament meta u liema komponenti terġa' tirrendi.

Rotot

In-navigazzjoni tal-paġna ssir bl-għajnuna ta 'vu-router. Tista' tuża l-librerija ta' vue-router appoġġjata uffiċjalment għall-applikazzjoni ta' paġna waħda tiegħek.

Transizzjonijiet

Vue jippermettilek tuża effetti ta' transizzjoni differenti meta l-elementi jiddaħħlu, jiġu aġġornati jew imneħħija mid-DOM.

Kif tinstalla Vue.js?

Hemm diversi metodi biex tuża Vue.js. Tista' tinstallah billi tmur fis-sit uffiċjali tagħha jew tista' tibda tuża l-fajl Vue.js mil-librerija CDN ukoll. Hawn huma xi modi kif tuża Vue.js fil-proġett tiegħek.

Direttament fil-fajl HTML

Jekk trid tuża t-tikketta <script> ta' Vue.js direttament fil-fajl HTML tiegħek, trid tniżżlu mill-websajt uffiċjali.

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

Ejja mmorru fil-websajt uffiċjali Vue.js https://vuejs.org/v2/guide/installation.html biex tniżżel vue.js skond il-bżonnijiet tiegħek.

Bl-użu tas-CDN

Tista' wkoll tuża l-fajl Vue.js minn CDN, fl-applikazzjoni tiegħek. Uża l-link https://unpkg.com/vue@3/dist/vue.global.js ġewwa l-element <script>, kif hawn taħt:

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

Benefiċċji tal-użu ta' Vue.js

Vue.js hija waħda mill-aħħar teknoloġiji tas-softwer li tintuża ħafna għall-iżvilupp tal-web u l-bini ta’ Applikazzjonijiet ta’ Paġna Unika (SPA). Kif tista 'raden mill-isem, huwa l-aktar użat għall-UI jew in-naħa tal-wiri tal-proġett.

Ejja naraw il-benefiċċji li tuża Vue.js fil-proġett tiegħek:

Daqs żgħir ħafna

Wieħed mill-akbar vantaġġi ta 'Vue.js huwa li huwa żgħir ħafna fid-daqs. Is-suċċess ta 'qafas JavaScript jiddependi ħafna fuq id-daqs tiegħu u dan il-plugin eċċitanti JavaScript huwa biss 18-21KB, sabiex inti tista' faċilment tniżżel u tużah fl-ebda ħin.

Newsletter dwar l-innovazzjoni
Titlifx l-aktar aħbarijiet importanti dwar l-innovazzjoni. Irreġistra biex tirċevihom bl-email.
Faċli biex tinftiehem u tikkodifika

Il-qafas Vue.js għandu struttura sempliċi ħafna u huwa faċli ħafna biex jinftiehem. Hija waħda mir-raġunijiet għall-popolarità ta 'dan il-qafas. Jekk inti familjari ma 'HTML u JavaScript, tista' faċilment tikkodifika f'Vue.js. L-utenti jistgħu faċilment iżidu Vue.js mal-proġett tal-web tagħhom minħabba l-istruttura sempliċi tiegħu u jiżviluppaw applikazzjonijiet.

Integrazzjoni sempliċi ma 'applikazzjonijiet eżistenti

Vue.js għandu ħafna komponenti għal kollox u jista 'jiġi integrat malajr ħafna ma' applikazzjonijiet eżistenti. Tista' tintegraha ma' kwalunkwe applikazzjoni miktuba f'JavaScript.

Flessibbli min-natura

In-natura flessibbli ta 'Vue.js tagħmilha faċli wkoll għall-iżviluppaturi ta' React.js, Angular.js, u kwalunkwe oqfsa JavaScript ġdida oħra biex jifhmu. Tipprovdi ħafna flessibilità biex tuża nodi virtwali biex tikteb fajls HTML, fajls JavaScript u fajls JavaScript pur.

Komponenti

Tista 'toħloq elementi personalizzati li jistgħu jerġgħu jintużaw fl-applikazzjonijiet Vue.js.

Dokumentazzjoni sempliċi, kompluta u dettaljata

Vue.js jipprovdi dokumentazzjoni sempliċi ħafna, kompluta u dettaljata, sabiex l-iżviluppaturi li ma tantx għandhom idea dwar HTML u JavaScript jistgħu jużawha biex jipprogrammaw.

DOM virtwali

Vue.js juża DOM virtwali simili għal oqfsa eżistenti oħra bħal ReactJS, Ember, eċċ. Id-DOM virtwali hija rappreżentazzjoni ħafifa ta' siġra fil-memorja tad-DOM HTML oriġinali u hija aġġornata mingħajr ma taffettwa d-DOM inizjali.

Komunikazzjoni f'żewġ direzzjonijiet

Vue.js jipprovdi komunikazzjoni f'żewġ direzzjonijiet bl-arkitettura tagħha tal-Mudell View View Model (MVVM) li tissimplifika l-immaniġġjar tal-blokki HTML.

Rendiment dikjarattiv Vue.js

Il-qafas jiġi b'sistema li tippermettilna nirrendu dejta b'mod dikjarattiv lid-DOM billi tuża sintassi tal-mudell sempliċi u sempliċi.

Hawn eżempju:

<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>

Il-qafas Vue.js jippermettilna defitiegħi attributi HTML imsejħa direttivi, li huma użati biex jipprovdu funzjonalità għall-applikazzjonijiet HTML.

Hemm żewġ tipi ta’ direttivi f’Vue.js:

  • direttivi integrati e
  • direttivi definisted mill-utent.

Vue.js juża ċingi doppji {{}} bħala placeholders għad-dejta, u d-direttivi Vue.js huma attributi HTML li jużaw prefiss v.

App Vue tgħaqqad ma' element DOM wieħed u tikkontrollaha bis-sħiħ. Fl-eżempju t'hawn fuq, huwa #app.

Bil-Vue nistgħu nqisu l-HTML bħala l-punt tad-dħul, u kull ħaġa oħra jiġri ġewwa l-istanza Vue maħluqa.
Ejja naraw eżempju fejn nippruvaw l-irbit ta' elementi u attributi:

<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>  

F'dan il-każ, l-attribut v-bind il-ġdid huwa d-direttiva. Id-direttivi jintużaw bi prefiss v biex jindikaw li huma attributi uniċi pprovduti minn Vue, u jintużaw biex japplikaw imġieba reattiva speċjali għad-DOM mogħtija.

Ir-riżultat tal-eżempju huwa dan li ġej

Ercole Palmeri

Newsletter dwar l-innovazzjoni
Titlifx l-aktar aħbarijiet importanti dwar l-innovazzjoni. Irreġistra biex tirċevihom bl-email.

Artikoli riċenti

Il-Futur qiegħed Hawnhekk: Kif l-Industrija tat-Tbaħħir qed tirrivoluzzjona l-Ekonomija Globali

Is-settur navali huwa qawwa ekonomika globali vera, li navigat lejn suq ta’ 150 biljun...

1 Mejju 2024

Il-pubblikaturi u l-OpenAI jiffirmaw ftehimiet biex jirregolaw il-fluss tal-informazzjoni pproċessata mill-Intelliġenza Artifiċjali

It-Tnejn li għadda, il-Financial Times ħabbret ftehim mal-OpenAI. FT tagħti liċenzja għall-ġurnaliżmu ta’ klassi dinjija tagħha...

April 30 2024

Ħlasijiet Online: Hawn Kif Is-Servizzi ta' Streaming Jagħmel Inti Tħallas Għal Dejjem

Miljuni ta 'nies iħallsu għal servizzi ta' streaming, iħallsu miżati ta 'abbonament ta' kull xahar. Hija opinjoni komuni li inti...

April 29 2024

Veeam għandu l-aktar appoġġ komprensiv għar-ransomware, mill-protezzjoni għar-rispons u l-irkupru

Coveware minn Veeam se jkompli jipprovdi servizzi ta' rispons għal inċidenti ta' estorsjoni ċibernetika. Coveware se joffri forensiċi u kapaċitajiet ta' rimedju...

April 23 2024