VueJs
Was ist VueJs?
Vue.js ist ein clientseitiges JavaScript-Webframework zum Erstellen von Single-Page-Webanwendungen. Sie verbindet die View und das Model über Two-Way-Data-Bindings. Creator → Evan You
Was ist NuxtJs?
Nuxt ist ein Framework, das auf Vue.js basiert, um moderne Webanwendungen zu erstellen. Es basiert auf den offiziellen Bibliotheken von Vue (vue, vue-router und vuex) und Entwicklungstools (Webpack, Babel und PostCSS). Das Ziel ist es, effizienter Vue Anwendungen zu schreiben.
Einfache Vue App über cdn
message und das Virutal-DOM sind jetzt verknüpft und alles ist jetzt reaktiv
<html>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello World',
}
}
})
app.mount('#app')
</script>
</body>
</html>https://codepen.io/28development/pen/BaKezBo
Über die Vue CLI kann man schnell eine neue Vue 3-App erstellen und dabei beispielsweise direkt bestimmte preset auswählen. Diese werden dann direkt bereitgestellt.
npm install vue → vorher natürlich vue installieren
vue create hello-world
Zusätzlich bietet Vue eine GUI an, in welcher Projekte, aber auch Pakete zu dem jeweiligen Projekt hinzugefügt werden können.
vue ui
Conditional
<template>
<div id="conditional-rendering">
<span v-if="seen">Now you see me</span>
</div>
</template>
const ConditionalRendering = {
data() {
return {
seen: true
}
}
}
Vue.createApp(ConditionalRendering).mount('#conditional-rendering')Loops
<div id="list-rendering">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
const ListRendering = {
data() {
return {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
}
}
Vue.createApp(ListRendering).mount('#list-rendering')Event Handling
<div id="basic-event">
<button @click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
Vue.createApp({
data() {
return {
counter: 1
}
}
}).mount('#basic-event')
# submit form
<form @submit="checkForm">
...Lifecycle
VueJs 3 Major Release 🚀
Release v3.0.0 One Piece · vuejs/vue-next
Breaking Changes
- Vue 3 has a new Global API, now we use
createAppinstead ofnew Vue({}) - No more support for Filters, you should use computed proprieties or methods instead.
-
$on,$off, and$oncemethods are removed -
dataoption should always be declared as a function -
defineAsyncComponentis the new method used to import and deal with async components
Vite
Alternativ kann man Vite verwenden, ein schnelles Build-Tool für moderne JavaScript-Projekte. Es verwendet während der Entwicklung Browser-native ES-Module in Kombination mit Hot Module Replacement. Bei diesem Ansatz müssen nur die Dateien gebündelt werden, die tatsächlich benötigt werden.
npm init vite-app hello-world
Neue Features
Composition API
Eine der wichtigsten Änderungen ist die Compositon API. Sie ermöglicht eine funktionsbasierte Schreibweise zum Schreiben von Komponenten.
Die Logik kann in "composition-functions" kapseln werden, welche komponentenübergreifend wiederverwenden werden kann.
Die Components sind so wenig komplex und wartbarer.
Einfaches Beispiel:
<template>
<div class="about">
<h1>This is an about page</h1>
<h1>{{ number }}</h1>
<button @click="incrementNumber">increment</button>
<button @click="decrementNumber">increment</button>
</div>
</template>
<script lang="ts">
import { ref, defineComponent } from "vue";
export default defineComponent({
name: "Home",
setup() {
const number = ref(0);
const incrementNumber = () => number.value++;
const decrementNumber = () => number.value--;
return { number, incrementNumber, decrementNumber };
}
});
</script>ref bezieht sich auf Reactive Reference
const number = ref(0);Bei Verwendung der Composition-API müssen die Werte zurückgegeben werden, die unser Template benötigen. Das erzeugt etwas mehr Code, aber dadurch lässt sich steuern, was wirklich verfügbar gemacht werden soll.
Suspense
Suspense ist eine native Vue-Komponente zur Behandlung asynchroner Abhängigkeiten. Mit Suspense lässt sich steuern, was gerendert werden soll, bis eine Bedingung erfüllt ist und unsere asynchrone Komponente bereit ist.
Darüber hinaus ist es eine bessere Möglichkeit, mehrere API-Aufrufe von verschiedenen Komponenten zu verarbeiten, als sich auf eine v-if-Ladebedingung zu verlassen.
<template>
<Suspense>
<template #default>
<GameList /> <!-- async component you want to render -->
</template>
<template #fallback>
Loading ...
</template>
</Suspense>
</template>Teleport
Teleport kann verwenden werden, um Komponenten zu erstellen, welche in verschiedene Teile der App verschoben / teleportiert werden können, indem wir auswählen, wo (DOM-Element) platziert werden soll, auch wenn an diesem Ort Ihre App nicht bereitgestellt ist.
Teleport verwendet die DOM-Elemente wieder, sodass der Status erhalten bleibt.
<div id="app"></div>
<div id="move-to-here"></div>
...
<template>
<teleport to="#move-to-here">
This should live outside of #app
</teleport>
</template>Der Target lässt sich in verschiedenen Variationen auswählen:
<teleport to="#id">
<teleport to=".class">
<teleport to="[data-modal]">Fragments
In Vue 2 konnte keine Vorlage mit zwei Elementen im selben Stamm erstellt werden. Der Grund dafür ist, dass die Vue-Instanz, die eine Vue-Componente darstellt, in ein einzelnes DOM Element gebunden werden muss.
Vue 2:
<template>
<div class="about">
...
</div>
</template>Vue 3:
<template>
<div class="about">
...
<div>
<div class="about-footer">
...
</div>
</template>Weitere Änderungen
- Bessere TypeScript-Unterstützung
→ Vue 3 ist vollständig in TypeScript geschrieben.
- bessere Typdefinitionen + Intellisense + Autocompletetion
- Improved Performance
- smaller bundle sizes
- treeshaking
Falls Material UI verwendet werden möchte, kann Vuetify verwendet werden:
Vuetify - A Material Design Framework for Vue.js
Other Stuff...
Lieber keine class component mehr benutzen
https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121
Drawbacks:
https://github.com/vuejs/rfcs/blob/class-api/active-rfcs/0000-class-api.md#motivation