Vue.js Spiekbriefje

Vue is een progressief JavaScript-framework voor het bouwen van gebruikersinterfaces. In tegenstelling tot andere monolithische frameworks is Vue vanaf de basis zo ontworpen dat het stapsgewijs kan worden geadopteerd. De kernbibliotheek richt zich alleen op de weergavelaag en is gemakkelijk op te pakken en te integreren met andere bibliotheken of bestaande projecten.

Lijsten

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

Gebeurtenissen (Events)

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

Componenten

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

API-interface

Vue.extend({ ... })        // componenten maken
Vue.nextTick(() => {...})

Vue.set(object, key, val)  // reactief
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>hallo {{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, // vervang element (standaard true)

  // levenscyclus
  created () {},
  beforeCompile () {},
  compiled () {},
  ready () {}, // $el wordt voor de eerste keer ingevoegd
  attached () {},
  detached () {},
  beforeDestroy () {},
  destroyed () {},

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

Vue Template

Zie vueify

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

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