Vue.js Spickzettel

Vue ist ein progressives JavaScript-Framework zum Erstellen von Benutzeroberflächen. Im Gegensatz zu anderen monolithischen Frameworks ist Vue von Grund auf so konzipiert, dass es schrittweise einsetzbar ist. Die Kernbibliothek konzentriert sich nur auf die Ansichtsebene und ist leicht zu erlernen und in andere Bibliotheken oder bestehende Projekte zu integrieren.

Listen

<li v-for="todo in todos">
  {{ todo.text }}
  {{ $index }}
</li>

Ereignisse (Events)

<button v-on:click='submit'>Los</button>

Komponenten

new Vue({
  components: { app: App }
})

API-Schnittstelle

Vue.extend({ ... })        // Erstellen von Komponenten
Vue.nextTick(() => {...})

Vue.set(object, key, val)  // reaktiv
Vue.delete(object, key)

Vue.directive('my-dir', { bind, update, unbind })
// <div v-my-dir='...'></div>

Vue.elementDirective('my-dir', { bind, update, unbind })
// <my-dir>...</my-dir>

Vue.component('my-component', Vue.extend({ .. }))

Vue.partial('my-partial', '<div>hi {{msg}}</div>')
// <partial name='my-partial'></partial>

new Vue({
  data: { ... }
  props: ['size'],
  props: { size: Number },
  computed: { fullname() { return this.name + ' ' + this.lastName } },
  methods: { go() { ... } },
  watch: { a (val, oldVal) { ... } },
  el: '#foo',
  template: '...',
  replace: true, // Element ersetzen (Standard true)

  // Lebenszyklus
  created () {},
  beforeCompile () {},
  compiled () {},
  ready () {}, // $el wird zum ersten Mal eingefügt
  attached () {},
  detached () {},
  beforeDestroy () {},
  destroyed () {},

  // Optionen
  directives: {},
  elementDirectives: {},
  filters: {},
  components: {},
  transitions: {},
  partials: {}
})

Vue-Template

Siehe vueify

// app.vue
<template>
  <h1 class="red">{{msg}}</h1>
</template>
 
<script>
  module.exports = {
    data () {
      return {
        msg: 'Hallo Welt!'
      }
    }
  }
</script>

und

<template lang='jade'>
h1(class='red') {{msg}}
</template>