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]>

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',
  ]
  }
  ]