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


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


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

Leave a Reply

Your email address will not be published. Required fields are marked *