Φύλλο οδηγιών (Cheat Sheet) Vue.js

Το Vue είναι ένα προοδευτικό JavaScript framework για τη δημιουργία διεπαφών χρήστη. Σε αντίθεση με άλλα μονολιθικά frameworks, το Vue έχει σχεδιαστεί από την αρχή για να είναι σταδιακά υιοθετήσιμο. Η βασική βιβλιοθήκη εστιάζει μόνο στο επίπεδο της προβολής και είναι εύκολο να εφαρμοστεί και να ενσωματωθεί με άλλες βιβλιοθήκες ή υπάρχοντα έργα.

Λίστες

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

Συμβάντα (Events)

<button v-on:click='submit'>Μετάβαση</button>

Στοιχεία (Components)

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

Διεπαφή API

Vue.extend({ ... })        // δημιουργία στοιχείων
Vue.nextTick(() => {...})

Vue.set(object, key, val)  // αντιδραστικότητα
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>γεια {{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, // αντικατάσταση στοιχείου (προεπιλογή true)

  // κύκλος ζωής
  created () {},
  beforeCompile () {},
  compiled () {},
  ready () {}, // το $el εισάγεται για πρώτη φορά
  attached () {},
  detached () {},
  beforeDestroy () {},
  destroyed () {},

  // επιλογές
  directives: {},
  elementDirectives: {},
  filters: {},
  components: {},
  transitions: {},
  partials: {}
})

Πρότυπο Vue

Ανατρέξτε στο vueify

// app.vue
<template>
  <h1 class="red">{{msg}}</h1>
</template>
 
<script>
  module.exports = {
    data () {
      return {
        msg: 'Γεια χαρά!'
      }
    }
  }
</script>

και

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