Erste Schritte mit Vue.js

04.02.2021Ricky Elfner
Mobile Vue.js Open source JavaScript Frontend Framework Hands-on Tutorial How-to

Was ist Vue.js?

Vue.js ist ein weiteres JavaScript Framework. Jedoch mit dem grossen Unterschied, dass man sehr simpel beginnen kann, jedoch immer noch die Möglichkeit hat, sich nach und nach weitere Tools und Features hinzuzufügen. Somit ist es Ihnen möglich, einfache Widgets zu bauen oder aber auch ganze Applikationen. Dabei wird bei Vue.js auf komponentenorientierte Entwicklung gesetzt, wie es bereits bei Angular oder React bekannt ist. Die Entwickler beschreiben ihr eigenes OpenSource Framework selbst als ein sehr zugängliches, vielseitiges und leistungsfähiges Web-Framework, mit welchem wartbare und testbare Anwendungen geschrieben werden können.

Einstieg in VueJS

Bevor Sie mit dem Coden mit Vue.js beginnen können, müssen Sie NodeJS installiert haben. Sobald Sie dies haben, können Sie den vue-cli Helfer installieren. Dieser hilft Ihnen beim Erstellen und Verwalten von Vue.js Applikationen.

1
  npm install -g @vue/cli

Wenn die Installation abgeschlossen ist, können Sie innerhalb des Terminals in den Ordner wechseln, in dem Sie Ihre Vue.js App erstellen möchten. Den Erstellungsvorgang können Sie wie folgt starten:

1
  vue create meine-vue-app

Dabei müssen Sie anschliessend zwischen Features entscheiden, die Sie installieren möchten. Entweder nehmen Sie die Standardeinstellungen von Vue.js oder wählen selbst aus einer gegebenen Liste aus.

Sobald die Erstellung des Projekts abgeschlossen ist, können Sie in den dadurch bereitgestellten Ordner wechseln und den lokalen Server starten.

1
  npm run serve

In Folge dessen können Sie standardmässig über folgende IP-Adresse auf die Applikation zugreifen: http://localhost:8080/ Sobald Sie eine Applikation erstellt haben, können Sie Ihr Projekt-Ordner mit dem Befehl code . direkt in VS Code öffnen.

Aufbau einer Komponente

Eine Komponente in Vue.js ist meist in drei Teile unterteilt. Der erste Abschnitt wird durch eine <template>-Area gebildet. Darin wird der Aufbau der Komponente mithilfe von HTML-Tags vorgenommen.

1
2
3
4
5
    <template>
        <div>
    
        </div>
    </template>

Der nächste Bereich wird durch ein <script> Feld gekennzeichnet. Innerhalb davon finden die Import-Statements statt, ebenso wie die export Definition für die Komponente selbst.

1
2
3
4
5
6
7
    <script>
    import { } from " ";
    
    export default {
    
    }
    </script>

Der letzte Bestandteil ist für das Styling der Komponente vorgesehen. Wie von HTML bekannt, wird dieser Bereich durch das <stlye> Tag beschrieben.

1
2
3
    <style>
    
    </style>

Verwenden einer Komponente

Wenn Sie eine eigene Komponente erstellt haben, muss diese mindestens die beiden Teile <script> und <template> enthalten. Dabei müssen Sie auf jeden Fall beim Export den Namen der Komponente bestimmen, damit Sie die Komponente in einer anderen Komponente importieren und verwenden können. Sie werden jedoch in den nächsten Schritten sehen, wie sich dieser Export mit weiteren Informationen füllen wird.

1
2
3
export default {
  name: 'MeineButtons'
}

Möchte Sie nun diese Komponente beispielsweise in der Standard App.vue Komponente verwenden, müssen Sie die Komponente MeineButtons.vue importieren und zusätzlich im Export-Statement als Komponente angeben.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
    <script>
        import MeineButtons from "./components/MeineButtons";
        
        export default {
          name: 'App',
          components: {
            MeineButtons
          },
          data() {
          }
        }
    </script>

Anschliessend können Sie die neu importierte Komponenten in dem darüber liegenden <template>-Abschnitt, wie folgt verwenden:

1
2
3
4
5
    <template>
      <div id="app">
          <MeineButtons />
      </div>
    </template>

Event-Handling - v-on

Möchten Sie auf verschiedene DOM Events reagieren, benötigen Sie hierfür die v-on: Direktive. Dadurch ist es Ihnen möglich, JavaScript Code laufen zu lassen, sobald das Event getriggert wird. Nach dem Doppelpunkt müssen Sie zunächst das gewünschte Event bestimmen. In dem unteren Beispiel handelt es sich um ein click-Event. Nach dem Gleichheitszeichen können Sie entweder direkt den gewünschten JavaScriptCode angeben oder einen Methodenaufruf ausführen. Anstatt v-on: gibt es noch die Shorthand Version mit einem @-Zeichen.

1
2
3
    <button @click="zaehler += 1" >+ 1</button>
        <p>{{ zaehler }}</p>
    <button v-on:click="minusEins">- 1</button>

In diesem Beispiel verwendet der erste Button die Shorthand-Version @click und JavaScript Code direkt dahinter. Bei dem zweiten Button wird die Standardvariante mit v-on: verwendet. Dafür wird hier die Methode minus1 aufgerufen.

Anwenden von Methoden

Wie Sie in dem vorherigen Beispiel sehen können, wird bei beiden Funktionen ein Variable zaehler genutzt. Die Variable definieren sie in dem Teil data(), die Methode dagegen müssen Sie zur Unterteilung innerhalb des methods-Bereich definieren. Wenn Sie die Methode wie unten gezeigt definiert haben, können diese nun wie im oberen Beispiel aufgerufen werden.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
export default {
  name: 'MeineButtons',
  components: {
  },
  data() {
    return {
        zaehler: 0,
    }
  },
  methods: {
    minusEins(){
      this.counter -= 1;
    }
  }
}

Custom Events

Sie werden bestimmt öfters den Fall haben, dass Sie Werte von einer Child-Komponente zu einer Parent-Komponente geben wollen. Dafür benötigen Sie die Möglichkeit, auf ein Event zu reagieren und zusätzlich die Funktionalität $emit().

In diesem Beispiel handelt es sich um den Button innerhalb der Komponente MeineButtons.vue. Des Weiteren sehen Sie aber noch eine neues @click-Event, welcher die Methode meinCustomEventaufruft. Die Methode nimmt zusätzlich noch die Variable zaehler als Parameter entgegen.

1
    <button @click="minusEins" @click="meinCustomEvent(zaehler)">- 1</button>

Nun können Sie in dem Abschnitt methods die dazugehörige Implementierung der zuvor erwähnten Methode sehen. Hier ist das Besondere der Methoden-Aufruf mit this.$emit(). Als ersten Parameter müssen Sie den Namen angeben, über den aus der Parent-Klasse darauf zugegriffen werden kann. Der zweite Parameter ist die Variable, die Sie nach “oben” weitergeben wollen.

1
2
3
4
5
    methods: {
        meinCustomEvent(zaehler) {
          this.$emit('callMeinCustomEvent', zaehler);
        }
      }

Nun müssen Sie nur noch die Anwendung in der Parent-Klasse (App.vue) implementieren. Dafür nutzen Sie die importierte Komponente namens <MeineButtons>. Anschliessend können Sie das im vorherigen Schritt definierte Event callMeinCustomEvent angeben. Sobald dieses Event getriggert wird, soll die Methode meinCustomEventAusfuehren aufgerufen werden.

1
    <MeineButtons @callMeinCustomEvent="meinCustomEventAusfuehren"/>

Als Nächstes müssen Sie natürlich auch noch die Methode meinCustomEventAusfuehren erstellen. Diese benötigt einen Parameter, welchen Sie in aus der MeineButtons Komponente nach “oben” reichen. In diesem Fall soll es als Nachricht auf dem Bildschirm ausgegeben werden. Dieser ist in diesem Beispiel die zaheler Variable aus MeineButtons.vue.

1
2
3
4
5
    methods: {
        meinCustomEventAusfuehren(meineNachricht) {
          alert(meineNachricht)
        }   
      }

Bindings

Möchten Sie beispielsweise einem Button, einer Komponente oder sonst irgend einem Element eine Klasse oder ein Style hinzufügen, welches sich je nach Situation ändern soll, macht man die am besten über ein Attribut. Dazu gibt es die Direktive v-bind:. In anderen Frameworks ist dies auch als 2-Way-Data-Binding bekannt. Anhand des Beispiels können Sie sehen, dass dem einen Button eine Klasse negativ und dem anderen Button eine Klasse positv hinzugefügt werden. Je nachdem, ob die Zähler Variable grösser oder kleiner Null ist, wird diese anhand von true oder false gesetzt. Auch hier gibt es eine kürzere Schreibweise, Sie können einfach v-bind weglassen und nur :class schreiben.

1
2
3
    <button @click="zaehler += 1"  v-bind:class="{'positiv' :  zaehler > 0} ">+ 1</button>
        <p>{{ zaehler }}</p>
    <button v-on:click="minusEins"  :class="{'negativ' :  zaehler < 0}">- 1</button>

Nun sollen die Klassen einen separaten Style bekommen, dazu können Sie in dem Style-Abschnitt die beiden Klasse anlegen und die gewünschten Änderungen bestimmen.

1
2
3
4
5
6
7
8
<style>
    .positiv {
    background-color: green;
}
    .negativ {
    background-color: red;
}
</style>

Weitere Direktiven von VueJS währen noch v-if und v-for.

Falls dieser Blog-Beitrag Ihr Interesse geweckt hat, gibt es ein Tutorial, mit welchen Sie eine ToDo-Liste erstellen können

Ricky Elfner

Ricky Elfner – Denker, Überlebenskünstler, Gadget-Sammler. Dabei ist er immer auf der Suche nach neuen Innovationen, sowie Tech News, um immer über aktuelle Themen schreiben zu können.