buch.informatik.cc

Aussehen

Vue.js ​

info> Vue.js hat eine sehr gute Dokumentation in englischer Sprache. Hier soll nur ein Anknüpfungspunkt in deutscher Sprache gegeben werden, damit du dich selbst einfacher einarbeiten kannst.

Vue.js ist eine JavaScript-Bibliothek. Ihr Ziel ist es die Variablen aus dem Programm einfacher in Webseiten anzeigen zu können.

Vorbereitung ​

Du solltest HTML, CSS und JavScript zumindest in Grundzügen beherrschen.

In deiner Webseite musst du Vue.js eingebunden haben. Dazu kannst du es entweder herunterladen oder von einem öffentlichen Server (CDN) einbinden:

html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Um den Fehler in deinem Progrmm schneller zu finden ist eine Erweiterung für deinen Browser sehr zu empfehlen: devtools für Firefox, Chrome.

Erstes Beispiel ​

html
<div id="app">
  {{ message }}
</div>
javascript
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Das Ergebnis ist, dass auf deiner Webseite nun Hello Vue! ausgegeben wird. So einfach geht das. Und das schön, jede Änderung der Variable message wirkt sich sofort auf die Webseite aus.

warn> Eine Ausnahme besteht bei Arrays. Das musst du beachten.

Sehen wir uns das ein wenig genauer an:

In JavaScript legen wir ein Objekt namens app von der Klasse vue an. Darin initieren wir einige vorgebene Parameter.

  • el - gibt den Bereich an, indem Vue aktiv werden soll
  • data gibt die Daten an, welche Vue später darstellen soll.

In HTML vergeben wir dem ``div-Element die id app. Würde man in CSS dieses div-Element stylen wollen, so würde man #appals Selektor nehmen. Und genau das machen wir auch in Vue mit dem Parameterel` (element).

Entscheidungen und Schleifen ​

Entscheidungen ​

Mit Entscheidungen kannst du etwa Elemente nur anzeigen, wenn die notwendigen Daten vorhanden sind:

html
<div id="app-3">
  <span v-if="seen">Now you see me</span>
</div>
javascript
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

Schleifen ​

Hiermit kannst du Arrays oder auch Objekte vollständig ausgeben:

html
<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
javascript
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

Benutzereingaben speichern ​

Du kannst Benutzereingaben speichern und gleich ausgeben oder später verarbeiten:

html
<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
javascript
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

Funktionen auslösen ​

Bisher war alles recht statisch. Möchtest du, dass auf Knopfdruck eine Funktion ausgeführt wird, machst du das wie folgt:

html
<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
javascript
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

Hier übergibst du dem neuen Objekt app5 ein neues Attribut methods. Hierin übergeben wir wiederrum ein einfaches Objekt mit verschiedenen Funktionen. Beachte, dass wir uns in einem Objekt befinden und daher Attribute mit this ansprechen müssen.

Du kannst Funktionen auch gleich beim Laden der Webseite auslösen. Welche Ereignisse auf dem Weg bis die Webseite angezeigt wird durchlaufen werden, steht hier.