Vue.js përqendrohet kryesisht në pjesën e vizualizimit të aplikacionit, e quajtur gjithashtu zhvillim në front-end. Vue.js po bëhet popullor dita-ditës sepse është shumë e lehtë të integrohet me projekte dhe biblioteka të tjera. Është shumë e thjeshtë për t'u instaluar dhe përdorur.
Vue.js është një kornizë progresive JavaScript burim të hapur përdoret për zhvillimin e ndërfaqeve interaktive të përdoruesve në ueb dhe aplikacioneve me një faqe (SPA). Vue.js zakonisht quhet Vue dhe shqiptohet si "view.js" ose "view".
Një aplikacion me një faqe ose SPA është një aplikacion në internet ose faqe interneti që u ofron përdoruesve një përvojë shumë të qetë, të përgjegjshme dhe të shpejtë të ngjashme me një aplikacion desktopi. Një aplikacion me një faqe përmban një menu, butona dhe blloqe në një faqe të vetme. Kur një përdorues klikon në njërën prej tyre, ai rishkruan në mënyrë dinamike faqen aktuale në vend që të ngarkojë faqe të tëra të reja nga një server. Kjo është arsyeja që qëndron pas shpejtësisë së tij të përgjegjshme.
Vue është ndërtuar në thelb për zhvillimin e frontendit, kështu që duhet të trajtojë shumë skedarë HTML, JavaScript dhe CSS. Vue.js e bën të lehtë për përdoruesit që të zgjerojnë HTML me atribute HTML të quajtura direktiva. Vue.js ofron direktiva të integruara dhe shumë direktiva definite nga përdoruesi për të përmirësuar funksionalitetin e aplikacioneve HTML.
Më poshtë është lista e veçorive më të rëndësishme të Vue.js:
Komponentët Vue.js janë një nga veçoritë e rëndësishme të këtij kuadri. Ato përdoren për të zgjeruar elementët bazë HTML për të përmbledhur kodin e ripërdorshëm. Mund të krijoni elementë të personalizuar të ripërdorshëm në aplikacionet Vue.js që më vonë mund të ripërdoren në HTML.
Vue.js ofron shabllone të bazuara në HTML që mund të përdoren për të lidhur DOM-in e dhënë me të dhënat e shembullit Vue. Të gjithë shabllonet Vue janë HTML të vlefshëm që mund të analizohen nga shfletues dhe analizues HTML që përputhen me specifikat. Vue.js përpilon modelet në funksionet e paraqitjes Virtual DOM. Vue i jep komponentët në kujtesën virtuale DOM përpara se të rifreskojë shfletuesin. Vue gjithashtu mund të llogarisë numrin minimal të përbërësve për t'u rindërtuar dhe zbatuar sasinë minimale të manipulimit DOM kur ndryshon gjendjen e aplikacionit.
Vue ofron një sistem reagimi që përdor objekte të thjeshta JavaScript dhe optimizon rikthimin. Në këtë proces, çdo komponent mban gjurmët e varësive të tij reaktive, kështu që sistemi e di saktësisht se kur dhe cilët komponentë duhet të rindërtojë.
Navigimi i faqeve bëhet me ndihmën e vue-ruter. Ju mund të përdorni bibliotekën vue-router të mbështetur zyrtarisht për aplikacionin tuaj me një faqe.
Vue ju lejon të përdorni efekte të ndryshme tranzicioni kur elementët futen, përditësohen ose hiqen nga DOM.
Ka disa mënyra për të përdorur Vue.js. Mund ta instaloni duke shkuar në faqen e tij zyrtare ose mund të filloni të përdorni skedarin Vue.js gjithashtu nga biblioteka CDN. Këtu janë disa mënyra për të përdorur Vue.js në projektin tuaj.
Nëse dëshironi të përdorni etiketën <script> i Vue.js direkt në skedarin tuaj HTML, duhet ta shkarkoni nga faqja zyrtare e internetit.
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html> Le të shkojmë në faqen zyrtare të Vue.js https://vuejs.org/v2/guide/installation.html për të shkarkuar vue.js sipas nevojave tuaja.
Ju gjithashtu mund të përdorni skedarin Vue.js nga CDN, në aplikacionin tuaj. Përdorni lidhjen https://unpkg.com/vue@3/dist/vue.global.js brenda elementit <script>, si më poshtë:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Vue.js është një nga teknologjitë më të fundit të softuerit që përdoret gjerësisht për zhvillimin e ueb-it dhe ndërtimin e aplikacioneve me një faqe (SPA). Siç mund ta merrni me mend nga emri, ai përdoret kryesisht për UI ose anën e ekranit të projektit.
Le të shohim përfitimet e përdorimit të Vue.js në projektin tuaj:
Një nga avantazhet më të mëdha të Vue.js është se është shumë i vogël në përmasa. Suksesi i një kornize JavaScript varet shumë nga madhësia e tij dhe kjo shtojcë emocionuese JavaScript është vetëm 18-21 KB, kështu që ju mund ta shkarkoni dhe përdorni shumë lehtë në asnjë kohë.
Korniza Vue.js ka një strukturë shumë të thjeshtë dhe është shumë e lehtë për t'u kuptuar. Kjo është një nga arsyet e popullaritetit të kësaj kornize. Nëse jeni njohur me HTML dhe JavaScript, mund të kodoni lehtësisht në Vue.js. Përdoruesit mund të shtojnë lehtësisht Vue.js në projektin e tyre të internetit për shkak të strukturës së tij të thjeshtë dhe të zhvillojnë aplikacione.
Vue.js ka shumë komponentë për gjithçka dhe mund të integrohet shumë shpejt me aplikacionet ekzistuese. Mund ta integroni me çdo aplikacion të shkruar në JavaScript.
Natyra fleksibile e Vue.js e bën gjithashtu të lehtë për t'u kuptuar nga zhvilluesit e React.js, Angular.js dhe çdo kornize tjetër të re JavaScript. Ofron shumë fleksibilitet për të përdorur nyjet virtuale për të shkruar skedarë HTML, skedarë JavaScript dhe skedarë të pastër JavaScript.
Mund të krijoni elementë të personalizuar që janë të ripërdorshëm në aplikacionet Vue.js.
Vue.js ofron dokumentacion shumë të thjeshtë, të plotë dhe të detajuar, kështu që zhvilluesit që kanë pak ide rreth HTML dhe JavaScript mund ta përdorin atë për të programuar.
Vue.js përdor DOM virtual të ngjashëm me kornizat e tjera ekzistuese si ReactJS, Ember, etj. DOM virtual është një përfaqësim i lehtë në memorie i pemës origjinale të HTML DOM dhe përditësohet pa ndikuar në DOM fillestar.
Vue.js ofron komunikim të dyanshëm me arkitekturën e tij Model View View (MVVM) që thjeshton trajtimin e blloqeve HTML.
Korniza vjen me një sistem që na lejon të japim në mënyrë deklarative të dhënat në DOM duke përdorur sintaksë të modelit të thjeshtë dhe të drejtpërdrejtë.
Këtu është një shembull:
<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>Korniza Vue.js na lejon defiNire atribute HTML të quajtura direktiva, të cilat përdoren për të ofruar funksionalitet për aplikacionet HTML.
Ekzistojnë dy lloje direktivash në Vue.js:
Vue.js përdor kllapa të dyfishta {{}} si mbajtëse vendesh për të dhënat, dhe direktivat Vue.js janë atribute HTML që përdorin një prefiks v-.
Një aplikacion Vue lidhet me një element të vetëm DOM dhe e kontrollon plotësisht atë. Në shembullin e mësipërm, është #app.
Me Vue ne mund ta konsiderojmë HTML-në si pikë hyrëse, dhe gjithçka tjetër ndodh brenda instancës së krijuar Vue.
Le të shohim një shembull ku provojmë lidhjen e elementeve dhe atributeve:
<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> Në këtë rast, atributi i ri v-bind është direktiva. Direktivat përdoren me një prefiks v- për të treguar se ato janë atribute unike të ofruara nga Vue dhe përdoren për të aplikuar sjellje të posaçme reaguese në DOM-in e dhënë.
Rezultati i shembullit është si më poshtë
Ercole Palmeri
Sektori detar është një fuqi e vërtetë ekonomike globale, e cila ka lundruar drejt një tregu prej 150 miliardë...
Të hënën e kaluar, Financial Times njoftoi një marrëveshje me OpenAI. FT licencon gazetarinë e saj të klasit botëror…
Miliona njerëz paguajnë për shërbimet e transmetimit, duke paguar tarifat mujore të abonimit. Është e zakonshme që ju…
Coveware nga Veeam do të vazhdojë të ofrojë shërbime të reagimit ndaj incidenteve të zhvatjes kibernetike. Coveware do të ofrojë aftësi mjeko-ligjore dhe riparimi…
