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: ...