How to do it...

Let's write a list of the largest dams in the world.

First, we need an HTML table with three columns (Name, Country, Electricity):

<div id="app"> <table>   <thead>     <tr>       <th>Name</th>       <th>Country</th>       <th>Electricity</th>     </tr>   </thead>   <tbody>   </tbody> </table> </div>

Also, we need the JavaScript of the Vue instance, which, for now, only contains a small database of dams, their location, and how much electricity they generate:

new Vue({   el: '#app',   data: {     dams: [       {name: 'Nurek Dam', country: 'Tajikistan', electricity: 3200},       {name: 'Three Gorges Dam', country: 'China', electricity: 22500},       {name: 'Tarbela Dam', country: 'Pakistan', electricity: 3500},  {name: 'Guri Dam', country: 'Venezuela', electricity: ...

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

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.