7.10.2020 |

Vue3 / NuxtJS

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

yyx990803 - Overview

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.

https://chunkbytes.com/wp-content/uploads/2019/03/Folder-Structure.png


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

https://cli.vuejs.org/cli-new-project.png

https://cli.vuejs.org/cli-select-features.png

Zusätzlich bietet Vue eine GUI an, in welcher Projekte, aber auch Pakete zu dem jeweiligen Projekt hinzugefügt werden können.

vue ui

https://cli.vuejs.org/ui-new-project.png

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

https://v3.vuejs.org/images/lifecycle.png

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 createApp instead of new Vue({})
  • No more support for Filters, you should use computed proprieties or methods instead.
  • $on, $off, and $once methods are removed
  • data option should always be declared as a function
  • defineAsyncComponent is 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>

little-morning-94kfx

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

Zur Übersicht
Umut Tufanoglu

Mehr vom Devsquad...

Simon Jakubowski

JPA Reference with "orphanRemoval"

Umut Tufanoglu

Vuepress Book

Hallo, ich bin Jörg Herbst!

Ich bin der CEO von newcubator und freue mich über jede Nachricht!

* Pflichtfeld