diff --git a/src/.vuepress/components/search/index.vue b/src/.vuepress/components/search/index.vue new file mode 100644 index 0000000000..170154c488 --- /dev/null +++ b/src/.vuepress/components/search/index.vue @@ -0,0 +1,258 @@ + + + + + diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index 2dff70928c..a28b461933 100644 --- a/src/.vuepress/config.js +++ b/src/.vuepress/config.js @@ -405,6 +405,7 @@ module.exports = { smoothScroll: false, algolia: { indexName: 'vuejs-v3', + appId: 'BH4D9OD16A', apiKey: 'bc6e8acb44ed4179c30d0a45d6140d3f' } }, diff --git a/src/guide/installation.md b/src/guide/installation.md index e940d3ab66..282241dd23 100644 --- a/src/guide/installation.md +++ b/src/guide/installation.md @@ -93,7 +93,7 @@ $ yarn dev ## Explanation of Different Builds -In the [`dist/` directory of the npm package](https://cdn.jsdelivr.net/npm/vue@3.0.0-rc.1/dist/) you will find many different builds of Vue.js. Here is an overview of which `dist` file should be used depending on the use-case. +In the [`dist/` directory of the npm package](https://cdn.jsdelivr.net/npm/vue@3.0.2/dist/) you will find many different builds of Vue.js. Here is an overview of which `dist` file should be used depending on the use-case. ### From CDN or without a Bundler diff --git a/src/guide/migration/children.md b/src/guide/migration/children.md index 3736a092c7..087a6ee969 100644 --- a/src/guide/migration/children.md +++ b/src/guide/migration/children.md @@ -7,32 +7,34 @@ badges: ## Overview -`$children` instance property removed from Vue 3.0 and no longer supported. +The `$children` instance property has been removed from Vue 3.0 and is no longer supported. ## 2.x Syntax In 2.x, developers could access direct child components of the current instance with `this.$children`: -```html -
- Vue logo - Change logo -
-``` +```vue + + + ``` ## 3.x Update -In 3.x, `$children` property is removed and no longer supported. Instead, if you need to access a child component instance, we recommend using [$refs](/guide/component-template-refs.html#template-refs). +In 3.x, the `$children` property is removed and no longer supported. Instead, if you need to access a child component instance, we recommend using [$refs](/guide/component-template-refs.html#template-refs). diff --git a/src/guide/migration/custom-directives.md b/src/guide/migration/custom-directives.md index 7e16c55131..9633c07544 100644 --- a/src/guide/migration/custom-directives.md +++ b/src/guide/migration/custom-directives.md @@ -7,12 +7,14 @@ badges: ## Overview +The hook functions for directives have been renamed to better align with the component lifecycle. Here is a quick summary of what has changed: - API has been renamed to better align with component lifecycle For more information, read on! + ## 2.x Syntax In Vue 2, custom directives were created by using the hooks listed below to target an element’s lifecycle, all of which are optional: @@ -45,10 +47,10 @@ In Vue 3, however, we’ve created a more cohesive API for custom directives. As - bind → **beforeMount** - inserted → **mounted** -- **beforeUpdate**: new! this is called before the element itself is updated, much like the component lifecycle hooks. +- **beforeUpdate**: new! This is called before the element itself is updated, much like the component lifecycle hooks. - update → removed! There were too many similarities to updated, so this is redundant. Please use updated instead. - componentUpdated → **updated** -- **beforeUnmount**: new! similar to component lifecycle hooks, this will be called right before an element is unmounted. +- **beforeUnmount**: new! Similar to component lifecycle hooks, this will be called right before an element is unmounted. - unbind -> **unmounted** The final API is as follows: @@ -57,7 +59,7 @@ The final API is as follows: const MyDirective = { beforeMount(el, binding, vnode, prevVnode) {}, mounted() {}, - beforeUpdate() {}, + beforeUpdate() {}, // new updated() {}, beforeUnmount() {}, // new unmounted() {} @@ -103,5 +105,5 @@ mounted(el, binding, vnode) { ``` :::warning -With [fragments](/guide/migration/fragments.html#overview) support, components can potentially have more than one root nodes. When applied to a multi-root component, directive will be ignored and the warning will be thrown. +With [fragments](/guide/migration/fragments.html#overview) support, components can potentially have more than one root node. When applied to a multi-root component, a directive will be ignored and a warning will be logged. ::: diff --git a/src/guide/migration/emits-option.md b/src/guide/migration/emits-option.md index 968a0f41f7..35b40aea09 100644 --- a/src/guide/migration/emits-option.md +++ b/src/guide/migration/emits-option.md @@ -8,13 +8,13 @@ badges: ## Overview -Vue 3 now offers an `emits` option similar to the existing `props` option. This option can be used to define the events that a component can emit to its parent. +Vue 3 now offers an `emits` option, similar to the existing `props` option. This option can be used to define the events that a component can emit to its parent. ## 2.x Behavior -In Vue 2, you can define the props that a component received, but you can't declare which events it can emit: +In Vue 2, you can define the props that a component receives, but you can't declare which events it can emit: -```html +```vue