Data binding

A simple task for Vue is to bind some JavaScript data to the template. Let's create adatapropertyin our configuration object and assign to it an object including atitlepropertywith a'My apartment'string value.

app.js:

var app = new Vue({
  el: '#app',
  data: {
    title: 'My apartment'
  }
});

Any property of this data object will be available within our template. To tell Vue where to bind this data, we can usemustachesyntax, that is, double curly brackets, for example,{{ myProperty }}. When Vue instantiates, it compiles the template, replaces the mustache syntax with the appropriate text, and updates the DOM to reflect this. This process is calledtext interpolation and is demonstrated in the following code block.

index.html:

<p id="app">
  <p class="container">
    <p class="heading">
      <h1>{{ title }}</h1>
    </p>
  </p>
</p>

Will render as this:

<p id="app">
  <p class="container">
    <p class="heading">
      <h1>My apartment</h1>
    </p>
  </p>
</p>

Let's add a few more data properties now and enhance our template to include more of the page structure.

app.js:

var app = new Vue({
  el: '#app',
  data: {
    title: 'My apartment',
    address: '12 My Street, My City, My Country',
    about: 'This is a description of my apartment.'
  }
});

index.html:

<p class="container">
  <p class="heading">
    <h1>{{ title }}</h1>
    <p>{{ address }}</p>
  </p>
  <hr>
  <p class="about">
    <h3>About this listing</h3>
    <p>{{ about }}</p>
  </p>
</p>

Let's also add some new CSS rules.

style.css:

.heading {
  margin-bottom: 2em;
}

.heading h1 {
  font-size: 32px;
  font-weight: 700;
}

.heading p {
  font-size: 15px;
  color: #767676;
}

hr {
  border: 0;
  border-top: 1px solid #dce0e0;
}

.about {
  margin-top: 2em;
}

.about h3 {
  font-size: 22px;
}

.about p {
  white-space: pre-wrap;
}

If you now save and refresh your page, it should look like this:

Figure 2.4. Listing page with basic data binding