zvlex/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vue.js comments component</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.8/vue.min.js"></script>
  </head>
  <body class="container">

      <h3>{{ title }}</h3>
      <comment-box :comments = "commentNodes"></comment-box>

      <template id="comment-box">
        <comment-list :comments = 'comments'></comment-list>
        <comment-form></comment-form>
      </template>

      <template id="comment-item">
        <td>{{ comment.user }}</td>
        <td>{{ comment.body }}</td>
        <td>{{ comment.rating }}</td>
      </template>

      <template id="comment-form">
        <div class="jumbotron">
          <form @submit.prevent="addComment">
            <div class="form-group">
              <label for="user">User:</label>
              <input type="text" v-model="user" id="user" class="form-control" />
            </div>

            <div class="form-group">
              <label for="rating">Rating:</label>
              <input type="text" v-model="rating" id="rating" class="form-control" />
            </div>

            <div class="form-group">
              <label for="body">Body:</label>
              <textarea v-model="body" id="body" class="form-control"></textarea>
            </div>

            <div class="form-group">
              <input type="submit" value="Send" class="btn btn-default" />
            </div>
          </form>
        </div>
      </template>

      <template id="comment-list">
        <div>
          <form>
            <div class="form-group">
              <label for="search-by-user">Search by User:</label>
              <input type="text" id="search-by-user" v-model="search" class="form-control" />
            </div>
          </form>
        </div>

        <div class="jumbotron">
          <table class="table table-striped">
            <thead>
              <tr>
                <th v-for="column in columns">
                  <a href="#" @click.prevent="sortByKey(column)">{{ column | capitalize }}</a>
                </th>
              </tr>
            </thead>

            <tbody>
              <tr v-for="comment in comments | orderBy sortKey reverse | filterBy search 'user'">
                <td is="comment-item" :comment="comment"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </template>

    <script src="app.js"></script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Vue.js comments component</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
	<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.8/vue.min.js"></script>
	</head>
	<body class="container">

	<h3>{{ title }}</h3>
	<comment-box :comments = "commentNodes"></comment-box>

	<template id="comment-box">
	<comment-list :comments = 'comments'></comment-list>
	<comment-form></comment-form>
	</template>

	<template id="comment-item">
	<td>{{ comment.user }}</td>
	<td>{{ comment.body }}</td>
	<td>{{ comment.rating }}</td>
	</template>

	<template id="comment-form">
	<div class="jumbotron">
	<form @submit.prevent="addComment">
	<div class="form-group">
	<label for="user">User:</label>
	<input type="text" v-model="user" id="user" class="form-control" />
	</div>

	<div class="form-group">
	<label for="rating">Rating:</label>
	<input type="text" v-model="rating" id="rating" class="form-control" />
	</div>

	<div class="form-group">
	<label for="body">Body:</label>
	<textarea v-model="body" id="body" class="form-control"></textarea>
	</div>

	<div class="form-group">
	<input type="submit" value="Send" class="btn btn-default" />
	</div>
	</form>
	</div>
	</template>

	<template id="comment-list">
	<div>
	<form>
	<div class="form-group">
	<label for="search-by-user">Search by User:</label>
	<input type="text" id="search-by-user" v-model="search" class="form-control" />
	</div>
	</form>
	</div>

	<div class="jumbotron">
	<table class="table table-striped">
	<thead>
	<tr>
	<th v-for="column in columns">
	<a href="#" @click.prevent="sortByKey(column)">{{ column \| capitalize }}</a>
	</th>
	</tr>
	</thead>

	<tbody>
	<tr v-for="comment in comments \| orderBy sortKey reverse \| filterBy search 'user'">
	<td is="comment-item" :comment="comment"></td>
	</tr>
	</tbody>
	</table>
	</div>
	</template>

	<script src="app.js"></script>
	</body>
	</html>