The Vue Instance

new Vue({
  el: '#app',
  data() {
    return {
      firstName: 'Aliaksandr',
      lastName: 'Shcharbak'
    };
  }
});

<div id="app">
  <span>First Name: {{ firstName }}</span>
  <span>Last Name: {{ lastName }}</span>
</div>

Instance Lifecycle Hooks

<a v-bind:href="url"> ... </a>

<a :href="url"> ... </a>

<a v-on:click="doSomething"> ... </a>

<a @click="doSomething"> ... </a>

<p v-if="seen">Now you see me</p>

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

Computed Properties. Watchers

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
  <p>Reversed message from method: "{{ reversedMessageMethod() }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('');
    }
  },
  methods: {
    reverseMessageMethod: function () {
      return this.message.split('').reverse().join('');
    }
});

Components. Event Handling

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

Vue.component('button-counter', {
  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})

new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

Single File Components