w2xi
diff --git a/‎demo/21-compile.html
Lines changed: 14 additions & 0 deletions b/‎demo/21-compile.html
Lines changed: 14 additions & 0 deletions
diff --git a/‎demo/22-counter.html
Lines changed: 46 additions & 0 deletions b/‎demo/22-counter.html
Lines changed: 46 additions & 0 deletions
@@ -0,0 +1,14 @@
+<body></body>
+
+<script src="./static/mini-vue.umd.js"></script>
+
+<script>
+const { compileToFunction } = MiniVue
+
+const template = `<div id="foo" class="bar"><p>{{ msg }}</p><p>Template</p></div>`
+const render = compileToFunction(template)
+
+console.log('模板:', template)
+console.log(render)
+</script>
+
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <script src="./static/mini-vue.umd.js"></script>
+  <style>
+    .red {
+      color: red;
+    }
+    .demo {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+    .count {
+      margin: 0 10px;
+    }
+  </style>
+</head>
+<body>
+  <div id="app"><div class="demo"><button @click="minus">-1</button><span class="count">{{ count }}</span><button @click="plus">+1</button></div></div>
+  <script>
+    const { createApp, ref } = MiniVue
+    const count = ref(0)
+
+    createApp({
+      setup() {
+        const plus = () => {
+          count.value++
+        }
+        const minus = () => {
+          count.value--
+        }
+        return {
+          count,
+          plus,
+          minus
+        }
+      }
+    }).mount('#app')
+  </script>
+</body>
+</html>