Move component basics section (#39)

* feat: started component basics

* feat: add button-counter example

* feat: moved component props

* feat: reworked events on components

* Added v-model on components

* feat: added slots to components basic

* feat: added dynamic components

* fix: fixed config

* fix: replaced fiddles with codesandboxes

* Update src/guide/component-basics.md

Co-Authored-By: Rahul Kadyan <[email protected]>

* fix: removed new Vue reminiscenses

* fix: fixed createApp reference

* fix: fixed update events names

* fix: fixed createApp

* fix: changed modelValue to be camelCase

* fix: fixed prop name

* Update src/guide/component-basics.md

Co-Authored-By: Rahul Kadyan <[email protected]>

* Update src/guide/component-basics.md

Co-Authored-By: Rahul Kadyan <[email protected]>

* feat: added a note on case-insensitiveness

Co-authored-by: Rahul Kadyan <[email protected]>

Author: NataliaTepluhina

src/.vuepress/components/alert-box.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="demo-alert-box">
+    <strong>Error!</strong>
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped>
+.demo-alert-box {
+  padding: 10px 20px;
+  background: #f3beb8;
+  border: 1px solid #f09898;
+}
+</style>

src/.vuepress/components/blog-post1.vue

@@ -0,0 +1,9 @@
+<template>
+  <h3>{{ title }}</h3>
+</template>
+
+<script>
+export default {
+  props: ['title']
+}
+</script>

src/.vuepress/components/blog-post2.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <h4>{{ title }}</h4>
+    <button @click="$emit('enlarge-text')">
+      Enlarge text
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['title']
+}
+</script>

src/.vuepress/components/button-counter.vue

@@ -0,0 +1,15 @@
+<template>
+  <button v-on:click="count++">You clicked me {{ count }} times.</button>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      count: 0
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/.vuepress/components/components-1.vue

@@ -0,0 +1,5 @@
+<template>
+  <div id="components-demo" class="demo">
+    <button-counter></button-counter>
+  </div>
+</template>

src/.vuepress/components/components-2.vue

@@ -0,0 +1,7 @@
+<template>
+  <div id="components-demo2" class="demo">
+    <button-counter></button-counter>
+    <button-counter></button-counter>
+    <button-counter></button-counter>
+  </div>
+</template>

src/.vuepress/components/components-3.vue

@@ -0,0 +1,7 @@
+<template>
+  <div id="blog-post-demo" class="demo">
+    <blog-post1 title="My journey with Vue"></blog-post1>
+    <blog-post1 title="Blogging with Vue"></blog-post1>
+    <blog-post1 title="Why Vue is so fun"></blog-post1>
+  </div>
+</template>

src/.vuepress/components/components-4.vue

@@ -0,0 +1,27 @@
+<template>
+  <div id="blog-posts-events-demo" class="demo">
+    <div :style="{ fontSize: postFontSize + 'em' }">
+      <blog-post2
+        v-for="post in posts"
+        v-bind:key="post.id"
+        v-bind:title="post.title"
+        v-on:enlarge-text="postFontSize += 0.1"
+      ></blog-post2>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      posts: [
+        { id: 1, title: 'My journey with Vue', content: '...content...' },
+        { id: 2, title: 'Blogging with Vue', content: '...content...' },
+        { id: 3, title: 'Why Vue is so fun', content: '...content...' }
+      ],
+      postFontSize: 1
+    }
+  }
+}
+</script>

src/.vuepress/components/components-5.vue

@@ -0,0 +1,13 @@
+<template>
+  <div id="slots-demo" class="demo">
+    <alert-box>
+      Something bad happened.
+    </alert-box>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped></style>

src/.vuepress/components/components-6.vue

@@ -0,0 +1,58 @@
+<template>
+  <div id="dynamic-component-demo" class="demo">
+    <button
+      v-for="tab in tabs"
+      v-bind:key="tab"
+      class="dynamic-component-demo-tab-button"
+      v-bind:class="{
+        'dynamic-component-demo-tab-button-active': tab === currentTab
+      }"
+      v-on:click="currentTab = tab"
+    >
+      {{ tab }}
+    </button>
+    <component
+      v-bind:is="currentTabComponent"
+      class="dynamic-component-demo-tab"
+    ></component>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      currentTab: 'Home',
+      tabs: ['Home', 'Posts', 'Archive']
+    }
+  },
+  computed: {
+    currentTabComponent() {
+      return `tab-${this.currentTab.toLowerCase()}`
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dynamic-component-demo-tab-button {
+  padding: 6px 10px;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  border: 1px solid #ccc;
+  cursor: pointer;
+  background: #f0f0f0;
+  margin-bottom: -1px;
+  margin-right: -1px;
+}
+.dynamic-component-demo-tab-button:hover {
+  background: #e0e0e0;
+}
+.dynamic-component-demo-tab-button-active {
+  background: #e0e0e0;
+}
+.dynamic-component-demo-tab {
+  border: 1px solid #ccc;
+  padding: 10px;
+}
+</style>

src/.vuepress/components/tab-archive.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Archive component</div>
+</template>

src/.vuepress/components/tab-home.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Home component</div>
+</template>

src/.vuepress/components/tab-posts.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Posts component</div>
+</template>

src/.vuepress/config.js

@@ -39,7 +39,8 @@ module.exports = {
             'conditional',
             'list',
             'events',
-            'forms'
+            'forms',
+            'component-basics',
           ]
         }
       ]