Displaying text from a stored value with Vue

I have a Vue “app” that does nothing more than display some HTML elements according to its template (and some CSS rules).

Goal

The task for this installment is to display some text from my Vue instance’s data object, rather than storing the text directly in the template.

This uses one-way data binding, where the app displays the current value of a property that may change. It is my first use of a Vue directive to make the app’s view reactive to the model.

Breakdown

1. Add a data option to the Vue instance, with a key-value pair containing the text
2. Bind the contents of the “app-title” element to the value of appTitle in data

1. Add a data option to the Vue instance, with a key-value pair containing the text

var simpleAppWithText = new Vue({
  el: '.app02',
  data: {
    appTitle: 'This text comes from a key-value pair in the `data` option of the Vue instance'
  },
  template: // etc...

2. Bind the contents of the “app-title” element to the value of appTitle in data

I can now use “mustache” interpolation (double curly brackets) in the template to point Vue at the key appTitle within its data object, instead of typing text into the template:

<h2 id="app-title">{{appTitle}}</h2>

Note that, because I am replacing the entire textContent of the element with the text of appTitle, I could use the v-text directive instead of the mustache syntax:

<h2 id="app-title" v-text="appTitle"></h2>

To individually control parts of the textContent of an element, v-text doesn’t do the job. Mustache interpolation does allow us to combine text interpolation with static text, or bindings to other properties, in the template; for example, I could write:

<h2 id="app-title"> The text of <code>appTitle</code> is: {{appTitle}}.</h2>

The result: