Vue — Data Binding

One-way binding

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="message = 'Updated'">Change</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

v-model on inputs

<template>
  <div>
    <input v-model="text" placeholder="Type here">
    <p>You typed: {{ text }}</p>

    <textarea v-model="textArea" placeholder="Long text"></textarea>

    <input type="checkbox" v-model="checked">
    <p>Checked: {{ checked }}</p>

    <select v-model="selected">
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <p>Selected: {{ selected }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '',
      textArea: '',
      checked: false,
      selected: 'A'
    }
  }
}
</script>

Radio buttons

<input type="radio" value="yes" v-model="picked">
<input type="radio" value="no" v-model="picked">
<p>Picked: {{ picked }}</p>

Multiple checkboxes

<input type="checkbox" value="Jack" v-model="names">
<input type="checkbox" value="John" v-model="names">
<input type="checkbox" value="Mike" v-model="names">
<p>Checked names: {{ names }}</p>

Modifier

<!-- .lazy: sync after change event -->
<input v-model.lazy="msg">

<!-- .number: convert to number -->
<input v-model.number="age">

<!-- .trim: remove whitespace -->
<input v-model.trim="text">

Custom components

<template>
  <custom-input v-model="searchQuery"></custom-input>
</template>

Props one-way

<!-- Parent to child -->
<child-component :message="parentMessage"></child-component>

<!-- Two-way with .sync -->
<child-component :title.sync="docTitle"></child-component>

Mini Practice

1. Create a form with v-model
2. Use different input types
3. Apply modifiers
4. Bind custom components

Up Next

Continue with Directives - Built-in directives.