Vue.js keskendub peamiselt rakenduse visualiseerimise osale, mida nimetatakse ka esiotsa arendamiseks. Vue.js muutub iga päevaga populaarseks, kuna seda on väga lihtne integreerida teiste projektide ja raamatukogudega. Seda on väga lihtne paigaldada ja kasutada.
Vue.js on progressiivne JavaScripti raamistik avatud lähtekoodiga kasutatakse interaktiivsete veebikasutajaliideste ja üheleheliste rakenduste (SPA-de) arendamiseks. Vue.js-i nimetatakse tavaliselt Vue-ks ja seda hääldatakse kui "view.js" või "view".
Single Page Application ehk SPA on veebirakendus või veebisait, mis pakub kasutajatele väga sujuvat, reageerivat ja kiiret kasutuskogemust, mis sarnaneb töölauarakendusega. Üheleheline rakendus sisaldab menüüd, nuppe ja plokke ühel lehel. Kui kasutaja klõpsab ühel neist, kirjutab see praeguse lehe dünaamiliselt ümber, mitte ei laadi serverist uusi lehti. See on selle reageerimiskiiruse põhjus.
Vue on põhiliselt välja töötatud esiosa arendamiseks, nii et see peab käsitlema palju HTML-, JavaScript- ja CSS-faile. Vue.js muudab kasutajate jaoks lihtsaks HTML-i laiendamise HTML-i atribuutidega, mida nimetatakse direktiivideks. Vue.js pakub sisseehitatud direktiive ja palju direktiive definite kasutaja poolt HTML-rakenduste funktsionaalsuse parandamiseks.
Allpool on loend Vue.js-i kõige olulisematest funktsioonidest:
Vue.js komponendid on selle raamistiku üks olulisi omadusi. Neid kasutatakse HTML-i põhielementide laiendamiseks korduvkasutatava koodi kapseldamiseks. Saate luua Vue.js rakendustes korduvkasutatavaid kohandatud elemente, mida saab hiljem HTML-is uuesti kasutada.
Vue.js pakub HTML-põhiseid malle, mida saab kasutada renderdatud DOM-i seostamiseks Vue eksemplari andmetega. Kõik Vue mallid on kehtivad HTML-id, mida saavad sõeluda spetsifikatsiooniga ühilduvad brauserid ja HTML-i sõelujad. Vue.js koostab mudelid virtuaalse DOM-i renderdusfunktsioonideks. Vue renderdab komponendid enne brauseri värskendamist virtuaalsesse DOM-mällu. Vue saab arvutada ka uuesti renderdatavate komponentide minimaalse arvu ja rakendada rakenduse oleku muutmisel minimaalselt DOM-i manipuleerimist.
Vue pakub reageerivat süsteemi, mis kasutab lihtsaid JavaScripti objekte ja optimeerib uuesti renderdamist. Selles protsessis jälgib iga komponent oma reaktiivseid sõltuvusi, nii et süsteem teab täpselt, millal ja milliseid komponente uuesti renderdada.
Leheküljel navigeerimine toimub vue-ruuteri abil. Saate oma ühelehelise rakenduse jaoks kasutada ametlikult toetatud vue-ruuteri teeki.
Vue võimaldab elementide sisestamisel, värskendamisel või DOM-ist eemaldamisel kasutada erinevaid üleminekuefekte.
Vue.js-i kasutamiseks on mitu meetodit. Saate selle installida, minnes selle ametlikule saidile või alustada faili Vue.js kasutamist ka CDN-i teegist. Vaatame allpool mõningaid viise, kuidas Vue.js-i oma projektis kasutada.
Kui soovite silti kasutada <script> Vue.js otse oma HTML-faili, peate selle ametlikult veebisaidilt alla laadima.
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html> Läheme Vue.js ametlikule veebisaidile https://vuejs.org/v2/guide/installation.html vue.js allalaadimiseks vastavalt oma vajadustele.
Saate oma rakenduses kasutada ka CDN-i faili Vue.js. Kasutage elemendi sees olevat linki https://unpkg.com/vue@3/dist/vue.global.js <script>, nagu allpool:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Vue.js on üks uusimaid tarkvaratehnoloogiaid, mida kasutatakse laialdaselt veebiarenduseks ja üheleheliste rakenduste (SPA) loomiseks. Nagu nimest võib arvata, kasutatakse seda enamasti projekti kasutajaliidese või kuvari poole jaoks.
Vaatame Vue.js-i kasutamise eeliseid teie projektis:
Vue.js-i üks suurimaid eeliseid on see, et see on väga väike. JavaScripti raamistiku edu sõltub suuresti selle suurusest ja see põnev JavaScripti pistikprogramm on vaid 18-21 KB, nii et saate selle väga lihtsalt alla laadida ja kiiresti kasutada.
Vue.js raamistikul on väga lihtne struktuur ja seda on väga lihtne mõista. See on selle raamistiku populaarsuse üks põhjusi. Kui olete HTML-i ja JavaScriptiga tuttav, saate Vue.js-is hõlpsalt kodeerida. Kasutajad saavad hõlpsasti lisada Vue.js-i oma veebiprojekti selle lihtsa ülesehituse tõttu ja arendada rakendusi.
Vue.js sisaldab palju komponente kõige jaoks ja seda saab väga kiiresti integreerida olemasolevate rakendustega. Saate selle integreerida mis tahes JavaScriptis kirjutatud rakendusega.
Vue.js-i paindlik olemus muudab React.js-i, Angular.js-i ja muude uute JavaScripti raamistike arendajatele hõlpsasti mõistetavaks. See pakub palju paindlikkust virtuaalsete sõlmede kasutamiseks HTML-failide, JavaScript-failide ja puhaste JavaScript-failide kirjutamiseks.
Saate luua kohandatud elemente, mida saab Vue.js rakendustes uuesti kasutada.
Vue.js pakub väga lihtsat, täielikku ja üksikasjalikku dokumentatsiooni, nii et arendajad, kellel on HTML-ist ja JavaScriptist vähe aimu, saavad seda programmeerimiseks kasutada.
Vue.js kasutab virtuaalset DOM-i, mis sarnaneb teiste olemasolevate raamistikega, nagu ReactJS, Ember jne. Virtuaalne DOM on algse HTML-i DOM-i kerge mälusisene puuesitus ja seda värskendatakse esialgset DOM-i mõjutamata.
Vue.js pakub kahepoolset suhtlust oma Model View View Model (MVVM) arhitektuuriga, mis lihtsustab HTML-plokkide käsitlemist.
Raamistikuga on kaasas süsteem, mis võimaldab meil deklaratiivselt renderdada andmeid DOM-i, kasutades lihtsat ja arusaadavat mudelisüntaksit.
Siin on näide:
<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 raamistik võimaldab meil seda teha defihulk HTML-i atribuute, mida nimetatakse direktiivideks, mida kasutatakse HTML-i rakenduste funktsionaalsuse pakkumiseks.
Vue.js-is on kahte tüüpi direktiive.
Vue.js kasutab andmete kohahoidjatena topeltsulgusid {{}} ja Vue.js-i direktiivid on HTML-i atribuudid, mis kasutavad v-eesliidet.
Vue rakendus loob ühenduse ühe DOM-i elemendiga ja juhib seda täielikult. Ülaltoodud näites on see #app.
Vue puhul saame sisendpunktiks pidada HTML-i ja kõik muu toimub loodud Vue eksemplari sees.
Vaatame näidet, kus proovime elementide ja atribuutide sidumist:
<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> Sel juhul on uus v-bind atribuut direktiiv. Direktiive kasutatakse koos v-eesliitega, et näidata, et need on Vue pakutavad kordumatud atribuudid, ja neid kasutatakse renderdatud DOM-ile spetsiaalse reageerimiskäitumise rakendamiseks.
Näite tulemus on järgmine
Ercole Palmeri
Catania polikliinikus viidi läbi oftalmoplastika operatsioon Apple Vision Pro reklaamivaaturiga…
Peenmotoorika arendamine värvimise kaudu valmistab lapsi ette keerukamate oskuste, nagu kirjutamise, jaoks. Värvimiseks…
Meresõidusektor on tõeline ülemaailmne majanduslik jõud, mis on liikunud 150 miljardi suuruse turu poole...
Eelmisel esmaspäeval teatas Financial Times tehingust OpenAI-ga. FT litsentsib oma maailmatasemel ajakirjandust…
