„Vue.js“ daugiausia dėmesio skiria programos vizualizavimo daliai, dar vadinamai „front-end“ kūrimu. Vue.js populiarėja kiekvieną dieną, nes jį labai lengva integruoti su kitais projektais ir bibliotekomis. Tai labai paprasta įdiegti ir naudoti.
Vue.js yra progresyvi JavaScript sistema atviro kodo naudojamas kuriant interaktyvias žiniatinklio vartotojo sąsajas ir vieno puslapio programas (SPA). Vue.js paprastai vadinamas Vue ir tariamas kaip „view.js“ arba „view“.
Vieno puslapio programa arba SPA yra žiniatinklio programa arba svetainė, suteikianti vartotojams labai sklandžią, greitai reaguojančią ir greitą patirtį, panašią į darbalaukio programą. Vieno puslapio programoje yra meniu, mygtukai ir blokai viename puslapyje. Kai vartotojas spusteli vieną iš jų, jis dinamiškai perrašo dabartinį puslapį, o ne įkelia visiškai naujus puslapius iš serverio. Tai yra jo reagavimo greičio priežastis.
„Vue“ iš esmės sukurtas frontend kūrimui, todėl turi tvarkyti daug HTML, JavaScript ir CSS failų. Vue.js leidžia vartotojams lengvai išplėsti HTML naudojant HTML atributus, vadinamus direktyvomis. Vue.js pateikia integruotas direktyvas ir daugybę direktyvų definite, kad pagerintų HTML programų funkcionalumą.
Žemiau pateikiamas svarbiausių Vue.js funkcijų sąrašas:
Vue.js komponentai yra viena iš svarbių šios sistemos savybių. Jie naudojami norint išplėsti pagrindinius HTML elementus, kad būtų galima įterpti daugkartinį kodą. Galite sukurti daugkartinio naudojimo pasirinktinius elementus Vue.js programose, kurie vėliau gali būti pakartotinai naudojami HTML.
Vue.js pateikia HTML pagrindu sukurtus šablonus, kuriuos galima naudoti susieti pateiktą DOM su Vue egzemplioriaus duomenimis. Visi „Vue“ šablonai yra galiojantis HTML, kurį gali išanalizuoti specifikacijas atitinkančios naršyklės ir HTML analizatoriai. Vue.js sukompiliuoja modelius į virtualias DOM atvaizdavimo funkcijas. Prieš atnaujinant naršyklę, „Vue“ pateikia komponentus į virtualią DOM atmintį. „Vue“ taip pat gali apskaičiuoti mažiausią komponentų skaičių, kurį reikia pateikti iš naujo, ir taikyti mažiausią DOM manipuliavimo kiekį keičiant programos būseną.
„Vue“ teikia reagavimo sistemą, kuri naudoja paprastus „JavaScript“ objektus ir optimizuoja pakartotinį pateikimą. Šiame procese kiekvienas komponentas seka savo reaktyviąsias priklausomybes, todėl sistema tiksliai žino, kada ir kuriuos komponentus reikia pateikti iš naujo.
Puslapio naršymas atliekamas vue-router pagalba. Savo vieno puslapio programai galite naudoti oficialiai palaikomą vue-router biblioteką.
Vue leidžia naudoti skirtingus perėjimo efektus, kai elementai įterpiami, atnaujinami arba pašalinami iš DOM.
Yra keli Vue.js naudojimo būdai. Jį galite įdiegti apsilankę oficialioje svetainėje arba pradėti naudoti Vue.js failą iš CDN bibliotekos. Štai keletas būdų, kaip projekte naudoti Vue.js.
Jei norite naudoti žymą <script> Vue.js tiesiai į HTML failą, turite jį atsisiųsti iš oficialios svetainės.
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html> Eikime į oficialią Vue.js svetainę https://vuejs.org/v2/guide/installation.html Norėdami atsisiųsti vue.js pagal savo poreikius.
Taip pat programoje galite naudoti failą Vue.js iš CDN. Naudokite elemento viduje esančią nuorodą https://unpkg.com/vue@3/dist/vue.global.js <script>, kaip nurodyta žemiau:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Vue.js yra viena iš naujausių programinės įrangos technologijų, plačiai naudojamų kuriant internetą ir kuriant vieno puslapio taikomąsias programas (SPA). Kaip galite atspėti iš pavadinimo, jis dažniausiai naudojamas projekto vartotojo sąsajai arba rodymo pusei.
Pažiūrėkime apie Vue.js naudojimo projekte pranašumus:
Vienas didžiausių Vue.js privalumų yra tai, kad jis yra labai mažas. „JavaScript“ sistemos sėkmė labai priklauso nuo jos dydžio, o šis jaudinantis „JavaScript“ įskiepis yra tik 18–21 KB, todėl galite jį labai lengvai atsisiųsti ir naudoti greitai.
„Vue.js“ sistema yra labai paprastos struktūros ir ją labai lengva suprasti. Tai viena iš šios sistemos populiarumo priežasčių. Jei esate susipažinę su HTML ir JavaScript, galite lengvai koduoti Vue.js. Vartotojai gali lengvai pridėti Vue.js prie savo žiniatinklio projekto dėl paprastos struktūros ir kurti programas.
Vue.js turi daug komponentų viskam ir gali būti labai greitai integruotas su esamomis programomis. Galite integruoti jį su bet kuria programa, parašyta JavaScript.
Lankstus Vue.js pobūdis taip pat leidžia lengvai suprasti React.js, Angular.js ir bet kokių kitų naujų „JavaScript“ sistemų kūrėjams. Tai suteikia daug lankstumo naudojant virtualius mazgus HTML failams, „JavaScript“ failams ir gryniems „JavaScript“ failams rašyti.
Galite sukurti pasirinktinius elementus, kuriuos galima pakartotinai naudoti Vue.js programose.
Vue.js pateikia labai paprastą, išsamią ir išsamią dokumentaciją, todėl kūrėjai, kurie mažai supranta apie HTML ir JavaScript, gali jį naudoti programuodami.
Vue.js naudoja virtualų DOM, panašų į kitas esamas sistemas, tokias kaip ReactJS, Ember ir kt. Virtualus DOM yra lengvas originalaus HTML DOM medžio atvaizdas atmintyje ir atnaujinamas nepažeidžiant pradinio DOM.
Vue.js suteikia dvipusį ryšį su savo modelio peržiūros modelio (MVVM) architektūra, kuri supaprastina HTML blokų tvarkymą.
Sistemoje yra sistema, leidžianti deklaratyviai pateikti duomenis DOM naudojant paprastą ir nesudėtingą modelio sintaksę.
Štai pavyzdys:
<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 sistema leidžia mums defidaug HTML atributų, vadinamų direktyvomis, kurios naudojamos HTML programų funkcionalumui užtikrinti.
Vue.js yra dviejų tipų direktyvos:
Vue.js naudoja dvigubus skliaustus {{}} kaip duomenų vietos rezervavimo ženklus, o Vue.js direktyvos yra HTML atributai, kuriuose naudojamas priešdėlis v.
„Vue“ programa prisijungia prie vieno DOM elemento ir visiškai jį valdo. Anksčiau pateiktame pavyzdyje tai yra #app.
Naudodami „Vue“ galime laikyti HTML įėjimo tašku, o visa kita vyksta sukurtame „Vue“ egzemplioriuje.
Pažiūrėkime pavyzdį, kai bandome elementų ir atributų susiejimą:
<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> Šiuo atveju naujasis v-bind atributas yra direktyva. Direktyvos naudojamos su priešdėliu v, nurodant, kad tai yra unikalūs „Vue“ pateikti atributai, ir yra naudojamos specialiam reagavimo elgesiui pritaikyti pateiktam DOM.
Pavyzdžio rezultatas yra toks
Ercole Palmeri
Lavindami smulkiosios motorikos įgūdžius dažydami, vaikai paruošiami sudėtingesniems įgūdžiams, pavyzdžiui, rašymui. Norėdami nuspalvinti…
Karinio jūrų laivyno sektorius yra tikra pasaulinė ekonominė galia, kuri pasiekė 150 mlrd.
Praėjusį pirmadienį „Financial Times“ paskelbė apie susitarimą su „OpenAI“. FT licencijuoja savo pasaulinio lygio žurnalistiką…
Milijonai žmonių moka už srautinio perdavimo paslaugas, mokėdami mėnesinius abonentinius mokesčius. Paplitusi nuomonė, kad jūs…
