Vue.js keskittyy pääasiassa sovelluksen visualisointiosaan, jota kutsutaan myös etupään kehitykseksi. Vue.js on tulossa suosituksi päivä päivältä, koska se on erittäin helppo integroida muihin projekteihin ja kirjastoihin. Se on erittäin helppo asentaa ja käyttää.
Vue.js on progressiivinen JavaScript-kehys avoimen lähdekoodin käytetään interaktiivisten web-käyttöliittymien ja yksisivuisten sovellusten (SPA:iden) kehittämiseen. Vue.js:stä käytetään yleisesti nimitystä Vue ja se lausutaan nimellä "view.js" tai "view".
Yksisivuinen sovellus tai SPA on verkkosovellus tai verkkosivusto, joka tarjoaa käyttäjille erittäin sujuvan, reagoivan ja nopean käyttökokemuksen, joka muistuttaa työpöytäsovellusta. Yksisivuinen sovellus sisältää valikon, painikkeet ja lohkot yhdellä sivulla. Kun käyttäjä napsauttaa yhtä niistä, se kirjoittaa nykyisen sivun dynaamisesti uudelleen sen sijaan, että lataa kokonaan uusia sivuja palvelimelta. Tämä on syy sen reagointinopeuden takana.
Vue on pohjimmiltaan kehitetty käyttöliittymäkehitykseen, joten sen on käsiteltävä paljon HTML-, JavaScript- ja CSS-tiedostoja. Vue.js:n avulla käyttäjät voivat helposti laajentaa HTML-koodia HTML-attribuutteilla, joita kutsutaan direktiiveiksi. Vue.js tarjoaa sisäänrakennettuja direktiivejä ja monia direktiivejä defikäyttäjä voi parantaa HTML-sovellusten toimivuutta.
Alla on luettelo Vue.js:n tärkeimmistä ominaisuuksista:
Vue.js-komponentit ovat yksi tämän kehyksen tärkeistä ominaisuuksista. Niitä käytetään laajentamaan HTML-peruselementtejä uudelleen käytettävän koodin kapseloimiseksi. Voit luoda uudelleenkäytettäviä mukautettuja elementtejä Vue.js-sovelluksissa, joita voidaan myöhemmin käyttää uudelleen HTML:ssä.
Vue.js tarjoaa HTML-pohjaisia malleja, joita voidaan käyttää renderoidun DOM:n yhdistämiseen Vue-ilmentymien tietoihin. Kaikki Vue-mallit ovat kelvollisia HTML-koodeja, jotka voidaan jäsentää määritysten mukaisilla selaimilla ja HTML-jäsentimillä. Vue.js kokoaa malleja Virtual DOM -renderöintifunktioiksi. Vue renderöi komponentit virtuaaliseen DOM-muistiin ennen selaimen päivittämistä. Vue voi myös laskea uudelleen renderöivien komponenttien vähimmäismäärän ja käyttää DOM-käsittelyn vähimmäismäärää sovelluksen tilan muuttamisen yhteydessä.
Vue tarjoaa reagointijärjestelmän, joka käyttää yksinkertaisia JavaScript-objekteja ja optimoi uudelleenrenderöinnin. Tässä prosessissa jokainen komponentti pitää kirjaa reaktiivisista riippuvuuksistaan, joten järjestelmä tietää tarkalleen milloin ja mitkä komponentit renderöidä uudelleen.
Sivulla navigointi tapahtuu vue-reitittimen avulla. Voit käyttää virallisesti tuettua vue-router-kirjastoa yksisivuisessa sovelluksessasi.
Vue antaa sinun käyttää erilaisia siirtymätehosteita, kun elementtejä lisätään, päivitetään tai poistetaan DOM:sta.
Vue.js:n käyttämiseen on useita tapoja. Voit asentaa sen menemällä sen viralliselle sivustolle tai voit myös alkaa käyttää Vue.js-tiedostoa CDN-kirjastosta. Tässä on joitain tapoja käyttää Vue.js:ää projektissasi.
Jos haluat käyttää tunnistetta <script> Vue.js:n suoraan HTML-tiedostoosi, sinun on ladattava se viralliselta verkkosivustolta.
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html> Siirrytään Vue.js:n viralliselle verkkosivustolle https://vuejs.org/v2/guide/installation.html ladataksesi vue.js:n tarpeidesi mukaan.
Voit myös käyttää Vue.js-tiedostoa CDN:stä sovelluksessasi. Käytä elementin sisällä olevaa linkkiä https://unpkg.com/vue@3/dist/vue.global.js <script>, kuten alla:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Vue.js on yksi uusimmista ohjelmistotekniikoista, joita käytetään laajalti web-kehitykseen ja Single Page Applications (SPA) -sovellusten rakentamiseen. Kuten nimestä voi arvata, sitä käytetään enimmäkseen käyttöliittymässä tai projektin näyttöpuolella.
Katsotaanpa Vue.js:n käytön edut projektissasi:
Yksi Vue.js:n suurimmista eduista on, että se on kooltaan hyvin pieni. JavaScript-kehyksen menestys riippuu paljon sen koosta, ja tämä jännittävä JavaScript-laajennus on vain 18-21 kt, joten voit helposti ladata ja käyttää sitä hetkessä.
Vue.js-kehyksellä on hyvin yksinkertainen rakenne ja se on erittäin helppo ymmärtää. Se on yksi syy tämän kehyksen suosioon. Jos tunnet HTML:n ja JavaScriptin, voit koodata helposti Vue.js:ssä. Käyttäjät voivat helposti lisätä Vue.js:n verkkoprojektiinsa sen yksinkertaisen rakenteen ansiosta ja kehittää sovelluksia.
Vue.js:ssa on monia komponentteja kaikkeen, ja se voidaan integroida erittäin nopeasti olemassa oleviin sovelluksiin. Voit integroida sen mihin tahansa JavaScriptillä kirjoitettuun sovellukseen.
Vue.js:n joustava luonne helpottaa myös React.js:n, Angular.js:n ja muiden uusien JavaScript-kehysten kehittäjien ymmärtämistä. Se tarjoaa paljon joustavuutta virtuaalisten solmujen käyttämiseen HTML-tiedostojen, JavaScript-tiedostojen ja puhtaiden JavaScript-tiedostojen kirjoittamiseen.
Voit luoda mukautettuja elementtejä, joita voidaan käyttää uudelleen Vue.js-sovelluksissa.
Vue.js tarjoaa erittäin yksinkertaisen, täydellisen ja yksityiskohtaisen dokumentaation, joten kehittäjät, joilla on vähän käsitystä HTML:stä ja JavaScriptistä, voivat käyttää sitä ohjelmointiin.
Vue.js käyttää virtuaalista DOM:ia, joka on samanlainen kuin muut olemassa olevat puitteet, kuten ReactJS, Ember jne. Virtuaalinen DOM on kevyt muistissa oleva alkuperäisen HTML DOM:n esitys, ja se päivitetään vaikuttamatta alkuperäiseen DOM:iin.
Vue.js tarjoaa kaksisuuntaisen viestinnän Model View View Model (MVVM) -arkkitehtuurinsa kanssa, joka yksinkertaistaa HTML-lohkojen käsittelyä.
Kehyksen mukana tulee järjestelmä, jonka avulla voimme ilmoittaa datan DOM:iin käyttämällä yksinkertaista ja suoraviivaista mallisyntaksia.
Tässä on esimerkki:
<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-kehys mahdollistaa sen definire HTML-attribuutteja, joita kutsutaan direktiiveiksi, joita käytetään tarjoamaan toimintoja HTML-sovelluksille.
Vue.js:ssä on kahdenlaisia ohjeita:
Vue.js käyttää kaksoissulkeita {{}} tietojen paikkamerkkinä, ja Vue.js-käskyt ovat HTML-attribuutteja, jotka käyttävät v-etuliitettä.
Vue-sovellus muodostaa yhteyden yhteen DOM-elementtiin ja hallitsee sitä täysin. Yllä olevassa esimerkissä se on #app.
Vuessa voimme pitää HTML:ää lähtökohtana, ja kaikki muu tapahtuu luodun Vue-ilmentymän sisällä.
Katsotaanpa esimerkkiä, jossa yritämme elementtien ja attribuuttien sidontaa:
<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> Tässä tapauksessa uusi v-bind-attribuutti on direktiivi. Direktiivejä käytetään v-etuliitteellä osoittamaan, että ne ovat Vuen tarjoamia ainutlaatuisia attribuutteja, ja niitä käytetään soveltamaan erityistä reagoivaa käyttäytymistä renderöityyn DOM:iin.
Esimerkin tulos on seuraava
Ercole Palmeri
Veeamin Coveware tarjoaa jatkossakin kyberkiristystapahtumien reagointipalveluita. Coveware tarjoaa rikosteknisiä ja korjaavia ominaisuuksia…
Ennakoiva huolto mullistaa öljy- ja kaasualan innovatiivisella ja ennakoivalla lähestymistavalla laitosten hallintaan.…
Britannian CMA on antanut varoituksen Big Techin käyttäytymisestä tekoälymarkkinoilla. Siellä…
Euroopan unionin rakennusten energiatehokkuuden parantamiseksi laatima "Green Houses" -asetus on saanut lainsäädäntöprosessinsa päätökseen…
