diff --git a/README.md b/README.md index 54d1f29c..acce74a4 100644 --- a/README.md +++ b/README.md @@ -6,8 +6,6 @@ This site is built with [VuePress](https://vuepress.vuejs.org/). Site content is See the [Vue Docs Writing Guide](https://v3.vuejs.org/guide/writing-guide.html) for our rules and recommendations on writing and maintaining documentation. -> The docs are in beta: The team is currently in the midst of changes and we are not ready for additional contributions yet. All content is subject to change. If you see a problem that you would like to bring to our attention, please [create an issue](https://github.com/vuejs/docs-next/issues/new) and we will get to it when we can. You may want to wait until the content is finalized, though. - ## Developing 1. Clone repository diff --git a/assets/lifecycle-diagram.svg b/assets/lifecycle-diagram.svg new file mode 100644 index 00000000..04820093 --- /dev/null +++ b/assets/lifecycle-diagram.svg @@ -0,0 +1,185 @@ + + + Lifecycle + + + * Template compilation is performed ahead-of-time if using + a build step, e.g., with single-file components. + + + + + + beforeUnmount + + + + + + + when + app. + unmount + () is + called + + + + + + + beforeCreate + + + + + + + app = Vue. + createApp + ( + options + ) + app. + mount + ( + el + ) + + + + + + + + + + + + + + + + Compile template + into render function + * + + + + + + Compile el’s innerHTML + as template + * + + + + + + Has + “template” option? + + + + YE + S + + + NO + + + + + + + created + + + + + + + beforeMount + + + + + + + mounted + + + + + + + unmounted + + + + + + + + beforeUpdate + + + + + + + updated + + + + + + + Virtual DOM + re-rendered + and patch + + + + when data + change + + + + + + + Init + events & lifecycle + + + + + + + Init + injections & reactivity + + + + + + + Create app.$el and + replace “el” with it + + + + + + Mounted + + + + + + Unmounted + + + + \ No newline at end of file diff --git a/assets/scoped-slot-diagram.svg b/assets/scoped-slot-diagram.svg new file mode 100644 index 00000000..d5b8ae3a --- /dev/null +++ b/assets/scoped-slot-diagram.svg @@ -0,0 +1,78 @@ + + + Scoped Slot + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + TodoList + + + Slot + + + + Parent Component + + + + + <todo-list> + <template v-slot:default=" + slotProps + "> + <span> + {{ + slotProps + .item }} + <span> + </template> + </todo-list> + + + <li v-for="item in items"> + <slot :item="item"></slot> + </li> + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/slot-render-diagram.svg b/assets/slot-render-diagram.svg new file mode 100644 index 00000000..eeac02d7 --- /dev/null +++ b/assets/slot-render-diagram.svg @@ -0,0 +1,60 @@ + + + Slot Render Scope + + + + + + + + + + + + + + + + + + Data + + + TodoButton + + + + + Parent Component + + + + + <todo-button> + Delete + {{ item }} + + </todo-button> + + + + + + Data + + + { + item: 'First Item' } + + + + + + + + + + + + \ No newline at end of file diff --git a/package.json b/package.json index a13643cb..f7e49320 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,12 @@ { "devDependencies": { - "node-sass": "^4.13.1", + "@vuepress/plugin-pwa": "^1.5.4", + "sass": "^1.32.0", "sass-loader": "^8.0.2", "vuepress": "^1.5.4" }, "scripts": { + "dev": "yarn serve", "serve": "vuepress dev src", "build": "vuepress build src" }, @@ -12,7 +14,7 @@ "@docsearch/css": "^1.0.0-alpha.27", "@docsearch/js": "^1.0.0-alpha.27", "algoliasearch": "^4.4.0", - "axios": "^0.19.1", + "axios": "^0.21.1", "intersection-observer": "^0.11.0", "showdown": "^1.9.1" } diff --git a/src/.vuepress/components/MigrationBadges.vue b/src/.vuepress/components/MigrationBadges.vue index ddc69363..02218143 100644 --- a/src/.vuepress/components/MigrationBadges.vue +++ b/src/.vuepress/components/MigrationBadges.vue @@ -1,5 +1,10 @@ @@ -21,7 +31,7 @@ export default { :class="`migration-badge is-${badgeType}`" :key="`badge-type-${badgeType}`" > - {{ badgeType }} + {{ validBadges[badgeType] }} diff --git a/src/.vuepress/components/VideoLesson.vue b/src/.vuepress/components/VideoLesson.vue new file mode 100644 index 00000000..e18004e5 --- /dev/null +++ b/src/.vuepress/components/VideoLesson.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/src/.vuepress/components/common/codepen-snippet.vue b/src/.vuepress/components/common/codepen-snippet.vue new file mode 100644 index 00000000..ed23e3a4 --- /dev/null +++ b/src/.vuepress/components/common/codepen-snippet.vue @@ -0,0 +1,104 @@ + + + + + diff --git a/src/.vuepress/components/common/vuemastery-video-modal.vue b/src/.vuepress/components/common/vuemastery-video-modal.vue index e511c1ea..9c121625 100644 --- a/src/.vuepress/components/common/vuemastery-video-modal.vue +++ b/src/.vuepress/components/common/vuemastery-video-modal.vue @@ -1,14 +1,18 @@