first commit

2025-04-04 11:44:37 +00:00 · 2022-01-05 15:34:16 +01:00 · 2022-01-05 15:34:16 +01:00 · b4099363fe
commit b4099363fe
4 changed files with 116 additions and 0 deletions
--- a/docs/components/testcomponent.md
+++ b/docs/components/testcomponent.md
@ -0,0 +1,14 @@
+# testcomponent
+
+just some sample code...
+
+## Methods
+
+<!-- @vuese:testcomponent:methods:start -->
+|Method|Description|Parameters|
+|---|---|---|
+|clear|clears something|-|
+
+<!-- @vuese:testcomponent:methods:end -->
+
+
--- a/docs/index.html
+++ b/docs/index.html
@ -0,0 +1,19 @@
+<!DOCTYPE>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>Sample Components in Vue</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docute@4/dist/docute.css">
+  </head>
+  <body>
+    <div id="docute"></div>
+    <script src="https://cdn.jsdelivr.net/npm/docute@4/dist/docute.js"></script>
+    <script>
+      new Docute({
+        target: '#docute',
+        sidebar: JSON.parse('[{&#34;title&#34;:&#34;Sample Components&#34;,&#34;links&#34;:[{&#34;title&#34;:&#34;testcomponent&#34;,&#34;link&#34;:&#34;/components/testcomponent&#34;}]}]'.replace(/\&\#34\;/g, '"'))
+      })
+    </script>
+  </body>
+</html>
--- a/index.html
+++ b/index.html
@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <script src="https://unpkg.com/vue@next"></script>
+    </head>
+
+    <body>
+        <div id="app">
+            <h2>{{ title }}</h2>
+            <input :value="title" @input="title = $event.target.value" >
+            <input v-model="count" type="number" >
+            <button @click="increment">Up</button>
+            <button @click="decrement">Down</button>
+        </div>
+
+        <script>
+            const app = Vue.createApp({
+                data() {
+                    return {
+                        title: "Hi there",
+                        count: 4,
+                        headingColor: 'some'
+                    }
+                },
+                watch: {
+                    count() {
+                        console.log(this.count)
+                    }
+                },
+                methods: {
+                    increment() {
+                        this.count++
+                    },
+                    decrement() {
+                        this.count--
+                    },
+                    isEven() {
+                        return this.count % 2 === 0
+                    }
+                }
+            })
+
+            const vm = app.mount('#app')
+        </script>
+
+        <style>
+            .even {
+                color: pink;
+            }
+        </style>
+    </body>
+</html>
--- a/testcomponent.vue
+++ b/testcomponent.vue
@ -0,0 +1,31 @@
+<template>
+    <div>
+        <h1>{{ title }}</h1>
+    </div>
+</template>
+
+<script>
+    // @group Sample Components
+    // just some sample code...
+    export default {
+        data() {
+            return {
+                // the title of the pages
+                title: "Hello"
+            }
+        },
+        methods: {
+            // @vuese
+            // clears something
+            clear() {
+                return true
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    h1 {
+        color: red;
+    }
+</style>