My Book Club Project or Starting With Vue.js

Motivation

I'm living in small settlement where everybody knows everybody and we have no library for children yet... Since i'm inspired by the this article, i decided to create Book Club project and also to play with vue.js

Book club project

It should be only book list where each family will be able to publish some books of they own which they allow to lend. Every book has it synopsis, rating, reader recommended age (because most of reader are children), picture, author and owner. Every resident of our settlement can land any book for 30 days period

Site Planning

Home Page will display first 15 most popular books and search & filter input, each book in the list will display picture, synopsis and rating, and also owner and current holder

Lets Start With Vue.js

My first Challenge is to display the home page book gallery. Data may come meanwhile from static javascript:
In vue we must place model into "data" property of object:

new Vue({
  el: '#app',
  data: {
    title: 'Pnei Kedem Book Club',
    books: [
      { title: 'Tom Soyer' ,author:'Mark Twein', img:'//upload.wikimedia.org/wikipedia/commons/thumb/1/1d/Tom_Sawyer_1876_frontispiece.jpg/200px-Tom_Sawyer_1876_frontispiece.jpg'},
      { title: 'Midnight Folk',author: 'John Masefield', img:'//upload.wikimedia.org/wikipedia/en/3/35/MidnightFolk.jpg'},
      { title: 'Emil From Leneberg' ,author:'Asterid Lindgren', img:'//upload.wikimedia.org/wikipedia/en/thumb/1/1c/Emil_i_L%C3%B6nneberga.jpg/190px-Emil_i_L%C3%B6nneberga.jpg'}
    ]
  }
})

Repeater

Vue has its own repeater syntax v-for:

 <div class="row">
    <div class="col-xs-4 text-center"  v-for="book in books">
      <a href="#" class="thumbnail">
        <img v-bind:src="book.img" width="200" height="276" >
        <span>{{ book.title }}</span>
      </a>
    </div>
  </div>  

Notice that for bind image source you may use v-bind syntax.
Here is running jsfiddle