단일 HTML 파일의 Vue

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue in one HTML file</title>
<style>
  body { margin: 0; padding: 20px; font-family: system-ui, sans-serif; background: #f4f6f5; color: #1d2330; }
  [v-cloak] { display: none; }  /* hide {{ }} until Vue has mounted */
  .card { max-width: 420px; padding: 16px 18px; border-radius: 12px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.1); }
  input { font: inherit; padding: 8px 10px; border: 1px solid #c9d2cd; border-radius: 8px; width: 100%; box-sizing: border-box; }
  button { font: inherit; margin-top: 12px; padding: 9px 16px; border: 0; border-radius: 8px; background: #42b883; color: #fff; cursor: pointer; }
  h2 { margin: 12px 0 0; font-size: 20px; }
</style>
</head>
<body>
<!-- Everything inside #app is the template -->
<div id="app" class="card" v-cloak>
  <label>Your name <input v-model="name" placeholder="Type here"></label>
  <h2 id="greeting">Hello, {{ name || 'stranger' }}!</h2>
  <button id="count" @click="count++">Clicked {{ count }} {{ count === 1 ? 'time' : 'times' }}</button>
</div>

<!-- 1. Load Vue (pinned version, production build) -->
<script src="https://unpkg.com/vue@3.5.43/dist/vue.global.prod.js"></script>
<!-- 2. Then create the app and mount it -->
<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return { name: '', count: 0 };   // the page re-renders when these change
    }
  }).mount('#app');
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>In-DOM template rules</title>
<style>
  body { margin: 0; padding: 16px; font-family: system-ui, sans-serif; background: #f4f6f5; color: #1d2330; }
  .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  @media (max-width: 520px) { .row { grid-template-columns: 1fr; } }
  .box { padding: 12px 14px; border-radius: 10px; background: #fff; border: 1px solid #e1e4ea; }
  .bad { background: #fff7f5; border-color: #f3d1c8; }
  .good { background: #f4fbf6; border-color: #cfe9d7; }
  h3 { margin: 0 0 8px; font-size: 14px; }
  code { font-size: 12px; background: #eef1f5; padding: 1px 4px; border-radius: 4px; }
  .tag { display: inline-block; margin: 4px 0; padding: 4px 10px; border-radius: 99px; background: #e8f6ef; color: #0f5132; font-weight: 600; }
  .note { margin: 6px 0 0; font-size: 13px; color: #555; }
</style>
</head>
<body>
<div id="app" class="row">
  <div class="box bad" id="bad">
    <h3>camelCase prop, self-closing tag</h3>
    <code>&lt;price-tag :unitPrice="4" /&gt;</code><br>
    <price-tag :unitPrice="4" />
    <p class="note">This line is swallowed into the tag above.</p>
  </div>
  <div class="box good" id="good">
    <h3>kebab-case prop, closing tag</h3>
    <code>&lt;price-tag :unit-price="4"&gt;&lt;/price-tag&gt;</code><br>
    <price-tag :unit-price="4"></price-tag>
    <p class="note">This line shows, because the tag was closed.</p>
  </div>
</div>

<script src="https://unpkg.com/vue@3.5.43/dist/vue.global.prod.js"></script>
<script>
  const app = Vue.createApp({});

  // A tiny component. In JavaScript the prop is camelCase: unitPrice
  app.component('price-tag', {
    props: ['unitPrice'],
    template: '<span class="tag">Price: {{ unitPrice === undefined ? "missing" : "$" + unitPrice }}</span>'
  });

  app.mount('#app');   // register components first, then mount
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue shopping list</title>
<style>
  body { margin: 0; padding: 18px; font-family: system-ui, sans-serif; background: #f4f6f5; color: #1d2330; }
  [v-cloak] { display: none; }
  .card { max-width: 460px; padding: 16px 18px; border-radius: 12px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.1); }
  h1 { margin: 0 0 10px; font-size: 20px; }
  form { display: flex; gap: 8px; }
  input[type=text] { flex: 1; min-width: 0; font: inherit; padding: 8px 10px; border: 1px solid #c9d2cd; border-radius: 8px; }
  button { font: inherit; padding: 8px 14px; border: 0; border-radius: 8px; background: #42b883; color: #fff; cursor: pointer; }
  ul { list-style: none; margin: 12px 0; padding: 0; }
  li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid #eef0f2; }
  li.done span { text-decoration: line-through; color: #9aa3ad; }
  li span { flex: 1; }
  .del { background: none; color: #b42318; padding: 2px 8px; }
  .bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; color: #555; }
  .bar button { background: #eef1f5; color: #1d2330; padding: 5px 10px; }
  .bar button.on { background: #1d2330; color: #fff; }
  .left { margin-right: auto; }
</style>
</head>
<body>
<div id="app" class="card" v-cloak>
  <h1>Shopping list</h1>
  <!-- .prevent stops the form from reloading the page -->
  <form @submit.prevent="add">
    <input type="text" v-model.trim="draft" placeholder="Add an item" aria-label="New item">
    <button>Add</button>
  </form>

  <ul>
    <!-- key tells Vue which row is which when the list changes -->
    <li v-for="item in shown" :key="item.id" :class="{ done: item.done }">
      <input type="checkbox" v-model="item.done" :aria-label="'Got ' + item.text">
      <span>{{ item.text }}</span>
      <button class="del" @click="remove(item.id)" aria-label="Remove">✕</button>
    </li>
  </ul>
  <p v-if="shown.length === 0">Nothing here.</p>

  <div class="bar">
    <span class="left" id="left">{{ left }} left of {{ items.length }}</span>
    <button v-for="f in ['all', 'todo', 'done']" :key="f" :class="{ on: filter === f }" @click="filter = f">{{ f }}</button>
  </div>
</div>

<script src="https://unpkg.com/vue@3.5.43/dist/vue.global.prod.js"></script>
<script>
  const { createApp, ref, computed } = Vue;

  createApp({
    setup() {
      let nextId = 3;
      const items = ref([
        { id: 1, text: 'Bread', done: true },
        { id: 2, text: 'Coffee', done: false }
      ]);
      const draft = ref('');
      const filter = ref('all');

      // computed values update by themselves when items or filter change
      const left = computed(() => items.value.filter(i => !i.done).length);
      const shown = computed(() => items.value.filter(i =>
        filter.value === 'all' || (filter.value === 'done') === i.done));

      function add() {
        if (!draft.value) return;
        items.value.push({ id: nextId++, text: draft.value, done: false });
        draft.value = '';
      }
      function remove(id) {
        items.value = items.value.filter(i => i.id !== id);
      }

      // everything returned here can be used in the template
      return { items, draft, filter, left, shown, add, remove };
    }
  }).mount('#app');
</script>
</body>
</html>