Vue.js

Vue instance options

• el: connect to DOM
• data: store data to be used
• methods: methods of current Vue instance
• computed: dependent properties
• watch: execute code upon data change

html:

<div id="app">
  <p>Variable: {{ title }}</p>
  <input type="text" v-on:input="changeTitle" placeholder="Type to change title...">
  <p>Function: {{ sayHello() }}</p>
</div>

js:

new Vue({
  el: '#app',
  data: {
    title: 'Custom Title!'
  },
  methods: {
    changeTitle: function(event) {
      this.title = event.target.value;
    },
    sayHello: function(event) {
      return this.title;
    }
  }
});