Vue.js 2 Cookbook

How to do it...

For this recipe, we will build a website for a kangaroo appreciation club. The layout of the home page HTML looks like this:

<div id="app">  <h1>Welcome to the Kangaroo club</h1>  <img src="https://goo.gl/FVDU1I" width="300px" height="200px">  <img src="https://goo.gl/U1Hvez" width="300px" height="200px">  <img src="https://goo.gl/YxggEB" width="300px" height="200px">  <p>We love kangaroos</p></div>

You can change the link to the images of kangaroos with the one you prefer.

In the JavaScript part, we instantiate an empty Vue instance for now:

new Vue({  el: '#app'})

If we open the page now, we get this:

Now we want to add a fun ...