Vue.js se osredotoča predvsem na vizualizacijski del aplikacije, imenovan tudi front-end development. Vue.js iz dneva v dan postaja vse bolj priljubljen, saj ga je zelo enostavno integrirati z drugimi projekti in knjižnicami. Je zelo enostaven za namestitev in uporabo.
Vue.js je progresivno ogrodje JavaScript open source uporablja se za razvoj interaktivnih spletnih uporabniških vmesnikov in enostranskih aplikacij (SPA). Vue.js se običajno imenuje Vue in se izgovarja kot "view.js" ali "view".
Enostranska aplikacija ali SPA je spletna aplikacija ali spletno mesto, ki uporabnikom zagotavlja zelo gladko, odzivno in hitro izkušnjo, podobno namizni aplikaciji. Enostranska aplikacija vsebuje meni, gumbe in bloke na eni strani. Ko uporabnik klikne eno od njih, ta dinamično prepiše trenutno stran, namesto da bi s strežnika naložil nove strani. To je razlog za njegovo odzivnost.
Vue je v bistvu zasnovan za razvoj čelnega vmesnika, zato mora obravnavati veliko datotek HTML, JavaScript in CSS. Vue.js uporabnikom olajša razširitev HTML z atributi HTML, imenovanimi direktive. Vue.js ponuja vgrajene direktive in številne direktive definite uporabnik za izboljšanje funkcionalnosti aplikacij HTML.
Spodaj je seznam najpomembnejših funkcij Vue.js:
Komponente Vue.js so ena od pomembnih lastnosti tega okvira. Uporabljajo se za razširitev osnovnih elementov HTML za enkapsulacijo kode za večkratno uporabo. V aplikacijah Vue.js lahko ustvarite elemente po meri za večkratno uporabo, ki jih je mogoče pozneje znova uporabiti v HTML.
Vue.js ponuja predloge na osnovi HTML, ki jih je mogoče uporabiti za povezovanje upodobljene DOM s podatki primerka Vue. Vse predloge Vue so veljaven HTML, ki ga je mogoče razčleniti s specifikacijami skladnimi brskalniki in razčlenjevalniki HTML. Vue.js prevaja modele v funkcije upodabljanja Virtual DOM. Vue upodobi komponente v navidezni pomnilnik DOM, preden osveži brskalnik. Vue lahko izračuna tudi najmanjše število komponent za ponovno upodobitev in uporabi najmanjšo količino manipulacije DOM pri spreminjanju stanja aplikacije.
Vue zagotavlja sistem odzivnosti, ki uporablja preproste objekte JavaScript in optimizira ponovno upodabljanje. V tem procesu vsaka komponenta spremlja svoje reaktivne odvisnosti, tako da sistem natančno ve, kdaj in katere komponente mora znova upodobiti.
Navigacija po straneh poteka s pomočjo vue-routerja. Za svojo enostransko aplikacijo lahko uporabite uradno podprto knjižnico vue-router.
Vue vam omogoča uporabo različnih učinkov prehoda, ko so elementi vstavljeni, posodobljeni ali odstranjeni iz DOM.
Obstaja več načinov za uporabo Vue.js. Namestite ga lahko tako, da obiščete uradno spletno mesto ali pa začnete uporabljati tudi datoteko Vue.js iz knjižnice CDN. Spodaj si poglejmo nekaj načinov uporabe Vue.js v vašem projektu.
Če želite uporabiti oznako <script> Vue.js neposredno v datoteko HTML, jo morate prenesti z uradne spletne strani.
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html> Pojdimo na uradno spletno mesto Vue.js https://vuejs.org/v2/guide/installation.html za prenos vue.js glede na vaše potrebe.
V svoji aplikaciji lahko uporabite tudi datoteko Vue.js iz CDN. Uporabite povezavo https://unpkg.com/vue@3/dist/vue.global.js znotraj elementa <script>, kot spodaj:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Vue.js je ena najnovejših programskih tehnologij, ki se pogosto uporablja za spletni razvoj in gradnjo enostranskih aplikacij (SPA). Kot lahko uganete iz imena, se večinoma uporablja za uporabniški vmesnik ali zaslonsko stran projekta.
Oglejmo si prednosti uporabe Vue.js v vašem projektu:
Ena največjih prednosti Vue.js je, da je zelo majhen. Uspeh ogrodja JavaScript je zelo odvisen od njegove velikosti in ta vznemirljivi vtičnik JavaScript je velik le 18–21 KB, tako da ga lahko zelo preprosto prenesete in uporabite v hipu.
Ogrodje Vue.js ima zelo preprosto strukturo in je zelo lahko razumljivo. To je eden od razlogov za priljubljenost tega okvira. Če poznate HTML in JavaScript, lahko preprosto kodirate v Vue.js. Uporabniki lahko preprosto dodajo Vue.js v svoj spletni projekt zaradi njegove preproste strukture in razvijejo aplikacije.
Vue.js ima veliko komponent za vse in ga je mogoče zelo hitro integrirati z obstoječimi aplikacijami. Lahko ga integrirate s katero koli aplikacijo, napisano v JavaScriptu.
Prilagodljiva narava Vue.js tudi olajša razumevanje razvijalcem React.js, Angular.js in vseh drugih novih okvirov JavaScript. Zagotavlja veliko prilagodljivost pri uporabi virtualnih vozlišč za pisanje datotek HTML, datotek JavaScript in čistih datotek JavaScript.
Ustvarite lahko elemente po meri, ki jih je mogoče ponovno uporabiti v aplikacijah Vue.js.
Vue.js ponuja zelo preprosto, popolno in podrobno dokumentacijo, tako da jo lahko razvijalci, ki nimajo pojma o HTML in JavaScript, uporabljajo za programiranje.
Vue.js uporablja virtualni DOM, podobno kot druga obstoječa ogrodja, kot so ReactJS, Ember itd. Navidezni DOM je lahka drevesna predstavitev izvirnega HTML DOM v pomnilniku in se posodablja brez vpliva na začetni DOM.
Vue.js zagotavlja dvosmerno komunikacijo s svojo arhitekturo Model View View Model (MVVM), ki poenostavlja ravnanje z bloki HTML.
Ogrodje je opremljeno s sistemom, ki nam omogoča deklarativno upodobitev podatkov v DOM z uporabo preproste in enostavne sintakse modela.
Tukaj je primer:
<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>Ogrodje Vue.js nam omogoča definire HTML atributi, imenovani direktive, ki se uporabljajo za zagotavljanje funkcionalnosti aplikacijam HTML.
V Vue.js obstajata dve vrsti direktiv:
Vue.js uporablja dvojne oklepaje {{}} kot ograde za podatke, direktive Vue.js pa so atributi HTML, ki uporabljajo predpono v.
Aplikacija Vue se poveže z enim samim elementom DOM in ga popolnoma nadzoruje. V zgornjem primeru je to #app.
Z Vue lahko HTML obravnavamo kot vstopno točko, vse ostalo pa se zgodi znotraj ustvarjene instance Vue.
Oglejmo si primer, kjer poskušamo povezati element in atribut:
<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> V tem primeru je novi atribut v-bind direktiva. Direktive se uporabljajo s predpono v-, ki označujejo, da gre za edinstvene atribute, ki jih zagotavlja Vue, in se uporabljajo za uporabo posebnega odzivnega vedenja za upodobljen DOM.
Rezultat primera je naslednji
Ercole Palmeri
Operacija oftalmoplastike s komercialnim pregledovalnikom Apple Vision Pro je bila opravljena na polikliniki Catania…
Razvijanje finih motoričnih spretnosti z barvanjem otroke pripravi na kompleksnejše spretnosti, kot je pisanje. Za barvanje…
Pomorski sektor je prava svetovna gospodarska sila, ki je krmarila proti 150 milijardnemu trgu...
Prejšnji ponedeljek je Financial Times objavil dogovor z OpenAI. FT licencira svoje vrhunsko novinarstvo ...
