Vue.js 2 Cookbook

How to do it...

We have a child who really ate a cookie but won't admit he did. We won't let him get away with it by checking internal state and discover the truth.

Write the HTML structure of our application, which is the following:

<div id="app">   <child ref="junior"></child>   <p>Truth: {{childStomach}}</p> </div>

The ref attribute gives the component a mark that we can later retrieve from code.

Copy the child component, like the following:

Vue.component('child', {   template: "<p>{{mouth}}</p>",   data () {     return {       mouth: 'I didn't eat that cookie',       stomach: 'Yummy that cookie was delicious.'     }   } })

This component will display only the string inside the variable mouth.

You can write the Vue instance, as illustrated:

 new Vue({ ...