Vue.js

Einführung

Vue ist ein gutes Framework für WebApps, kann aber auch nur zum Teilrendering eingesetzt werden. Behalte im Blick das Webapps aus Quellcode Sicht problematisch für die Suchmaschinen ist.

Wenn du nicht unbedingt eine Webapp bauen möchtest aber gerne einige Features von Vue nutzen möchtest (2-way-binding...) ist evtl. alpine.js nützlich)

alpine.js - Alternative mit weniger overhead die sich als jQuery mit "deklarativem Ansatz" und inspiriert von Tailwind, Vue etc. sieht. 

Links

Vue.js
Vue - Basic Concepts
Vue CLI
Vue - Components
Vue - Routing
Vue - Snippets

Vue In Depth

Basic Concepts

Vue - Basic Concepts

CLI & Arbeitsumgebung

Vue CLI

Components

Vue - Components

Vue Templates

Interpolation and Directives

Text Interpolation

Die einfachste Form der Interpolation ist Text-Interpolation. Hier wird einfach ein String der in der Component Logic ist ausgegeben. Die Ausgabe erfolgt wenn man den Variablennamen in doppelte geschweifte Klammern setzt. Das geht allerdings nicht in HTML Attributen. In Attributen nutzt man v-bind.

Beispiel: App.vue

<template>
  <div id="app">
    <Skills/>
  </div>
</template>

<script>
import Skills from './components/Skills.vue'

export default {
  name: 'app',
  components: {
    Skills
  }
}
</script>

<style>
</style>

Skills.vue

<template>
  <div>
    {{name}}
  </div>
</template>
<script>
export default {
  name: 'Skills',
  data(){
    return{
      name: 'Stephan'
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

Interpolation in Attributen

Boolean Interpolation ,ann man gut für Buttons verwenden. Wir verwenden eine um den Zustand eines Buttons zu verwalten.

Im Templateteil fügen wir hinzu:

<button v-on:click="changeName" v-bind:disabled="btnState">Change Name</button>

Hier sehen wir auch schon zwei Direktiven von View nämlich v-on und v-bind. Erläuterung folgt später.

Im Skriptteil fügen wir nach der name Eigenschaft eine weitere vom Typ Boolean hinzu:

name: 'Stephan',
btnState: true

Wichtig nun: Hier verwenden wir die Eigenschaft btnState in einem Attribut. Hier kann man keine geschweiften Klammern verwenden, aber Vue erkennt automatisch die Variable.

Expressions (Ausdrücke) in Interpolation verwenden

Man kann auch Conditionals nutzen. Basierend auf dem Code oben fügen wir im Template Teil der Komponente hinzu:

{{ btnState ? 'Button ist aktiv' : 'Button ist deaktiviert'}} 

Das gibt Button ist deaktiviert aus, da btnState ja auf true steht.

Direktiven

Oben haben wir schon zwei Direktiven geseehen, die ein Event festlegen und Binden. Folgende Direktiven gibt es:

    v-text
    v-html
    v-show
    v-if
    v-else
    v-else-if
    v-for
    v-on
    v-bind
    v-model
    v-pre
    v-cloak
    v-once

Beispiel Direktive v-for

In der Component Skills.vue im Template-Teil

<div class="skills">
  <div class="holder">
    <ul>
      <li v-for="(data, index) in skills" :key='index'>{{index}}. {{data.skill}}</li>
    </ul>
  </div>
</div>

und im Script Teil...

export default {
  name: 'Skills',
  data(){
    return{
      name: 'Stephan',
      btnState: true,
      skills: [
          { "skill": "Radfahren" },
          { "skill": "Schwimmen" }
      ]
    }
  }
}

v-if v-else

 <p v-if="skills.length >= 1">You have more than 1 skill</p>
      <p v-else>You have less than or equal to 1 skill</p>

Styles und Class Binding

Externe CSS Files einbinden

<style src="./Skills.css" scoped>
</style>

Class Binding

in skills.js

Setzte die Klasse .alert, aber nur wenn showAlert true ist.

  data() {
    return {
     ... ,
      showAlert: true  // Add this
    }
  },

Definiert die Eigenschaft showAlert

Dann noch den Style damit wir etwas sehen können:

<style scoped>
  .alert {
    background-color: yellow;
    width:100%;
    height: 30px;
  }
</style>

Auch der Not Operator funktioiniert:

{ alert: !showAlert}

Mehrere Klassen und ifs kann man zusammenfassen. Hier wird another-class über die Property showClass gesetzt (in Anführungszeichen wegen dem minus):

Variante v-bind:class mit Objekt

Man kann den HTML Code sauberer halten, wenn man als Klassenname ein Objekt einsetzt und die Klasse in der Logic implementiert: Template

Logic Teil:

data() {
    return {
      skills: [
          { "skill": "Vue.js" },
          { "skill": "Frontend Developer" }
      ],
      alertObject: {
        alert: true,
        // More classes here if you want..
      }
    }
  },

Style Attribut steuern mit Vue Style Binding

Template Teil

Logic Teil

data() {
    return {
      skills: [
          { "skill": "Vue.js" },
          { "skill": "Frontend Developer" }
      ],
      bgColor: 'yellow',
      bgWidth: '100%',
      bgHeight: '30px'
    }
  },

oder besser als Objekt: Template Teil

Logic Teil

alertObject: {
   bgColor: 'yellow',
   bgWidth: '100%',
   bgHeight: '30px'
}

Hinweis: Wir erkennen Objekte in der Regel an den Geschweiften (Wigley) Klammern {}

User Input und das v-model

... z.B. von Formularen wird vom Template an die Logic weitergereicht, verarbeitet und das Ergebnis wieder ans Template übergeben.

Ein Input Feld

In Skills.vue

Template Section:

<input type="text" placeholder="Enter a skill you have.." v-model="skill">
Vorlage:Skill

Logic Section:

 data(){
    return{
      skill: '',
      skills: [
...

Interessant hier: schon beim eingeben wird Vorlage:Skill befüllt

Methoden

Wir erweitern das Ganze und Implementieren zum ersten Mal eine Methode.

Plugins

Einbinden

Todo

Interessante Plugins

• vee-validate