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
