Vue.js Todo App

by Ayo Isaiah

HTML

<!-- Main Div Holding our Application Data -->
<div class="container" id="todo">
  <!-- Panel for holding our input -->
  <section class="panel">
  
    <input type="checkbox" id="mark-all">
    <input type="text" placeholder="What do you need to do?" autofocus class="text-input">
    <button>Clear List</button>
  
  </section>
  
  <!-- Unorderd list for holding our todo items -->
  <ul class="list">
    
    <li>
    
      <input type="checkbox" class="checkbox">
    
      <input type="text" class="text-input">
    
      <label for="checkbox" ></label>
    
      <button class="delete">X</button>
    
    </li>
  
  </ul>
  
</div>

JavaScript

//Create a new Vue instance
new Vue({
	//Bind this Vue instance to our container div with an ID of todo 
	el: "#todo"
});