Data binding

Data binding is the process of synchronizing data. For example, for the same example for what we did on v-text, we can do it with data binding with the mustaches, in other words using the {{}} operators.

For example, we can use the {{message}} instead of using the Vue.js directive for the message. Let's change the code in src/components/Home.vue to the following:

<template>
  <v-layout row wrap>
    <v-flex xs12>
<div>{{message}}</div>
    </v-flex>
    <v-flex xs12>
      <v-btn color="primary" v-on:click="reply">Reply</v-btn>
    </v-flex>
  </v-layout>
</template>
<script type="text/javascript">
  export default {
    data () {
      return {
message: 'Hello there, how are you?',
      }
    },
    methods: {
      reply () {
        this.message = "I'm doing great. Thank You!"
      }
    }
  }
</script>

This will behave the same way as what we did with v-text.