Vue.js

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.

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" }
      ]
    }
  }
}