artikels

Wat is in Single Page Applikaasje en wat is Vue.js

Vue.js is in progressive en iepen boarne JavaSkript-ramt brûkt om ynteraktive web brûkersynterfaces en applikaasjes op ien side te ûntwikkeljen.

Vue.js rjochtet him benammen op it fisualisaasjediel fan 'e applikaasje, ek wol front-endûntwikkeling neamd. Vue.js wurdt alle dagen populêr, om't it heul maklik is om te yntegrearjen mei oare projekten en bibleteken. It is heul ienfâldich om te ynstallearjen en te brûken.

Wat is Vue.js?

Vue.js is in progressive JavaSkript ramt iepen Boarne brûkt foar it ûntwikkeljen fan ynteraktive web brûkersynterfaces en single page applikaasjes (SPA's). Vue.js wurdt ornaris oantsjutten as Vue en útsprutsen as "view.js" of "view".

Wat is in Single Page Application (SPA)?

A Single Page Application of SPA is in webapplikaasje of webside dy't brûkers in heul soepele, reageare en rappe ûnderfining leveret lykas in buroblêdapplikaasje. In applikaasje op ien side befettet in menu, knoppen en blokken op ien side. As in brûker op ien fan har klikt, skriuwt it dynamysk de aktuele side oer ynstee fan it laden fan nije siden fan in server. Dit is de reden efter syn responsive snelheid.

Vue is yn prinsipe boud foar frontend-ûntwikkeling, dus it moat in protte HTML-, JavaScript- en CSS-bestannen behannelje. Vue.js makket it maklik foar brûkers in útwreidzje HTML mei HTML attributen neamd rjochtlinen. Vue.js jout ynboude rjochtlinen en in protte rjochtlinen definite troch de brûker om de funksjonaliteit fan HTML-applikaasjes te ferbetterjen.

Skaaimerken fan Vue.js

Hjirûnder is de list mei de wichtichste funksjes fan Vue.js:

Components

Vue.js-komponinten binne ien fan 'e wichtige skaaimerken fan dit ramt. Se wurde brûkt om basis HTML-eleminten út te wreidzjen om werbrûkbere koade yn te kapsulearjen. Jo kinne meitsje werbrûkbere oanpaste eleminten yn Vue.js applikaasjes dy't letter kinne wurde werbrûkt yn HTML.

Templates

Vue.js jout HTML-basearre sjabloanen dy't kinne wurde brûkt om te assosjearjen de werjûn DOM mei Vue eksimplaar gegevens. Alle Vue sjabloanen binne jildich HTML dat kin wurde parsed troch spec-compliant browsers en HTML parsers. Vue.js kompilearret modellen yn Virtual DOM rendering funksjes. Vue jout komponinten yn firtueel DOM-ûnthâld foar foardat de browser ferfarskje. Vue kin ek it minimale oantal komponinten berekkenje om opnij te meitsjen en it minimale bedrach fan DOM-manipulaasje oan te passen by it feroarjen fan applikaasjestatus.

Reaktiviteit

Vue leveret in reaksjesysteem dat ienfâldige JavaSkript-objekten brûkt en opnij rendering optimalisearret. Yn dit proses hâldt elke komponint har reaktive ôfhinklikens by, sadat it systeem krekt wit wannear't en hokker komponinten opnij wurde moatte.

Routing

Sidenavigaasje wurdt dien mei help fan vue-router. Jo kinne de offisjeel stipe vue-router-bibleteek brûke foar jo applikaasje mei ien side.

Transysjes

Vue lit jo ferskate oergongseffekten brûke as eleminten wurde ynfoege, bywurke of fuortsmiten fan 'e DOM.

Hoe te ynstallearjen Vue.js?

Der binne ferskate metoaden om te brûken Vue.js. Jo kinne it ynstallearje troch nei har offisjele side te gean of jo kinne ek begjinne mei it brûken fan it Vue.js-bestân fan 'e CDN-bibleteek. Hjir binne guon manieren om Vue.js te brûken yn jo projekt.

Direkt yn it HTML-bestân

As jo ​​​​de tag wolle brûke <script> fan Vue.js direkt yn jo HTML-bestân, moatte jo it downloade fan 'e offisjele webside.

<html>  
   <head>  
      <script type = "text/javascript" src = "vue.min.js"></script>  
   </head>  
   <body>
   </body>  
</html>  

Litte wy nei de offisjele webside fan Vue.js gean https://vuejs.org/v2/guide/installation.html te downloaden vue.js neffens jo behoeften.

It brûken fan CDN

Jo kinne ek de Vue.js-bestân fan CDN brûke, yn jo applikaasje. Brûk de keppeling https://unpkg.com/vue@3/dist/vue.global.js binnen it elemint <script>, lykas hjirûnder:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Foardielen fan in gebrûk Vue.js

Vue.js is ien fan 'e lêste softwaretechnologyen dy't in protte brûkt wurde foar webûntwikkeling en it bouwen fan Single Page Applications (SPA). Lykas jo fan 'e namme kinne riede, wurdt it meast brûkt foar UI of werjaan fan it projekt.

Litte wy de foardielen sjen fan it brûken fan Vue.js yn jo projekt:

Hiel lyts grutte

Ien fan de grutste foardielen fan Vue.js is dat it is hiel lyts yn grutte. It súkses fan in JavaSkript-ramt hinget in protte ôf fan har grutte en dizze spannende JavaScript-plugin is mar 18-21KB, dus jo kinne it yn gjin tiid heul maklik downloade en brûke.

Ynnovaasje nijsbrief
Mis it wichtichste nijs oer ynnovaasje net. Meld jo oan om se fia e-post te ûntfangen.
Maklik te begripen en koade

It ramt fan Vue.js hat in heul ienfâldige struktuer en is heul maklik te begripen. It is ien fan 'e redenen foar de populariteit fan dit ramt. As jo ​​binne bekend mei HTML en JavaScript, kinne jo maklik koade yn Vue.js. Brûkers kinne Vue.js maklik tafoegje oan har webprojekt troch syn ienfâldige struktuer en applikaasjes ûntwikkelje.

Ienfâldige yntegraasje mei besteande applikaasjes

Vue.js hat in protte komponinten foar alles en kin wurde yntegrearre hiel fluch mei besteande applikaasjes. Jo kinne it yntegrearje mei elke applikaasje skreaun yn JavaScript.

Fleksibel fan natuere

De fleksibele aard fan Vue.js makket it ek maklik foar ûntwikkelders fan React.js, Angular.js, en alle oare nije JavaSkript-ramten om te begripen. It biedt in protte fleksibiliteit om firtuele knooppunten te brûken om HTML-bestannen, JavaScript-bestannen en suvere JavaScript-bestannen te skriuwen.

Components

Jo kinne oanmeitsje oanpaste eleminten dy't reusable yn Vue.js applikaasjes.

Ienfâldige, folsleine en detaillearre dokumintaasje

Vue.js jout hiel simpel, folsleine en detaillearre dokumintaasje, sadat ûntwikkelders dy't hawwe in bytsje idee oer HTML en JavaSkript kin brûke it te programmearje.

firtuele DOM

Vue.js brûkt firtuele DOM fergelykber mei oare besteande kaders lykas ReactJS, Ember, ensfh. De firtuele DOM is in lichtgewicht beamfertsjintwurdiging yn it ûnthâld fan 'e orizjinele HTML DOM en wurdt bywurke sûnder de earste DOM te beynfloedzjen.

Twa-wei kommunikaasje

Vue.js jout twa-wei kommunikaasje mei syn Model View View Model (MVVM) arsjitektuer dy't simplifies de ôfhanneling fan HTML blokken.

Vue.js declarative rendering

It ramt komt mei in systeem dat ús deklaratyf gegevens oan 'e DOM kin werjaan mei ienfâldige en rjochtlinige modelsyntaksis.

Hjir is in foarbyld:

<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>

De Vue.js ramt lit ús ta definire HTML-attributen neamd rjochtlinen, dy't wurde brûkt om funksjonaliteit te jaan oan HTML-applikaasjes.

D'r binne twa soarten rjochtlinen yn Vue.js:

  • yntegreare rjochtlinen e
  • rjochtlinen defimakke troch de brûker.

Vue.js brûkt dûbele beugels {{}} as plakhâlders foar gegevens, en Vue.js-oanwizings binne HTML-attributen dy't in v-foarheaksel brûke.

In Vue-app ferbynt mei ien inkeld DOM-elemint en kontrolearret it folslein. Yn it boppesteande foarbyld is it #app.

Mei Vue kinne wy ​​​​de HTML beskôgje as it yngongspunt, en al it oare bart binnen de oanmakke Vue-eksimplaar.
Litte wy in foarbyld sjen wêr't wy elemint- en attribútbining besykje:

<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>  

Yn dit gefal is it nije v-bind-attribút de rjochtline. Rjochtlinen wurde brûkt mei in v-foarheaksel om oan te jaan dat se unike attributen binne levere troch Vue, en wurde brûkt om spesjale responsive gedrach oan te passen oan 'e rendered DOM.

It resultaat fan it foarbyld is it folgjende

Ercole Palmeri

Ynnovaasje nijsbrief
Mis it wichtichste nijs oer ynnovaasje net. Meld jo oan om se fia e-post te ûntfangen.

Recent articles

De takomst is hjir: hoe't de skipfeartsektor de wrâldekonomy revolúsjonearret

De marinesektor is in wiere wrâldwide ekonomyske macht, dy't navigearre is nei in merk fan 150 miljard ...

1 mei 2024

Utjouwers en OpenAI tekenje oerienkomsten om de stream fan ynformaasje te regeljen ferwurke troch Artificial Intelligence

Ofrûne moandei kundige de Financial Times in deal oan mei OpenAI. FT lisinsje har sjoernalistyk fan wrâldklasse ...

30 april 2024

Online betellingen: Hjir is hoe streamingtsjinsten jo foar altyd betelje

Miljoenen minsken betelje foar streamingtsjinsten, beteljen moanlikse abonnemintskosten. It is gewoane miening dat jo ...

29 april 2024

Veeam hat de meast wiidweidige stipe foar ransomware, fan beskerming oant antwurd en herstel

Coveware troch Veeam sil trochgean mei it leverjen fan antwurdtsjinsten foar cyberafpersing ynsidint. Coveware sil forensyske en sanearjen mooglikheden oanbiede ...

23 april 2024