VueJS - Lista de Livros

Neste exemplo eu implemento um pseudo cadastro de livros denominado "Minha lista de livros" via VueJS para demonstrar como seria migrar Exemplo Lista de Livros em JavaScript para o VueJS.

by WILLIAM CORREA

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
  <div class="container-fluid">
    <div id="app" class="container">
      <h2>{{cabecalho}}</h2>
      <input v-model="novoLivro" @keyup.enter="addLivro"
             placeholder="Adicionar novo livro" type="text"
             class="form-control"> <br>
      <input v-model="novoAutor" @keyup.enter="addLivro"
             placeholder="Adicionar novo autor" type="text"
             class="form-control"> <br><br>

      <span class="input-group-btn"> 
        <button @click="addLivro" class="js-add btn btn-primary btn-block"
                type="button">Adicionar!</button> 
      </span>
      <ul>
        <li v-for="livro in livros" v-bind:class="{ 'removido': livro.checked }">
          <div class="checkbox">
            <label>
              <input class="js-livro" name="list" type="checkbox" v-model="livro.checked">
              <big>{{livro.titulo}}</big> - <small>{{livro.autor}}</small>
            </label>
          </div>
        </li>
      </ul>
      <div class="footer">
        <hr/>
        <em>Modifique o título da lista:</em>
        <input v-model="cabecalho"/>
      </div>
    </div>
  </div>
</body>

CSS

.container { 
  width: 40%; 
  margin: 20px auto 0px auto; 
}

.removido { 
  color: gray; 
}

.removido label {
  text-decoration: line-through; 
}

ul li { 
  list-style-type: none; 
}

Vue

var data = { 
  livros: [{ titulo: 'Orange is The New Black', autor: 'Piper Kerman', checked: true },    
          { titulo: 'A Origem das Espécies', autor: 'Charles Darwin', checked: false }], 
  cabecalho: 'Minha lista de livros', 
  novoLivro: '',
  novoAutor: ''
};

new Vue({ 
   el: '#app', 
   data: data,
   methods: { 
     addLivro: function () { 
       var titulo = this.novoLivro.trim(); 
       var autor = this.novoAutor.trim(); 
       if (titulo && autor) { 
         this.livros.push({ 
           titulo: titulo, 
           autor: autor, 
           checked: false
         }); 
         this.novoLivro = ''; 
         this.novoAutor = ''; 
       } 
     }
   }
 });