Vue

HTML

<!DOCTYPE html>

<head>
  <title>
    Vue Guide Examples
  </title>
  <link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
  <link rel="icon" type="image/png" href="favicons/favicon-32x32.png" sizes="32x32">
  <link rel="icon" type="image/png" href="favicons/favicon-16x16.png" sizes="16x16">
  <link rel="manifest" href="favicons/manifest.json">
  <link rel="mask-icon" href="favicons/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="apple-mobile-web-app-title" content="Vue Guide Examples">
  <meta name="application-name" content="Vue Guide Examples">
  <meta name="theme-color" content="#ffffff">
  <link rel="stylesheet" href="vuejs.org.css">
</head>

<body>

  <div id="app" class="content">

    <h1>
      Self-contained web app examples from the official Vue.js 2.0 Guide
    </h1>
    <a href="http://rc.vuejs.org/guide/index.html">
      Link to the Vue.js 2.0 Guide
    </a>
    <h2>
      Examples:
    </h2>

    <ul>
      <li v-for="(chapter, chapterIndex) in chapters">
        {{ chapter.title }}
        <ul>
          <li v-for="(section, sectionIndex) in chapter.sections">
            <a v-bind:href="getPagePath(chapter, chapterIndex, section, sectionIndex)">
              {{ section.title }}
            </a>
          </li>
        </ul>
      </li>
    </ul>

  </div>

  <script src="./vue.js"></script>
  <script src="./main.js"></script>
</body>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

.odd {
  color:white;
  background:blue;
}

.even {
  color:blue;
  background: white;
}

Vue

function getSingleZeroPaddedString(number) {
  if (number < 10) {
    return '0' + number
  }
  return number.toString()
}

new Vue({
  el: '#app',
  data: {
    chapters: [
      {
        title: 'Getting Started',
        sections: [
          { title: 'Hello World' },
          { title: 'Two-way Binding' },
          { title: 'Render a List' },
          { title: 'Handle User Input' },
          { title: 'All Together Now' }
        ]
      },
      {
        title: 'Overview',
        sections: [
          { title: 'Data Driven View' },
          { title: 'Directive' }
        ]
      },
      {
        title: 'Computed Properties and Watchers',
        sections: [
          { title: 'Basic Examples' },
          { title: 'Repetitive Watched Property' },
          { title: 'Better Computed Property' },
          { title: 'Computed Setter' },
          { title: 'Watchers' }
        ]
      },
      {
        title: 'Class and Style Bindings',
        sections: [
          { title: 'Class Object Syntax' },
          { title: 'Class Array Syntax' },
          { title: 'Style Object Syntax' },
          { title: 'Style Array Syntax' }
        ]
      },
      {
        title: 'Conditional Rendering',
        sections: [
          { title: 'v-if' },
          { title: 'Template v-if' },
          { title: 'v-show' },
          { title: 'v-else' }
        ]
      },
      {
        title: 'List Rendering',
        sections: [
          { title: 'Simple v-for' },
          { title: 'Indexed v-for' },
          { title: 'Template v-for' },
          { title: 'Mutation Methods' },
          { title: 'Replacing an Array' },
          { title: 'Keys' },
          { title: 'Object v-for' },
          { title: 'Range v-for' },
          { title: 'Displaying Filtered/Sorted Results' }
        ]
      },
      {
        title: 'Methods and Event Handling',
        sections: [
          { title: 'Listening to Events' },
          { title: 'Method Event Handlers' },
         ...