Vue.js Fusklapp

Vue är ett progressivt JavaScript-ramverk för att bygga användargränssnitt. Till skillnad från andra monolitiska ramverk är Vue designat från grunden för att kunna anammas gradvis. Kärnbiblioteket är fokuserat på enbart vyskiktet och är lätt att lära sig och integrera med andra bibliotek eller befintliga projekt.

Listor

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

Händelser (Events)

<button v-on:click='submit'>Kör</button>

Komponenter

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

API-gränssnitt

Vue.extend({ ... })        // skapa komponenter
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>hej {{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, // ersätt element (standard true)

  // livscykel
  created () {},
  beforeCompile () {},
  compiled () {},
  ready () {}, // $el sätts in för första gången
  attached () {},
  detached () {},
  beforeDestroy () {},
  destroyed () {},

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

Vue-mall

Se vueify

// app.vue
<template>
  <h1 class="red">{{msg}}</h1>
</template>
 
<script>
  module.exports = {
    data () {
      return {
        msg: 'Hallå världen!'
      }
    }
  }
</script>

och

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