First, HTML

Introduction

This book introduces Vue.js not as a "framework," but as a natural extension of HTML.

We won't install Node.js or run npm create in a terminal.
All you need is a text editor and a browser.

Why? Because Vue.js is a Progressive Framework.
"Progressive" means you can adopt it incrementally.
Just by adding a little JavaScript to static HTML, you can start benefiting from Vue.

Writing a Single HTML File

Let's forget about Vue for now and write a plain HTML page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My App</title>
  <style>
    body {
      font-family: sans-serif;
      max-width: 600px;
      margin: 40px auto;
      padding: 0 20px;
    }
    .card {
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 16px;
    }
    .card h2 { margin-top: 0; }
    .tag {
      display: inline-block;
      background: #edf2f7;
      border-radius: 4px;
      padding: 2px 8px;
      font-size: 0.85em;
      margin-right: 4px;
    }
  </style>
</head>
<body>

  <h1>My Bookshelf</h1>
  <p>A record of recently read books.</p>

  <div class="card">
    <h2>Readable Code</h2>
    <p>Practical techniques for writing readable code.</p>
    <span class="tag">programming</span>
    <span class="tag">practices</span>
  </div>

  <div class="card">
    <h2>Fundamentals of Programming Languages</h2>
    <p>Learn the fundamental concepts behind language design.</p>
    <span class="tag">cs</span>
    <span class="tag">language</span>
  </div>

  <div class="card">
    <h2>Web Browser Security</h2>
    <p>A systematic guide to browser security.</p>
    <span class="tag">security</span>
    <span class="tag">browser</span>
  </div>

</body>
</html>

Save this as index.html and open it in your browser.

It just works. Of course it does — it's just HTML.

The Limitation of This HTML

This page works fine. But as data grows, it becomes painful.

You need to copy-paste .card for every new book
You can't filter by tag (e.g., "show only programming")
You can't search by title

In other words, it's static.
Data and view are fused together in HTML — they aren't separated.

In the next chapter, we'll bring Vue.js in via CDN and change the underlying structure while keeping the exact same appearance.

Summary

Everything starts from a single HTML file
No Node.js or build tools needed (yet)
Static HTML has limitations — data and view can't be separated
Vue.js will extend this HTML without breaking it

bookProgressive Vue

#vue#frontend#progressive

chapterTemplate Syntax ≒ HTML

#vue#template#html

Introduction

Writing a Single HTML File

The Limitation of This HTML

Summary

Related