I-Vue.js igxile kakhulu kwingxenye yokubonwa kwesicelo, ebizwa ngokuba yi-front-end development. I-Vue.js iya ithandwa imihla ngemihla kuba kulula kakhulu ukudibanisa nezinye iiprojekthi kunye namathala eencwadi. Kulula kakhulu ukuyifaka kunye nokusetyenziswa.
I-Vue.js sisikhokelo seJavaScript eqhubekayo Vula Umnikezi isetyenziselwa ukuphuhlisa ujongano lomsebenzisi osebenzisanayo wewebhu kunye nezicelo zephepha elinye (ii-SPAs). I-Vue.js iqhele ukubizwa ngokuba yi-Vue kwaye ibizwa ngokuba yi-"view.js" okanye "jonga".
Isicelo sephepha elinye okanye i-SPA sisicelo sewebhu okanye iwebhusayithi ebonelela abasebenzisi ngokugudileyo, okuphendulayo kunye namava akhawulezayo afana nesicelo sedesktop. Isicelo sephepha elinye sinemenyu, amaqhosha kunye neebhloko kwiphepha elinye. Xa umsebenzisi ecofa kwenye yazo, iphinda ibhale iphepha langoku kunokulayisha amaphepha amatsha apheleleyo kumncedisi. Esi sizathu emva kwesantya sayo sokuphendula.
I-Vue iphuhliswe ngokwesiseko kuphuhliso lwangaphambili, ngoko ke kufuneka iphathe uninzi lweefayile zeHTML, JavaScript, kunye neCSS. I-Vue.js yenza kube lula kubasebenzisi ukwandisa i-HTML ngeempawu ze-HTML ezibizwa ngokuba zizikhokelo. I-Vue.js ibonelela ngezikhokelo ezakhelwe ngaphakathi kunye nezikhokelo ezininzi defiyenziwe ngumsebenzisi ukuphucula ukusebenza kwezicelo zeHTML.
Ngezantsi luluhlu lwezona mpawu zibalulekileyo ze-Vue.js:
Amacandelo e-Vue.js yenye yeempawu ezibalulekileyo zesi sikhokelo. Zisetyenziselwa ukwandisa izinto ezisisiseko ze-HTML ukufaka ikhowudi enokusetyenziswa kwakhona. Unokwenza izinto zesiko ezisebenzisekayo kwi-Vue.js izicelo ezinokuthi kamva ziphinde zisetyenziswe kwi-HTML.
I-Vue.js ibonelela ngeetemplates ezisekwe kwi-HTML ezinokusetyenziswa ukunxulumanisa i-DOM enikezelweyo kunye nedatha yomzekelo weVue. Zonke iitemplates zeVue ziyi-HTML esebenzayo enokwahlulwa ngabakhangeli abathobelayo kunye nabahlalutyi beHTML. I-Vue.js iqokelela imifuziselo ibe yimisebenzi yonikezelo ye-DOM ebonakalayo. I-Vue inikezela ngamacandelo kwimemori ye-DOM yenyani ngaphambi kokuhlaziya isikhangeli. I-Vue ingabala elona nani lincinci lamacandelo ukuze linikezelwe kwakhona kwaye lisebenzise ubuncinci bemali yokukhohlisa i-DOM xa utshintsha imeko yesicelo.
I-Vue ibonelela ngenkqubo yokuphendula esebenzisa izinto ezilula zeJavaScript kunye nokwandisa unikezelo kwakhona. Kule nkqubo, icandelo ngalinye ligcina umkhondo wokuxhomekeka kwalo okusebenzayo, ngoko ke inkqubo iyazi ngokuthe ngqo ukuba zeziphi na iikhomponenti eziza kuphinda zinikezelwe.
Ukukhangela iphepha kwenziwa ngoncedo lwe-vue-router. Ungasebenzisa ilayibrari ye-vue-router exhaswa ngokusemthethweni kwisicelo sakho sephepha elinye.
I-Vue ikuvumela ukuba usebenzise iziphumo ezahlukeneyo zenguqu xa izinto zifakiwe, zihlaziywa okanye zisusiwe kwi-DOM.
Kukho iindlela ezininzi zokusebenzisa i-Vue.js. Ungayifaka ngokuya kwindawo yayo esemthethweni okanye ungaqala ukusebenzisa ifayile yeVue.js kwithala leencwadi leCDN ngokunjalo. Nazi ezinye iindlela zokusebenzisa i-Vue.js kwiprojekthi yakho.
Ukuba ufuna ukusebenzisa ithegi <script> ye Vue.js ngqo kwifayile yakho ye-HTML, kufuneka uyikhuphele kwiwebhusayithi esemthethweni.
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html> Makhe siye kwiwebhusayithi esemthethweni ye-Vue.js https://vuejs.org/v2/guide/installation.html ukukhuphela vue.js ngokweemfuno zakho.
Ungasebenzisa kwakhona ifayile ye-Vue.js esuka kwi-CDN, kwisicelo sakho. Sebenzisa ikhonkco https://unpkg.com/vue@3/dist/vue.global.js ngaphakathi kwento <script>, njengoko kungezantsi:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>I-Vue.js yenye yeetekhnoloji zesoftware zamva nje ezisetyenziswa ngokubanzi kuphuhliso lwewebhu kunye nokwakha iSicelo sePhepha Elilodwa (SPA). Njengoko unokuthelekelela kwigama, isetyenziswa kakhulu kwi-UI okanye kwicala lokubonisa leprojekthi.
Makhe sibone izibonelelo zokusebenzisa i-Vue.js kwiprojekthi yakho:
Enye yeenzuzo ezinkulu ze-Vue.js kukuba incinci kakhulu ngobukhulu. Impumelelo yesakhelo seJavaScript ixhomekeke kakhulu kubungakanani bayo kwaye le plugin inomdla yeJavaScript yi-18-21KB kuphela, ngoko unokukhuphela ngokulula kwaye uyisebenzise ngokukhawuleza.
Isakhelo se-Vue.js sinesakhiwo esilula kakhulu kwaye kulula ukuyiqonda. Sesinye sezizathu zokuthandwa kwesi sikhokelo. Ukuba uqhelene ne-HTML kunye neJavaScript, ungafaka ikhowudi ngokulula kwiVue.js. Abasebenzisi banokongeza ngokulula i-Vue.js kwiprojekthi yabo yewebhu ngenxa yesakhiwo sayo esilula kunye nokuphuhlisa izicelo.
I-Vue.js inamacandelo amaninzi kuyo yonke into kwaye inokudityaniswa ngokukhawuleza kunye nezicelo ezikhoyo. Ungayidibanisa nayo nayiphi na inkqubo ebhalwe kwiJavaScript.
Ubume beVue.js obuguquguqukayo bukwakwenza kube lula kubaphuhlisi beReact.js, Angular.js, kunye nazo naziphi na ezinye iinkqubo ezintsha zeJavaScript ukuba baziqonde. Inika ukuguquguquka okuninzi ukusebenzisa ii-node ezibonakalayo ukubhala iifayile zeHTML, iifayile zeJavaScript kunye neefayile zeJavaScript ezicocekileyo.
Unokwenza izinto zesiko eziphinda zisetyenziswe kwi Vue.js izicelo.
I-Vue.js ibonelela ngamaxwebhu alula kakhulu, apheleleyo naneenkcukacha, ngoko ke abaphuhlisi abanolwazi oluncinci malunga ne-HTML kunye neJavaScript banokuyisebenzisa ukwenza inkqubo.
I-Vue.js isebenzisa i-DOM enenyani efanayo nezinye izikhokelo ezikhoyo njengeReactJS, i-Ember, njl. I-DOM enenyani luphawu olukhaphukhaphu kwinkumbulo yomthi we-HTML DOM yoqobo kwaye ihlaziywa ngaphandle kokuchaphazela iDOM yokuqala.
I-Vue.js ibonelela ngeendlela ezimbini zonxibelelwano kunye neModeli yokuJonga iModeli yayo (MVVM) yokwakha eyenza lula ukuphathwa kweebhloko ze-HTML.
Isakhelo siza kunye nenkqubo evumela ukuba sinikezele ngokuvakalisa idatha kwi-DOM usebenzisa i-syntax yemodeli elula kwaye echanekileyo.
Nanku umzekelo:
<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>Isakhelo se-Vue.js siyasivumela ukuba defiiimpawu ze-HTML ezinqabileyo ezibizwa ngokuba zizikhokelo, ezisetyenziselwa ukunika umsebenzi kwizicelo zeHTML.
Kukho iindidi ezimbini zemiyalelo kwi-Vue.js:
I-Vue.js isebenzisa iibrayisi eziphindiweyo {{}} njengezibambi-ndawo zedatha, kunye neVue.js imiyalelo ziphawu lweHTML ezisebenzisa i-v- isimaphambili.
I-app ye-Vue iqhagamshela kwinto enye ye-DOM kwaye iyilawula ngokupheleleyo. Kulo mzekelo ungasentla, yi #app.
NgeVue sinokuqwalasela i-HTML njengendawo yokungena, kwaye yonke enye into yenzeka ngaphakathi komzekelo weVue owenziweyo.
Makhe sibone umzekelo apho sizama isiqalelo kunye nesibophelelo sophawu:
<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> Kule meko, uphawu olutsha lwe-v-bind ngumyalelo. Izikhokelo zisetyenziswa kunye ne-v- isimaphambili ukubonisa ukuba zimpawu ezizodwa ezibonelelwa yi-Vue, kwaye zisetyenziselwa ukusebenzisa indlela yokuziphatha ekhethekileyo yokuphendula kwi-DOM enikezelweyo.
Isiphumo somzekelo silandelayo
Ercole Palmeri
I-CMA yase-UK ikhuphe isilumkiso malunga nokuziphatha kweBig Tech kwimarike yobukrelekrele bokwenziwa. Pha…
Umthetho we "Green Houses", oqulunqwe yiManyano yaseYurophu ukomeleza amandla ombane kwizakhiwo, ugqibezele inkqubo yowiso mthetho nge…
Ingxelo yonyaka yeCasaleggio Associati malunga ne-Ecommerce e-Italiya yanikezelwa. Ingxelo enesihloko esithi "AI-Commerce: imida yorhwebo nge-Artificial Intelligence".…
Isiphumo sokuyila rhoqo kobuchwepheshe kunye nokuzinikela kokusingqongileyo kunye nempilo yabantu. IBandalux inikezela ngeAirpure®, intente…
