Vue - Simple Binding Example

No components used so v-model can be just property name as $data is assumed as the context.

by Ben Clayton

HTML

<script src="https://unpkg.com/vue"></script>
<div id="interface">
  Firstname:<input type="text" v-model="firstname" />
  Lastname:<input type="text" v-model="lastname" />
  <div>
  {{firstname}} - {{lastname}}
  </div>
</div>
<br><br>
No components used so v-model can be given just a property name as $data is assumed as the context.

JavaScript

//---------------------------------------------------------
new Vue({
  el: '#interface',
  data() {
    return {
      firstname: "Ben",
      lastname: "Clayton"
    }
  }
});