Izihloko

Kuyini Isicelo Sekhasi Elilodwa futhi iyini i-Vue.js

I-Vue.js iwuhlaka oluqhubekayo nomthombo ovulekile lwe-JavaScript olusetshenziswa ukuthuthukisa izixhumanisi zomsebenzisi wewebhu ezisebenzisanayo nezinhlelo zokusebenza zekhasi elilodwa.

I-Vue.js igxile kakhulu engxenyeni yokuboniswa yohlelo, ebizwa nangokuthi ukuthuthukiswa kwesiphetho. I-Vue.js ithola ukuduma usuku nosuku ngoba kulula kakhulu ukuyihlanganisa namanye amaphrojekthi namalabhulali. Kulula kakhulu ukufaka nokusebenzisa.

Yini i-Vue.js?

I-Vue.js iwuhlaka lwe-JavaScript oluqhubekayo umthombo ovulekile esetshenziselwa ukuthuthukisa ukuxhumana komsebenzisi wewebhu okusebenzisanayo kanye nezinhlelo zokusebenza zekhasi elilodwa (ama-SPA). I-Vue.js ijwayele ukubizwa ngokuthi i-Vue futhi ibizwe ngokuthi "view.js" noma "buka".

Kuyini Isicelo Sekhasi Elilodwa (SPA)?

Isicelo Sekhasi Elilodwa noma i-SPA wuhlelo lwewebhu noma iwebhusayithi enikeza abasebenzisi ulwazi olubushelelezi, oluphendulayo kanye nolusheshayo olufana nohlelo lokusebenza lwedeskithophu. Uhlelo lokusebenza lwekhasi elilodwa luqukethe imenyu, izinkinobho namabhulokhi ekhasini elilodwa. Uma umsebenzisi achofoza eyodwa yazo, ibhala kabusha ikhasi lamanje kunokulayisha amakhasi amasha aphelele asuka kuseva. Lesi yisizathu ngemuva kwejubane layo lokuphendula.

I-Vue yakhelwe ukuthuthukiswa kwe-frontend, ngakho-ke kufanele iphathe amafayela amaningi e-HTML, JavaScript kanye ne-CSS. I-Vue.js yenza kube lula kubasebenzisi ukunweba i-HTML ngezibaluli ze-HTML ezibizwa ngokuthi iziqondiso. I-Vue.js inikeza iziqondiso ezakhelwe ngaphakathi neziqondiso eziningi definite ngumsebenzisi ukuthuthukisa ukusebenza kwezinhlelo zokusebenza ze-HTML.

Izici ze-Vue.js

Ngezansi uhlu lwezici ezibaluleke kakhulu ze-Vue.js:

Izakhi

Izingxenye ze-Vue.js zingenye yezici ezibalulekile zalolu hlaka. Zisetshenziselwa ukunweba izinto eziyisisekelo ze-HTML ukuze zihlanganise ikhodi esebenziseka kabusha. Ungakha izici ngokwezifiso ezisebenziseka kabusha ezinhlelweni ze-Vue.js ezingaphinde zisetshenziswe ku-HTML.

Izibonisi

I-Vue.js inikeza izifanekiso ezisekelwe ku-HTML ezingasetshenziswa ukuhlobanisa i-DOM enikeziwe nedatha yesibonelo se-Vue. Zonke izifanekiso ze-Vue ziyi-HTML evumelekile engacutshungulwa iziphequluli ezithobela imithetho ethile kanye nabahlaluli be-HTML. I-Vue.js ihlanganisa amamodeli abe imisebenzi yokunikezela ye-Virtual DOM. I-Vue inikela izingxenye kumemori ye-DOM ebonakalayo ngaphambi kokuvuselela isiphequluli. I-Vue ingase futhi ibale inombolo encane yezingxenye ezizonikezwa kabusha futhi isebenzise inani elincane lokukhohlisa kwe-DOM lapho kushintsha isimo sohlelo lokusebenza.

Ukusebenza kabusha

I-Vue inikeza isistimu yokusabela esebenzisa izinto ezilula ze-JavaScript futhi ithuthukise ukuphinda kunikezelwe. Kule nqubo, ingxenye ngayinye ilandelela ukuncika kwayo okusebenzayo, ngakho isistimu yazi kahle ukuthi iziphi izingxenye okufanele ziphinde zinikezwe nini futhi nini.

Ukuhamba

Ukuzulazula kwekhasi kwenziwa ngosizo lwe-vue-router. Ungasebenzisa ilabhulali ye-vue-router esekelwa ngokusemthethweni kuhlelo lwakho lokusebenza lwekhasi elilodwa.

Uguquko

I-Vue ikuvumela ukuthi usebenzise imiphumela ehlukile yoshintsho lapho izakhi zifakiwe, zibuyekezwa noma zikhishwa ku-DOM.

Ifakwa kanjani i-Vue.js ?

Kunezindlela ezimbalwa zokusebenzisa i-Vue.js. Ungayifaka ngokuya kusayithi yayo esemthethweni noma ungaqala ukusebenzisa ifayela le-Vue.js elisuka kulabhulali ye-CDN. Nazi ezinye izindlela zokusebenzisa i-Vue.js kuphrojekthi yakho.

Ngqo kufayela le-HTML

Uma ufuna ukusebenzisa ithegi <script> ye-Vue.js ngqo kufayela lakho le-HTML, udinga ukuyilanda kuwebhusayithi esemthethweni.

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

Ake siye kuwebhusayithi esemthethweni ye-Vue.js https://vuejs.org/v2/guide/installation.html ukulanda i-vue.js ngokwezidingo zakho.

Ukusebenzisa i-CDN

Ungasebenzisa futhi ifayela le-Vue.js elivela ku-CDN, ohlelweni lwakho lokusebenza. Sebenzisa isixhumanisi https://unpkg.com/vue@3/dist/vue.global.js ngaphakathi kwe-elementi <script>, njengoba ngezansi:

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

Izinzuzo zokusebenzisa i-Vue.js

I-Vue.js ingobunye bobuchwepheshe besofthiwe bakamuva obusetshenziswa kabanzi ekuthuthukisweni kwewebhu kanye nokwakha Izicelo Zekhasi Elilodwa (SPA). Njengoba ungaqagela egameni, lisetshenziselwa kakhulu i-UI noma uhlangothi lokubonisa lwephrojekthi.

Ake sibone izinzuzo zokusebenzisa i-Vue.js kuphrojekthi yakho:

Usayizi omncane kakhulu

Enye yezinzuzo ezinkulu ze-Vue.js ukuthi incane kakhulu ngosayizi. Ukuphumelela kohlaka lwe-JavaScript kuncike kakhulu kusayizi walo futhi le plugin ye-JavaScript ethokozisayo ingu-18-21KB kuphela, ngakho-ke ungayilanda kalula futhi uyisebenzise ngokushesha.

Innovation newsletter
Ungaphuthelwa yizindaba ezibaluleke kakhulu zokuqamba. Bhalisa ukuze uthole nge-imeyili.
Kulula ukuyiqonda kanye nekhodi

Uhlaka lwe-Vue.js lunesakhiwo esilula kakhulu futhi kulula ukuluqonda. Kungesinye sezizathu zokuduma kwalolu hlaka. Uma ujwayele i-HTML ne-JavaScript, ungakwazi ukufaka ikhodi kalula ku-Vue.js. Abasebenzisi bangangeza kalula ama-Vue.js kuphrojekthi yabo yewebhu ngenxa yesakhiwo sayo esilula futhi bathuthukise izinhlelo zokusebenza.

Ukuhlanganiswa okulula nezinhlelo zokusebenza ezikhona

I-Vue.js inezingxenye eziningi zayo yonke into futhi ingahlanganiswa ngokushesha nezinhlelo ezikhona. Ungayihlanganisa nanoma yiluphi uhlelo lokusebenza olubhalwe ku-JavaScript.

Kuyavumelana nezimo ngokwemvelo

Ukuvumelana nezimo kwe-Vue.js futhi kwenza kube lula ngonjiniyela be-React.js, Angular.js, kanye nanoma yiziphi ezinye izinhlaka ze-JavaScript ezintsha ukuthi baziqonde. Inikeza ukuguquguquka okuningi kokusebenzisa ama-node abonakalayo ukuze ubhale amafayela e-HTML, amafayela e-JavaScript namafayela e-JavaScript ahlanzekile.

Izakhi

Ungakha izici ezingokwezifiso ezisebenziseka kabusha ezinhlelweni ze-Vue.js.

Amadokhumenti alula, aphelele futhi anemininingwane

I-Vue.js ihlinzeka ngemibhalo elula kakhulu, ephelele futhi enemininingwane, ngakho onjiniyela abangenalwazi olutheni nge-HTML ne-JavaScript bangayisebenzisa ukuhlela.

I-DOM ebonakalayo

I-Vue.js isebenzisa i-DOM ebonakalayo efana nezinye izinhlaka ezikhona njenge-ReactJS, i-Ember, njll. I-DOM ebonakalayo iwumfanekiso wesihlahla ongasindi enkumbulweni we-HTML DOM yasekuqaleni futhi ibuyekezwa ngaphandle kokuthinta i-DOM yokuqala.

Ukuxhumana okubili

I-Vue.js inikeza ukuxhumana okubili ngesakhiwo sayo se-Model View View Model (MVVM) esenza kube lula ukuphathwa kwamabhulokhi e-HTML.

Ukunikezwa kwesimemezelo kwe-Vue.js

Uhlaka luza nohlelo olusivumela ukuthi sinikeze idatha ngokudalula ku-DOM sisebenzisa i-syntax yemodeli elula neqondile.

Nasi isibonelo:

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

Uhlaka lwe-Vue.js luyasivumela ukuthi defiizici ezingenalutho ze-HTML ezibizwa ngokuthi iziqondiso, ezisetshenziselwa ukunikeza ukusebenza kuzinhlelo zokusebenza ze-HTML.

Kunezinhlobo ezimbili zeziqondiso ku-Vue.js:

  • iziqondiso ezididiyelwe e
  • iziqondiso defiikhishwe ngumsebenzisi.

I-Vue.js isebenzisa izikaki ezikabili {{}} njengezimeli zedatha, futhi iziqondiso ze-Vue.js ziyizibaluli ze-HTML ezisebenzisa isiqalo se-v.

Uhlelo lokusebenza lwe-Vue luxhuma kwinto eyodwa ye-DOM futhi luyilawule ngokugcwele. Esibonelweni esingenhla, yi-#app.

Nge-Vue singabheka i-HTML njengendawo yokungena, futhi konke okunye kwenzeka ngaphakathi kwesibonelo se-Vue esidaliwe.
Ake sibone isibonelo lapho sizama khona isici nesibaluli ukubopha:

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

Kulokhu, isibaluli esisha se-v-bind siwumyalelo. Iziqondiso zisetshenziswa nesiqalo esingu-v ukuze kuboniswe ukuthi izibaluli ezihlukile ezinikezwe i-Vue, futhi zisetshenziselwa ukusebenzisa ukuziphatha okukhethekile kokuphendula ku-DOM enikeziwe.

Umphumela wesibonelo ulandelayo

Ercole Palmeri

Innovation newsletter
Ungaphuthelwa yizindaba ezibaluleke kakhulu zokuqamba. Bhalisa ukuze uthole nge-imeyili.

Izihloko zakamuva

I-Veeam ifaka ukusekelwa okuphelele kakhulu kwe-ransomware, kusukela ekuvikelweni kuya ekuphenduleni nasekululameni

I-Coveware ye-Veeam izoqhubeka nokuhlinzeka ngezinsizakalo zokuphendula izigameko zokuntshontshwa kwe-inthanethi. I-Coveware izohlinzeka ngama-forensics kanye nekhono lokulungisa…

23 April 2024

Inguquko Eluhlaza Nedijithali: Indlela Ukugcinwa Okubikezelwayo Kuyiguqula Kanjani Imboni Kawoyela Negesi

Ukulungiswa okuqagelayo kuguqula umkhakha kawoyela negesi, ngendlela emisha nesebenzayo yokuphatha izitshalo.…

22 April 2024

Isilawuli se-antitrust sase-UK siphakamisa i-alamu ye-BigTech nge-GenAI

I-CMA yase-UK ikhiphe isexwayiso mayelana nokuziphatha kwe-Big Tech emakethe yezobunhloli bokwenziwa. Lapho…

18 April 2024

I-Casa Green: inguquko yamandla yekusasa elisimeme e-Italy

Isinqumo esithi "Case Green", esakhiwe yi-European Union ukuze kuthuthukiswe ukusebenza kahle kwamandla ezakhiwo, siphothule inqubo yaso yomthetho ngokuthi...

18 April 2024