Vue.js ĉefe fokusiĝas al la bildiga parto de la aplikaĵo, ankaŭ nomata antaŭa evoluado. Vue.js populariĝas tago post tago ĉar ĝi estas tre facile integrebla kun aliaj projektoj kaj bibliotekoj. Ĝi estas tre simpla por instali kaj uzi.
Vue.js estas progresema JavaScript-kadro malferma fonto uzata por evoluigado de interagaj interretaj uzantinterfacoj kaj unupaĝaj aplikoj (SPAoj). Vue.js estas ofte referita kiel Vue kaj prononcita kiel "view.js" aŭ "vido".
Unupaĝa Apliko aŭ SPA estas retejo aŭ retejo, kiu provizas uzantojn per tre glata, respondema kaj rapida sperto simila al labortabla aplikaĵo. Unupaĝa aplikaĵo enhavas menuon, butonojn kaj blokojn sur ununura paĝo. Kiam uzanto klakas sur unu el ili, ĝi dinamike reverkas la nunan paĝon prefere ol ŝargi tutajn novajn paĝojn de servilo. Ĉi tio estas la kialo malantaŭ ĝia respondema rapideco.
Vue estas esence konstruita por disvolvo de fasado, do ĝi devas trakti multajn HTML, JavaScript kaj CSS-dosierojn. Vue.js faciligas al uzantoj etendi HTML kun HTML-atributoj nomataj direktivoj. Vue.js provizas enkonstruitajn direktivojn kaj multajn direktivojn definite de la uzanto por plibonigi la funkciecon de HTML-aplikoj.
Malsupre estas la listo de la plej gravaj funkcioj de Vue.js:
Vue.js-komponantoj estas unu el la gravaj trajtoj de ĉi tiu kadro. Ili estas uzataj por etendi bazajn HTML-elementojn por enkapsuligi reuzeblan kodon. Vi povas krei reuzeblajn kutimajn elementojn en Vue.js-aplikoj kiuj poste povas esti reuzitaj en HTML.
Vue.js provizas HTML-bazitajn ŝablonojn, kiuj povas esti uzataj por asocii la bilditan DOM kun Vue-instancaj datumoj. Ĉiuj Vue-ŝablonoj estas validaj HTML, kiuj povas esti analizitaj per specif-konformaj retumiloj kaj HTML-analiziloj. Vue.js kompilas modelojn en Virtualajn DOM-bildigajn funkciojn. Vue igas komponantojn en virtualan DOM-memoron antaŭ refreŝigado de la retumilo. Vue ankaŭ povas kalkuli la minimuman nombron da komponantoj por reprezenti kaj apliki la minimuman kvanton de DOM-manipulado kiam ŝanĝas aplikan staton.
Vue disponigas respondeman sistemon, kiu uzas simplajn JavaScript-objektojn kaj optimumigas reprezentadon. En ĉi tiu procezo, ĉiu komponanto kontrolas siajn reaktivajn dependecojn, do la sistemo scias precize kiam kaj kiuj komponantoj reprezentu.
Paĝa navigado estas farita kun la helpo de vue-router. Vi povas uzi la oficiale subtenata vue-router-biblioteko por via unupaĝa aplikaĵo.
Vue permesas uzi malsamajn transirajn efikojn kiam elementoj estas enmetitaj, ĝisdatigitaj aŭ forigitaj de la DOM.
Estas pluraj metodoj por uzi Vue.js. Vi povas instali ĝin irante al ĝia oficiala retejo aŭ vi povas komenci uzi la Vue.js-dosieron ankaŭ de la CDN-biblioteko. Jen kelkaj manieroj uzi Vue.js en via projekto.
Se vi volas uzi la etikedon <script> de Vue.js rekte en vian HTML-dosieron, vi devas elŝuti ĝin de la oficiala retejo.
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html> Ni iru al la oficiala retejo de Vue.js https://vuejs.org/v2/guide/installation.html por elŝuti vue.js laŭ viaj bezonoj.
Vi ankaŭ povas uzi la Vue.js-dosieron de CDN, en via aplikaĵo. Uzu la ligilon https://unpkg.com/vue@3/dist/vue.global.js ene de la elemento <script>, kiel sube:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Vue.js estas unu el la plej novaj programaj teknologioj vaste uzataj por TTT-evoluo kaj konstruado de Unupaĝaj Aplikoj (SPA). Kiel vi povas supozi el la nomo, ĝi estas plejparte uzata por UI aŭ montra flanko de la projekto.
Ni vidu la avantaĝojn de uzado de Vue.js en via projekto:
Unu el la plej grandaj avantaĝoj de Vue.js estas, ke ĝi estas tre malgranda en grandeco. La sukceso de JavaScript-kadro multe dependas de ĝia grandeco kaj ĉi tiu ekscita JavaScript kromaĵo estas nur 18-21KB, do vi povas tre facile elŝuti kaj uzi ĝin en neniu tempo.
La kadro Vue.js havas tre simplan strukturon kaj estas tre facile komprenebla. Ĝi estas unu el la kialoj de la populareco de ĉi tiu kadro. Se vi konas HTML kaj JavaScript, vi povas facile kodigi en Vue.js. Uzantoj povas facile aldoni Vue.js al sia retprojekto pro ĝia simpla strukturo kaj disvolvi aplikaĵojn.
Vue.js havas multajn komponentojn por ĉio kaj povas esti integrita tre rapide kun ekzistantaj aplikoj. Vi povas integri ĝin kun ajna aplikaĵo skribita en JavaScript.
La fleksebla naturo de Vue.js ankaŭ faciligas la komprenon por programistoj de React.js, Angular.js kaj iuj aliaj novaj JavaScript-kadroj. Ĝi provizas multan flekseblecon por uzi virtualajn nodojn por skribi HTML-dosierojn, JavaScript-dosierojn kaj purajn JavaScript-dosierojn.
Vi povas krei kutimajn elementojn, kiuj estas reuzeblaj en Vue.js-aplikoj.
Vue.js provizas tre simplan, kompletan kaj detalan dokumentaron, do programistoj, kiuj havas malmulte da ideo pri HTML kaj JavaScript, povas uzi ĝin por programi.
Vue.js uzas virtualan DOM similan al aliaj ekzistantaj kadroj kiel ReactJS, Ember, ktp. La virtuala DOM estas malpeza en-memora arboreprezento de la origina HTML DOM kaj estas ĝisdatigita sen influado de la komenca DOM.
Vue.js provizas dudirektan komunikadon per sia arkitekturo Model View View Model (MVVM), kiu simpligas la uzadon de HTML-blokoj.
La kadro venas kun sistemo, kiu permesas al ni deklare redoni datumojn al la DOM uzante simplan kaj simplan modelsintakso.
Jen ekzemplo:
<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>La kadro Vue.js permesas al ni defimiaj HTML-atributoj nomataj direktivoj, kiuj estas uzataj por provizi funkciojn al HTML-aplikoj.
Estas du specoj de direktivoj en Vue.js:
Vue.js uzas duoblajn krampojn {{}} kiel anstataŭaĵojn por datumoj, kaj Vue.js direktivoj estas HTML-atributoj kiuj uzas v-prefikson.
Vue-aplikaĵo konektas al ununura DOM-elemento kaj plene kontrolas ĝin. En la supra ekzemplo, ĝi estas #app.
Kun Vue ni povas konsideri la HTML kiel la enirpunkton, kaj ĉio alia okazas ene de la kreita Vue-instanco.
Ni vidu ekzemplon, kie ni provas elementon kaj atributan ligadon:
<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> En ĉi tiu kazo, la nova v-bind-atributo estas la direktivo. Direktivoj estas uzataj kun v-prefikso por indiki ke ili estas unikaj atributoj disponigitaj fare de Vue, kaj estas uzataj por apliki specialan respondeman konduton al la farita DOM.
La rezulto de la ekzemplo estas la sekva
Ercole Palmeri
La maramea sektoro estas vera tutmonda ekonomia potenco, kiu navigis al merkato de 150 miliardoj...
Pasintlunde, la Financial Times anoncis interkonsenton kun OpenAI. FT licencas sian mondklasan ĵurnalismon...
Milionoj da homoj pagas por streaming-servoj, pagante monatajn abonkotizojn. Estas komuna opinio, ke vi...
Coveware de Veeam daŭre liveros servojn de respondaj incidentoj pri ciberĉantaĝo. Coveware ofertos krimmedicinajn kaj solvajn kapablojn...
