Vue.js galvenokārt koncentrējas uz lietojumprogrammas vizualizācijas daļu, ko sauc arī par priekšgala izstrādi. Vue.js kļūst populārs katru dienu, jo to ir ļoti viegli integrēt ar citiem projektiem un bibliotēkām. To ir ļoti vienkārši uzstādīt un lietot.
Vue.js ir progresīvs JavaScript ietvars atvērtā koda izmanto interaktīvu tīmekļa lietotāja saskarņu un vienas lapas lietojumprogrammu (SP) izstrādei. Vue.js parasti tiek saukts par Vue un izrunā kā "view.js" vai "view".
Vienas lapas lietojumprogramma jeb SPA ir tīmekļa lietojumprogramma vai vietne, kas lietotājiem nodrošina ļoti vienmērīgu, atsaucīgu un ātru pieredzi, kas ir līdzīga darbvirsmas lietojumprogrammai. Vienas lapas lietojumprogramma satur izvēlni, pogas un blokus vienā lapā. Kad lietotājs noklikšķina uz vienas no tām, tas dinamiski pārraksta pašreizējo lapu, nevis ielādē pilnīgi jaunas lapas no servera. Tas ir iemesls tā reakcijas ātrumam.
Vue pamatā ir izstrādāts priekšgala izstrādei, tāpēc tam ir jāapstrādā daudzi HTML, JavaScript un CSS faili. Vue.js ļauj lietotājiem ērti paplašināt HTML ar HTML atribūtiem, ko sauc par direktīvām. Vue.js nodrošina iebūvētas direktīvas un daudzas direktīvas definite lietotājs, lai uzlabotu HTML lietojumprogrammu funkcionalitāti.
Tālāk ir sniegts svarīgāko Vue.js funkciju saraksts:
Vue.js komponenti ir viena no svarīgākajām šī ietvara iezīmēm. Tos izmanto, lai paplašinātu pamata HTML elementus, lai iekapsulētu atkārtoti lietojamu kodu. Varat izveidot atkārtoti lietojamus pielāgotus elementus Vue.js lietojumprogrammās, ko vēlāk var atkārtoti izmantot HTML.
Vue.js nodrošina uz HTML balstītas veidnes, kuras var izmantot, lai renderēto DOM saistītu ar Vue instances datiem. Visas Vue veidnes ir derīgs HTML, ko var parsēt ar specifikācijām saderīgas pārlūkprogrammas un HTML parsētāji. Vue.js apkopo modeļus virtuālās DOM renderēšanas funkcijās. Pirms pārlūkprogrammas atsvaidzināšanas Vue atveido komponentus virtuālajā DOM atmiņā. Vue var arī aprēķināt minimālo komponentu skaitu atkārtoti renderēt un piemērot minimālo DOM manipulāciju apjomu, mainot lietojumprogrammas stāvokli.
Vue nodrošina atsaucības sistēmu, kas izmanto vienkāršus JavaScript objektus un optimizē atkārtotu renderēšanu. Šajā procesā katrs komponents seko savām reaktīvajām atkarībām, lai sistēma precīzi zinātu, kad un kurus komponentus atkārtoti renderēt.
Lapas navigācija tiek veikta ar vue-router palīdzību. Savai vienas lapas lietojumprogrammai varat izmantot oficiāli atbalstīto vue-router bibliotēku.
Vue ļauj izmantot dažādus pārejas efektus, kad elementi tiek ievietoti, atjaunināti vai noņemti no DOM.
Ir vairākas metodes, kā izmantot Vue.js. Varat to instalēt, dodoties uz tā oficiālo vietni, vai arī varat sākt izmantot failu Vue.js no CDN bibliotēkas. Šeit ir daži veidi, kā savā projektā izmantot Vue.js.
Ja vēlaties izmantot tagu <script> Vue.js tieši savā HTML failā, jums tas ir jālejupielādē no oficiālās vietnes.
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html> Dosimies uz Vue.js oficiālo vietni https://vuejs.org/v2/guide/installation.html lai lejupielādētu vue.js atbilstoši savām vajadzībām.
Savā lietojumprogrammā varat izmantot arī failu Vue.js no CDN. Izmantojiet saiti https://unpkg.com/vue@3/dist/vue.global.js elementa iekšpusē <script>, kā norādīts zemāk:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Vue.js ir viena no jaunākajām programmatūras tehnoloģijām, ko plaši izmanto tīmekļa izstrādei un vienas lapas lietojumprogrammu (SPA) izveidei. Kā jūs varat nojaust no nosaukuma, tas galvenokārt tiek izmantots projekta lietotāja saskarnē vai displeja pusē.
Apskatīsim priekšrocības, ko sniedz Vue.js izmantošana jūsu projektā:
Viena no lielākajām Vue.js priekšrocībām ir tā, ka tas ir ļoti mazs. JavaScript ietvara panākumi lielā mērā ir atkarīgi no tā lieluma, un šis aizraujošais JavaScript spraudnis ir tikai 18–21 KB, tāpēc varat to ļoti viegli lejupielādēt un izmantot īsā laikā.
Vue.js ietvaram ir ļoti vienkārša struktūra, un to ir ļoti viegli saprast. Tas ir viens no šīs sistēmas popularitātes iemesliem. Ja esat iepazinies ar HTML un JavaScript, varat viegli kodēt Vue.js. Lietotāji var viegli pievienot Vue.js savam tīmekļa projektam tā vienkāršās struktūras dēļ un izstrādāt lietojumprogrammas.
Vue.js ir daudz komponentu visam, un to var ļoti ātri integrēt ar esošajām lietojumprogrammām. Varat to integrēt ar jebkuru lietojumprogrammu, kas rakstīta JavaScript.
Vue.js elastīgais raksturs ļauj to viegli saprast arī React.js, Angular.js un citu jauno JavaScript ietvaru izstrādātājiem. Tas nodrošina lielu elastību virtuālo mezglu izmantošanai, lai rakstītu HTML failus, JavaScript failus un tīrus JavaScript failus.
Varat izveidot pielāgotus elementus, kas ir atkārtoti lietojami Vue.js lietojumprogrammās.
Vue.js nodrošina ļoti vienkāršu, pilnīgu un detalizētu dokumentāciju, tāpēc izstrādātāji, kuriem ir maz priekšstatu par HTML un JavaScript, var to izmantot programmēšanai.
Vue.js izmanto virtuālo DOM līdzīgi citiem esošajiem ietvariem, piemēram, ReactJS, Ember utt. Virtuālais DOM ir viegls sākotnējā HTML DOM atmiņas koka attēlojums, un tas tiek atjaunināts, neietekmējot sākotnējo DOM.
Vue.js nodrošina divvirzienu saziņu ar tā modeļa skata modeļa (MVVM) arhitektūru, kas vienkāršo HTML bloku apstrādi.
Ietvars ir aprīkots ar sistēmu, kas ļauj mums deklaratīvi renderēt datus DOM, izmantojot vienkāršu un saprotamu modeļa sintaksi.
Šeit ir piemērs:
<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 sistēma ļauj mums definire HTML atribūtus, ko sauc par direktīvām, ko izmanto, lai nodrošinātu HTML lietojumprogrammu funkcionalitāti.
Vietnē Vue.js ir divu veidu direktīvas:
Vue.js izmanto dubultiekavas {{}} kā datu vietturi, un Vue.js direktīvas ir HTML atribūti, kas izmanto v prefiksu.
Vue lietotne tiek savienota ar vienu DOM elementu un pilnībā to kontrolē. Iepriekš minētajā piemērā tas ir #app.
Izmantojot Vue, mēs varam uzskatīt HTML par ieejas punktu, un viss pārējais notiek izveidotajā Vue instancē.
Apskatīsim piemēru, kurā mēs izmēģinām elementu un atribūtu saistīšanu:
<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> Šajā gadījumā jaunais v-bind atribūts ir direktīva. Direktīvas tiek izmantotas ar prefiksu v, lai norādītu, ka tie ir unikāli atribūti, ko nodrošina Vue, un tiek izmantotas, lai renderētajam DOM piemērotu īpašu atsaucību.
Piemēra rezultāts ir šāds
Ercole Palmeri
Google DeepMind ievieš uzlabotu sava mākslīgā intelekta modeļa versiju. Jaunais uzlabotais modelis nodrošina ne tikai…
Laravel, kas slavena ar savu eleganto sintaksi un jaudīgām funkcijām, nodrošina arī stabilu pamatu moduļu arhitektūrai. Tur…
Cisco un Splunk palīdz klientiem paātrināt viņu ceļu uz nākotnes drošības operāciju centru (SOC), izmantojot…
Ransomware ir dominējusi ziņās pēdējos divus gadus. Lielākā daļa cilvēku labi apzinās, ka uzbrukumi…
Katānijas poliklīnikā tika veikta oftalmoplastikas operācija, izmantojot Apple Vision Pro komerciālo skatītāju…
Smalko motoriku attīstīšana, izmantojot krāsošanu, sagatavo bērnus sarežģītākām prasmēm, piemēram, rakstīšanai. Lai krāsotu…
Jūras flotes nozare ir patiess globāls ekonomikas spēks, kas ir virzījies uz 150 miljardu tirgu...
Pagājušajā pirmdienā Financial Times paziņoja par darījumu ar OpenAI. FT licencē savu pasaules līmeņa žurnālistiku…
