diff --git a/src/api/options-lifecycle-hooks.md b/src/api/options-lifecycle-hooks.md index aa0b661205..9e1a285c1f 100644 --- a/src/api/options-lifecycle-hooks.md +++ b/src/api/options-lifecycle-hooks.md @@ -107,7 +107,7 @@ All lifecycle hooks automatically have their `this` context bound to the instanc **This hook is not called during server-side rendering.** - **See also:** - - [Dynamic Components - keep-alive](../guide/component-basics.html#keep-alive) + - [Dynamic Components - keep-alive](../guide/component-dynamic-async.html#dynamic-components-with-keep-alive) ## deactivated @@ -120,7 +120,7 @@ All lifecycle hooks automatically have their `this` context bound to the instanc **This hook is not called during server-side rendering.** - **See also:** - - [Dynamic Components - keep-alive](../guide/component-basics.html#keep-alive) + - [Dynamic Components - keep-alive](../guide/component-dynamic-async.html#dynamic-components-with-keep-alive) ## beforeUnmount diff --git a/src/api/options-misc.md b/src/api/options-misc.md index fc3a7b538e..5736b6c7a4 100644 --- a/src/api/options-misc.md +++ b/src/api/options-misc.md @@ -63,4 +63,4 @@ }) ``` -- **See also:** [Disabling Attribute Inheritance](../guide/component-props.html#disabling-attribute-inheritance) +- **See also:** [Disabling Attribute Inheritance](../guide/component-attrs.html#disabling-attribute-inheritance) diff --git a/src/guide/component-attrs.md b/src/guide/component-attrs.md index f76a4c1f20..576d73ec3b 100644 --- a/src/guide/component-attrs.md +++ b/src/guide/component-attrs.md @@ -84,7 +84,7 @@ The common scenario for disabling an attribute inheritance is when attributes ne By setting the `inheritAttrs` option to `false`, you can control to apply to other elements attributes to use the component's `$attrs` property, which includes all attributes not included to component `props` and `emits` properties (e.g., `class`, `style`, `v-on` listeners, etc.). -Using our date-picker component example from the [previous section]('#attribute-inheritance), in the event we need to apply all non-prop attributes to the `input` element rather than the root `div` element, this can be accomplished by using the `v-bind` shortcut. +Using our date-picker component example from the [previous section](#attribute-inheritance), in the event we need to apply all non-prop attributes to the `input` element rather than the root `div` element, this can be accomplished by using the `v-bind` shortcut. ```js{5} app.component('date-picker', { diff --git a/src/guide/component-dynamic-async.md b/src/guide/component-dynamic-async.md index 7939342e69..9eb95ef701 100644 --- a/src/guide/component-dynamic-async.md +++ b/src/guide/component-dynamic-async.md @@ -93,7 +93,7 @@ createApp({ ### Using with Suspense -Async components are _suspensible_ by default. This means if it has a [``](TODO) in the parent chain, it will be treated as an async dependency of that ``. In this case, the loading state will be controlled by the ``, and the component's own loading, error, delay and timeout options will be ignored. +Async components are _suspensible_ by default. This means if it has a `` in the parent chain, it will be treated as an async dependency of that ``. In this case, the loading state will be controlled by the ``, and the component's own loading, error, delay and timeout options will be ignored. The async component can opt-out of `Suspense` control and let the component always control its own loading state by specifying `suspensible: false` in its options. diff --git a/src/guide/component-provide-inject.md b/src/guide/component-provide-inject.md index b63451a490..932e296b39 100644 --- a/src/guide/component-provide-inject.md +++ b/src/guide/component-provide-inject.md @@ -109,4 +109,4 @@ app.component('todo-list', { }) ``` -In this, any change to `todos.length` will be reflected correctly in the components, where `todoLength` is injected. Read more about `reactive` provide/inject in the [Composition API section](composition-api-provide-inject.html#injection-reactivity) +In this, any change to `todos.length` will be reflected correctly in the components, where `todoLength` is injected. Read more about `reactive` provide/inject in the [Composition API section](composition-api-provide-inject.html#reactivity) diff --git a/src/guide/installation.md b/src/guide/installation.md index e873075ff1..ffd0c5cd81 100644 --- a/src/guide/installation.md +++ b/src/guide/installation.md @@ -42,7 +42,7 @@ $ npm install vue@next Vue provides an [official CLI](https://github.com/vuejs/vue-cli) for quickly scaffolding ambitious Single Page Applications. It provides batteries-included build setups for a modern frontend workflow. It takes only a few minutes to get up and running with hot-reload, lint-on-save, and production-ready builds. See [the Vue CLI docs](https://cli.vuejs.org) for more details. ::: tip -The CLI assumes prior knowledge of Node.js and the associated build tools. If you are new to Vue or front-end build tools, we strongly suggest going through the guide without any build tools before using the CLI. +The CLI assumes prior knowledge of Node.js and the associated build tools. If you are new to Vue or front-end build tools, we strongly suggest going through [the guide](./introduction.html) without any build tools before using the CLI. ::: For Vue 3, you should use Vue CLI v4.5 available on `npm` as `@vue/cli`. To upgrade, you need to reinstall the latest version of `@vue/cli` globally: diff --git a/src/guide/template-syntax.md b/src/guide/template-syntax.md index d3ff6b4dda..0ad06df894 100644 --- a/src/guide/template-syntax.md +++ b/src/guide/template-syntax.md @@ -48,7 +48,7 @@ Dynamically rendering arbitrary HTML on your website can be very dangerous becau ### Attributes -Mustaches cannot be used inside HTML attributes. Instead, use a [`v-bind` directive](../api/#v-bind): +Mustaches cannot be used inside HTML attributes. Instead, use a [`v-bind` directive](../api/directives.html#v-bind): ```html
diff --git a/src/guide/transitions-state.md b/src/guide/transitions-state.md index abcf4de3be..9ff043a4ec 100644 --- a/src/guide/transitions-state.md +++ b/src/guide/transitions-state.md @@ -145,7 +145,7 @@ app.mount('#app')

-Now we can compose multiple states with these child components. It's exciting- we can use any combination of transition strategies that have been covered on this page, along with those offered by Vue's [built-in transition system](transitions.html). Together, there are very few limits to what can be accomplished. +Now we can compose multiple states with these child components. It's exciting- we can use any combination of transition strategies that have been covered on this page, along with those offered by Vue's [built-in transition system](transitions-enterleave.html). Together, there are very few limits to what can be accomplished. You can see how we could use this for data visualization, for physics effects, for character animations and interactions, the sky's the limit. diff --git a/src/style-guide/README.md b/src/style-guide/README.md index 1723351e6e..e9ecd8c40c 100644 --- a/src/style-guide/README.md +++ b/src/style-guide/README.md @@ -794,7 +794,7 @@ components/ ### Self-closing components strongly recommended -**Components with no content should be self-closing in [single-file components](../guide/single-file-component.html), string templates, and [JSX](../guide/render-function.html#JSX) - but never in DOM templates.** +**Components with no content should be self-closing in [single-file components](../guide/single-file-component.html), string templates, and [JSX](../guide/render-function.html#jsx) - but never in DOM templates.** Components that self-close communicate that they not only have no content, but are **meant** to have no content. It's the difference between a blank page in a book and one labeled "This page intentionally left blank." Your code is also cleaner without the unnecessary closing tag. @@ -884,7 +884,7 @@ OR ### Component name casing in JS/JSX strongly recommended -**Component names in JS/[JSX](../guide/render-function.html#JSX) should always be PascalCase, though they may be kebab-case inside strings for simpler applications that only use global component registration through `app.component`.** +**Component names in JS/[JSX](../guide/render-function.html#jsx) should always be PascalCase, though they may be kebab-case inside strings for simpler applications that only use global component registration through `app.component`.** ::: details Detailed Explanation In JavaScript, PascalCase is the convention for classes and prototype constructors - essentially, anything that can have distinct instances. Vue components also have instances, so it makes sense to also use PascalCase. As an added benefit, using PascalCase within JSX (and templates) allows readers of the code to more easily distinguish between components and HTML elements. @@ -892,7 +892,7 @@ In JavaScript, PascalCase is the convention for classes and prototype constructo However, for applications that use **only** global component definitions via `app.component`, we recommend kebab-case instead. The reasons are: - It's rare that global components are ever referenced in JavaScript, so following a convention for JavaScript makes less sense. -- These applications always include many in-DOM templates, where [kebab-case **must** be used](#Component-name-casing-in-templates-strongly-recommended). +- These applications always include many in-DOM templates, where [kebab-case **must** be used](#component-name-casing-in-templates-strongly-recommended). :::
@@ -978,7 +978,7 @@ components/ ### Prop name casing strongly recommended -**Prop names should always use camelCase during declaration, but kebab-case in templates and [JSX](../guide/render-function.html#JSX).** +**Prop names should always use camelCase during declaration, but kebab-case in templates and [JSX](../guide/render-function.html#jsx).** We're simply following the conventions of each language. Within JavaScript, camelCase is more natural. Within HTML, kebab-case is. @@ -1014,7 +1014,7 @@ props: { **Elements with multiple attributes should span multiple lines, with one attribute per line.** -In JavaScript, splitting objects with multiple properties over multiple lines is widely considered a good convention, because it's much easier to read. Our templates and [JSX](../guide/render-function.html#JSX) deserve the same consideration. +In JavaScript, splitting objects with multiple properties over multiple lines is widely considered a good convention, because it's much easier to read. Our templates and [JSX](../guide/render-function.html#jsx) deserve the same consideration.

Bad