Vue.js se zaměřuje především na vizualizační část aplikace, nazývanou také front-end vývoj. Vue.js je den ode dne populární, protože je velmi snadné jej integrovat s jinými projekty a knihovnami. Je velmi jednoduchá na instalaci a použití.
Vue.js je progresivní rámec JavaScriptu open source používá se pro vývoj interaktivních webových uživatelských rozhraní a jednostránkových aplikací (SPA). Vue.js se běžně označuje jako Vue a vyslovuje se jako „view.js“ nebo „view“.
Jednostránková aplikace neboli SPA je webová aplikace nebo webová stránka, která uživatelům poskytuje velmi hladký, citlivý a rychlý zážitek podobný desktopové aplikaci. Jednostránková aplikace obsahuje nabídku, tlačítka a bloky na jedné stránce. Když uživatel klikne na jeden z nich, dynamicky přepíše aktuální stránku, místo aby načítal celé nové stránky ze serveru. To je důvod jeho rychlosti odezvy.
Vue je v podstatě vyvinut pro frontendový vývoj, takže si musí poradit se spoustou HTML, JavaScript a CSS souborů. Vue.js uživatelům usnadňuje rozšíření HTML o atributy HTML zvané direktivy. Vue.js poskytuje vestavěné direktivy a mnoho direktiv definite uživatelem ke zlepšení funkčnosti HTML aplikací.
Níže je uveden seznam nejdůležitějších funkcí Vue.js:
Komponenty Vue.js jsou jednou z důležitých funkcí tohoto rámce. Používají se k rozšíření základních prvků HTML k zapouzdření opakovaně použitelného kódu. V aplikacích Vue.js můžete vytvářet opakovaně použitelné vlastní prvky, které lze později znovu použít v HTML.
Vue.js poskytuje šablony založené na HTML, které lze použít k přidružení vykresleného DOM k datům instance Vue. Všechny šablony Vue jsou platné HTML, které mohou být analyzovány prohlížeči a analyzátory HTML vyhovujícími specifikacím. Vue.js kompiluje modely do funkcí vykreslování virtuálního DOM. Vue před obnovením prohlížeče vykreslí komponenty do virtuální paměti DOM. Vue může také vypočítat minimální počet komponent pro opětovné vykreslení a použít minimální množství manipulace DOM při změně stavu aplikace.
Vue poskytuje systém odezvy, který využívá jednoduché objekty JavaScriptu a optimalizuje opětovné vykreslování. V tomto procesu každá komponenta sleduje své reaktivní závislosti, takže systém přesně ví, kdy a které komponenty má znovu vykreslit.
Navigace po stránce se provádí pomocí vue-routeru. Pro svou jednostránkovou aplikaci můžete použít oficiálně podporovanou knihovnu vue-router.
Vue vám umožňuje používat různé přechodové efekty, když jsou prvky vkládány, aktualizovány nebo odstraňovány z DOM.
Existuje několik způsobů, jak použít Vue.js. Můžete si jej nainstalovat tak, že přejdete na jeho oficiální stránky nebo můžete začít používat také soubor Vue.js z knihovny CDN. Podívejme se níže na některé způsoby použití Vue.js ve vašem projektu.
Pokud chcete použít značku <script> Vue.js přímo do vašeho HTML souboru, musíte si jej stáhnout z oficiálních stránek.
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html> Pojďme na oficiální stránky Vue.js https://vuejs.org/v2/guide/installation.html ke stažení vue.js podle vašich potřeb.
Ve své aplikaci můžete také použít soubor Vue.js z CDN. Použijte odkaz https://unpkg.com/vue@3/dist/vue.global.js uvnitř prvku <script>, jak je uvedeno níže:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Vue.js je jednou z nejnovějších softwarových technologií široce používaných pro vývoj webu a vytváření jednostránkových aplikací (SPA). Jak můžete uhodnout z názvu, většinou se používá pro UI nebo zobrazovací stránku projektu.
Pojďme se podívat na výhody používání Vue.js ve vašem projektu:
Jednou z největších výhod Vue.js je velmi malá velikost. Úspěch JavaScriptového frameworku hodně závisí na jeho velikosti a tento vzrušující JavaScript plugin má pouze 18-21KB, takže si jej můžete velmi snadno stáhnout a používat během okamžiku.
Rámec Vue.js má velmi jednoduchou strukturu a je velmi snadno pochopitelný. Je to jeden z důvodů popularity tohoto frameworku. Pokud jste obeznámeni s HTML a JavaScriptem, můžete snadno kódovat ve Vue.js. Uživatelé mohou snadno přidat Vue.js do svého webového projektu díky jeho jednoduché struktuře a vyvíjet aplikace.
Vue.js má mnoho komponent pro všechno a lze jej velmi rychle integrovat se stávajícími aplikacemi. Můžete jej integrovat s jakoukoli aplikací napsanou v JavaScriptu.
Flexibilní povaha Vue.js také usnadňuje pochopení pro vývojáře React.js, Angular.js a jakýchkoli dalších nových rámců JavaScriptu. Poskytuje velkou flexibilitu pro použití virtuálních uzlů k zápisu souborů HTML, souborů JavaScript a souborů čistého JavaScriptu.
Můžete vytvořit vlastní prvky, které jsou opakovaně použitelné v aplikacích Vue.js.
Vue.js poskytuje velmi jednoduchou, kompletní a podrobnou dokumentaci, takže vývojáři, kteří nemají o HTML a JavaScriptu ponětí, ji mohou použít k programování.
Vue.js používá virtuální DOM podobný ostatním existujícím frameworkům jako ReactJS, Ember atd. Virtuální DOM je odlehčená stromová reprezentace původního HTML DOM v paměti a je aktualizována bez ovlivnění původního DOM.
Vue.js poskytuje obousměrnou komunikaci s architekturou Model View View Model (MVVM), která zjednodušuje manipulaci s bloky HTML.
Rámec přichází se systémem, který nám umožňuje deklarativně vykreslovat data do DOM pomocí jednoduché a přímočaré syntaxe modelu.
Zde je příklad:
<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>Framework Vue.js nám to umožňuje definire HTML atributy nazývané direktivy, které se používají k poskytování funkcí HTML aplikacím.
Ve Vue.js existují dva typy direktiv:
Vue.js používá dvojité složené závorky {{}} jako zástupné symboly pro data a direktivy Vue.js jsou atributy HTML, které používají předponu v.
Aplikace Vue se připojuje k jedinému prvku DOM a plně jej ovládá. Ve výše uvedeném příkladu je to #app.
S Vue můžeme považovat HTML za vstupní bod a vše ostatní se děje uvnitř vytvořené instance Vue.
Podívejme se na příklad, kde vyzkoušíme vazbu prvků a 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 tomto případě je novým atributem v-bind direktiva. Direktivy se používají s předponou v- k označení toho, že se jedná o jedinečné atributy poskytované Vue, a používají se k aplikaci speciálního responzivního chování na vykreslený DOM.
Výsledek příkladu je následující
Ercole Palmeri
Rozvíjení jemné motoriky prostřednictvím vybarvování připravuje děti na složitější dovednosti, jako je psaní. Barvit…
Námořní sektor je skutečnou globální ekonomickou velmocí, která se dostala na 150miliardový trh...
Minulé pondělí Financial Times oznámily dohodu s OpenAI. FT licencuje svou prvotřídní žurnalistiku…
Miliony lidí platí za streamovací služby a platí měsíční předplatné. Je obecný názor, že jste…
