index.html — vue Source File

Architecture documentation for index.html, a html file in the vue codebase.

File html

Entity Profile

Source Code

<!doctype html>
<html data-framework="vue">
  <head>
    <meta charset="utf-8">
    <title>Vue.js • TodoMVC</title>
    <link rel="stylesheet" href="../../../node_modules/todomvc-app-css/index.css">
    <style>[v-cloak] { display: none; }</style>
  </head>
  <body>
    <section class="todoapp">
      <header class="header">
        <h1>todos</h1>
        <input class="new-todo"
          autofocus autocomplete="off"
          placeholder="What needs to be done?"
          v-model="newTodo"
          @keyup.enter="addTodo">
      </header>
      <section class="main" v-show="todos.length" v-cloak>
        <input id="toggle-all" class="toggle-all" type="checkbox" v-model="allDone">
        <label for="toggle-all">Mark all as complete</label>
        <ul class="todo-list">
          <li v-for="todo in filteredTodos"
            class="todo"
            :key="todo.id"
            :class="{ completed: todo.completed, editing: todo == editedTodo }">
            <div class="view">
              <input class="toggle" type="checkbox" v-model="todo.completed">
              <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
              <button class="destroy" @click="removeTodo(todo)"></button>
            </div>
            <input class="edit" type="text"
              v-model="todo.title"
              v-todo-focus="todo == editedTodo"
              @blur="doneEdit(todo)"
              @keyup.enter="doneEdit(todo)"
              @keyup.esc="cancelEdit(todo)">
          </li>
        </ul>
      </section>
      <footer class="footer" v-show="todos.length" v-cloak>
        <span class="todo-count">
          <strong>{{ remaining }}</strong> {{ remaining | pluralize }} left
        </span>
        <ul class="filters">
          <li><a href="#/all" :class="{ selected: visibility == 'all' }">All</a></li>
          <li><a href="#/active" :class="{ selected: visibility == 'active' }">Active</a></li>
          <li><a href="#/completed" :class="{ selected: visibility == 'completed' }">Completed</a></li>
        </ul>
        <button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
          Clear completed
        </button>
      </footer>
    </section>
    <footer class="info">
      <p>Double-click to edit a todo</p>
      <p>Written by <a href="https://evanyou.me">Evan You</a></p>
      <p>Part of <a href="https://todomvc.com">TodoMVC</a></p>
    </footer>

    <script>
    // for testing
    if (navigator.userAgent.indexOf('PhantomJS') > -1) localStorage.clear()
    </script>
    <!-- Delete ".min" for console warnings in development -->
    <script src="../../../dist/vue.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

Source

View on GitHub

Frequently Asked Questions

What does index.html do?

index.html is a source file in the vue codebase, written in html.

Where is index.html in the architecture?

index.html is located at examples/classic/todomvc/index.html (directory: examples/classic/todomvc).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free