Data Binding Syntax Using Interpolation

Interpolation is the insertion of something of a different nature into something else. In the Vue.js context, this is where you would use mustache syntax (double curly braces) to define an area where you can inject data into a component's HTML template.

Consider the following example:

new Vue({
  data() {
    title: 'Vue.js'
  },
  template: '<span>Framework: {{ title }}</span>'
})

The data property title is bound to Vue.js reactive data and will update on the fly depending on state changes to the UI and its data. We will go into more depth about how to use interpolation and how to bind it to data properties in the next exercise.

Exercise 1.02: Interpolation with Conditionals

When you want to output data into your template or make elements on a page be reactive, interpolate data into the template by using curly braces. Vue can understand and replace that placeholder with data.

To access the code files for this exercise, refer to https://packt.live/3feLsJ3.

1. Open a command-line terminal and navigate into the Exercise 1.02 folder and run the following commands in order:

   > cd Exercise1.02/
   > code .
   > yarn
   > yarn serve

   Go to https://localhost:8080.

2. Inside of the Exercise1-02.vue component, let's add data within the <script> tags by adding a function called data() and return a key called title with your heading string as the value:

   <script>
   export default {
     data() {
       return {
         title: 'My first component!',
       }
     },
   }
   </script>

3. Reference the data title by replacing your <h1> text with the interpolated value {{ title }}:

   <template>
     <div>
       <h1>{{ title }}</h1>
     </div>
   </template>

   When you save this document, the data title will now appear inside your h1 tag.

4. In Vue, interpolation will resolve any JavaScript inside curly braces. For example, you can transform your text inside the curly braces using the toUpperCase() method:

   <template>
     <div>
       <h1>{{ title.toUpperCase() }}</h1>
     </div>
   </template>

   You should see an output like the following screenshot:

   

   Figure 1.7: Save the file—you should now have an uppercased title

5. In addition to parsing JavaScript methods, interpolation can handle conditional logic. Inside the data object, add a Boolean key-value pair isUppercase: false:

   <template>
     <div>
       <h1>{{ isUppercase ? title.toUpperCase() : title }}</h1>
     </div>
   </template>
   <script>
   export default {
     data() {
       return {
         title: 'My first component!',
         isUppercase: false,
       }
     },
   }
   </script>

   The preceding code will generate the following output:

   

   Figure 1.8: Exercise 1.02 output after including the inline conditional statement

6. Add this condition to the curly braces, and when you save you should see the non-uppercased title. Play around with this value by changing isUppercase to true:

   <script>
   export default {
     data() {
       return {
         title: 'My first component!',
         isUppercase: true,
       }
     },
   }
   </script>

   The following screenshot displays the final output generated upon running the preceding code:

   

Figure 1.9: Final Exercise 1.02 output

In this exercise, we were able to use inline conditionals inside the interpolated tags (curly braces) by using a Boolean variable. This allows us to modify what data is displayed inside of our component without overly complicated conditions, which can be useful in certain use cases.

We will now learn about how to style components using a variety of methods.