Vue.js 2 Cookbook

How to do it...

Imagine that you are creating an app to book taxis. The interface we will create will be simple and fun.

First of all, add the animate.css library to the list of dependencies (refer to the Choosing a development environment recipe to learn how to do it).

To proceed, we need our usual wrapper:

<div id="app"> </div>

Inside, we will put a button to call for a taxi:

<button @click="taxiCalled = true">   Call a cab </button>

You can already tell that we will use the taxiCalled variable to keep track of whether the button has been pressed or not.

Let's add an emoji that will confirm to the user when the taxi is called:

<p v-if="taxiCalled"></p>

At this point, we can add some JavaScript:

new Vue({   el: '#app',   data: {  taxiCalled: ...