How to do it...

We will transform a frog into a princess with some kisses, but if we kiss too much the princess will turn into Santa. Of course, we are talking about emojis.

Our HTML setup is very simple:

<div id="app">   <button @click="kisses++">Kiss!</button>   <transition :name="kindOfTransformation" :mode="transformationMode">     <p :key="transformation">{{emoji}}{{transformation}}</p>   </transition> </div>

Just note that most of the attributes here are bound to variables. Here is how the JavaScript unfolds.

First, we will create a simple Vue instance with all of our data:

new Vue({ el: '#app',   data: {     kisses: 0,  kindOfTransformation: ...

Get Vue.js 2 Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.