@@ -220,7 +220,7 @@ The component system is another important concept in Vue, because it's an abstra
-In Vue, a component is essentially an instance with pre-defined options. Registering a component in Vue is straightforward: we create a component object as we did with `App` objects and we define it in parent's `components` option:
+In Vue, a component is essentially an instance with pre-defined options. Registering a component in Vue is straightforward: we create a component object as we did with the `app` object and we define it in the parent's `components` option:
```js
const TodoItem = {
@@ -251,10 +251,10 @@ Now you can compose it in another component's template:
But this would render the same text for every todo, which is not super interesting. We should be able to pass data from the parent scope into child components. Let's modify the component definition to make it accept a [prop](component-basics.html#passing-data-to-child-components-with-props):
```js
-app.component('todo-item', {
+const TodoItem = {
props: ['todo'],
template: `
{{ todo.text }}`
-})
+}
```
Now we can pass the todo into each repeated component using `v-bind`:
@@ -278,6 +278,11 @@ Now we can pass the todo into each repeated component using `v-bind`:
```
```js
+const TodoItem = {
+ props: ['todo'],
+ template: `
{{ todo.text }}`
+}
+
const TodoList = {
data() {
return {
@@ -287,22 +292,20 @@ const TodoList = {
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
+ },
+ components: {
+ TodoItem
}
}
const app = Vue.createApp(TodoList)
-app.component('todo-item', {
- props: ['todo'],
- template: `
{{ todo.text }}`
-})
-
app.mount('#todo-list-app')
```
-This is a contrived example, but we have managed to separate our app into two smaller units, and the child is reasonably well-decoupled from the parent via the props interface. We can now further improve our `
` component with more complex template and logic without affecting the parent app.
+This is a contrived example, but we have managed to separate our app into two smaller units, and the child is reasonably well-decoupled from the parent via the props interface. We can now further improve our `` component with a more complex template and logic without affecting the parent app.
In a large application, it is necessary to divide the whole app into components to make development manageable. We will talk a lot more about components [later in the guide](component-basics.html), but here's an (imaginary) example of what an app's template might look like with components:
diff --git a/src/guide/migration/introduction.md b/src/guide/migration/introduction.md
index b2d5c71151..d86c317795 100644
--- a/src/guide/migration/introduction.md
+++ b/src/guide/migration/introduction.md
@@ -162,7 +162,7 @@ We are working on a new version of the Devtools with a new UI and refactored int
- Note: the beta channel may conflict with the stable version of devtools so you may need to temporarily disable the stable version for the beta channel to work properly.
-- For Firefox: [Download the signed extension](https://github.com/vuejs/vue-devtools/releases/tag/v6.0.0-beta.2) (`.xpi` file under Assets)
+- For Firefox: [Download the signed extension](https://github.com/vuejs/vue-devtools/releases/tag/v6.0.0-beta.20) (`.xpi` file under Assets)
### IDE Support
diff --git a/src/guide/migration/migration-build.md b/src/guide/migration/migration-build.md
index 8df38f2903..54fe9edd11 100644
--- a/src/guide/migration/migration-build.md
+++ b/src/guide/migration/migration-build.md
@@ -20,7 +20,7 @@ While we've tried hard to make the migration build mimic Vue 2 behavior as much
- Internet Explorer 11 support: [Vue 3 has officially dropped the plan for IE11 support](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0038-vue3-ie11-support.md). If you still need to support IE11 or below, you will have to stay on Vue 2.
-- Server-side rendering: the migration build can be used for SSR, but migrating a custom SSR setup is much more involved. The general idea is replacing `vue-server-renderer` with [`@vue/server-renderer`](https://github.com/vuejs/vue-next/tree/master/packages/server-renderer). Vue 3 no longer provides a bundle renderer and it is recommended to use Vue 3 SSR with [Vite](https://vitejs.dev/guide/ssr.html). If you are using [Nuxt.js](https://nuxtjs.org/), it is probably better to wait for Nuxt 3.
+- Server-side rendering: the migration build can be used for SSR, but migrating a custom SSR setup is much more involved. The general idea is replacing `vue-server-renderer` with [`@vue/server-renderer`](https://github.com/vuejs/vue-next/tree/master/packages/server-renderer). Vue 3 no longer provides a bundle renderer and it is recommended to use Vue 3 SSR with [Vite](https://vitejs.dev/guide/ssr.html). If you are using [Nuxt.js](https://nuxtjs.org/), you can try [Nuxt Bridge, a Nuxt.js 2 to 3 compatibility layer](https://v3.nuxtjs.org/getting-started/bridge/). For complex, production projects, it is probably best to wait for [Nuxt 3 (currently in beta)](https://v3.nuxtjs.org/getting-started/introduction).
### Expectations
diff --git a/src/guide/single-file-component.md b/src/guide/single-file-component.md
index 55c7b8a07a..595fc444a4 100644
--- a/src/guide/single-file-component.md
+++ b/src/guide/single-file-component.md
@@ -75,7 +75,7 @@ SFC is a defining feature of Vue as a framework, and is the recommended approach
- Static Site Generation (SSG)
- Any non-trivial frontends where a build step can be justified for better development experience (DX).
-That said, we do realize there are scenarios where SFCs can feel like overkill. This is why Vue can still be used via plain JavaScript without a build step. If you are just looking for enhancing largely static HTML with light interactions, you can also check out [petite-vue](https://github.com/vuejs/petite-vue), a 5kb subset of Vue optimized for progressive enhancement.
+That said, we do realize there are scenarios where SFCs can feel like overkill. This is why Vue can still be used via plain JavaScript without a build step. If you are just looking for enhancing largely static HTML with light interactions, you can also check out [petite-vue](https://github.com/vuejs/petite-vue), a 6kb subset of Vue optimized for progressive enhancement.
## What About Separation of Concerns?
diff --git a/src/guide/template-syntax.md b/src/guide/template-syntax.md
index 9b2c55a555..bcb024e00b 100644
--- a/src/guide/template-syntax.md
+++ b/src/guide/template-syntax.md
@@ -26,7 +26,7 @@ You can also perform one-time interpolations that do not update on data change b
### Raw HTML
-The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the [`v-html` directive](../api/directives.html#v-html):
+The double mustaches interpret the data as plain text, not HTML. In order to output real HTML, you will need to use the [`v-html` directive](../api/directives.html#v-html):
```html
Using mustaches: {{ rawHtml }}
@@ -38,7 +38,7 @@ The double mustaches interprets the data as plain text, not HTML. In order to ou
The contents of the `span` will be replaced with the value of the `rawHtml` property, interpreted as plain HTML - data bindings are ignored. Note that you cannot use `v-html` to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.
::: tip
-Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS vulnerabilities](https://en.wikipedia.org/wiki/Cross-site_scripting). Only use HTML interpolation on trusted content and **never** on user-provided content
+Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS vulnerabilities](https://en.wikipedia.org/wiki/Cross-site_scripting). Only use HTML interpolation on trusted content and **never** on user-provided content.
:::
### Attributes
@@ -145,7 +145,7 @@ You'll see other examples of modifiers later, [for `v-on`](events.md#event-modif
## Shorthands
-The `v-` prefix serves as a visual cue for identifying Vue-specific attributes in your templates. This is useful when you are using Vue.js to apply dynamic behavior to some existing markup, but can feel verbose for some frequently used directives. At the same time, the need for the `v-` prefix becomes less important when you are building a [SPA](https://en.wikipedia.org/wiki/Single-page_application), where Vue manages every template. Therefore, Vue provides special shorthands for two of the most often used directives, `v-bind` and `v-on`:
+The `v-` prefix serves as a visual cue for identifying Vue-specific attributes in your templates. This is useful when you are using Vue.js to apply dynamic behavior to some existing markup, but can feel verbose for some frequently used directives. At the same time, the need for the `v-` prefix becomes less important when you are building an [SPA](https://en.wikipedia.org/wiki/Single-page_application), where Vue manages every template. Therefore, Vue provides special shorthands for two of the most often used directives, `v-bind` and `v-on`:
### `v-bind` Shorthand
diff --git a/src/guide/transitions-overview.md b/src/guide/transitions-overview.md
index a1f772b961..ee20b1c262 100644
--- a/src/guide/transitions-overview.md
+++ b/src/guide/transitions-overview.md
@@ -176,7 +176,7 @@ Easing can also convey the quality of material being animated. Take this pen for
-You can get a lot of unique effects and make your animation very stylish by adjusting your easing. CSS allows you to modify this by adjusting a cubic-bezier property, [this playground](https://cubic-bezier.com/#.17,.67,.83,.67) by Lea Verou is very helpful for exploring this.
+You can get a lot of unique effects and make your animation very stylish by adjusting your easing. CSS allows you to modify this by adjusting the cubic-bezier function's parameters, [this playground](https://cubic-bezier.com/#.17,.67,.83,.67) by Lea Verou is very helpful for exploring this.
Though you can achieve great effects for simple animation with the two handles the cubic-bezier ease offers, JavaScript allows multiple handles, and therefore, allows for much more variance.
diff --git a/src/guide/typescript-support.md b/src/guide/typescript-support.md
index 8038704762..c8363a08ef 100644
--- a/src/guide/typescript-support.md
+++ b/src/guide/typescript-support.md
@@ -88,7 +88,7 @@ Or, if you want to combine TypeScript with a [JSX `render` function](/guide/rend
For developing Vue applications with TypeScript, we strongly recommend using [Visual Studio Code](https://code.visualstudio.com/), which provides great out-of-the-box support for TypeScript. If you are using [single-file components](./single-file-component.html) (SFCs), get the awesome [Volar extension](https://github.com/johnsoncodehk/volar), which provides TypeScript inference inside SFCs and many other great features.
-[WebStorm](https://www.jetbrains.com/webstorm/) also provides out-of-the-box support for both TypeScript and Vue.
+[WebStorm](https://www.jetbrains.com/webstorm/) provides out of the box support for both TypeScript and Vue. Other JetBrains IDEs also support them, either out of the box or via [this free plugin](https://plugins.jetbrains.com/plugin/9442-vue-js).
## Defining Vue Components
diff --git a/yarn.lock b/yarn.lock
index 0f27ca96c5..761d82b5e8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3742,9 +3742,9 @@ flush-write-stream@^1.0.0:
readable-stream "^2.3.6"
follow-redirects@^1.0.0:
- version "1.13.1"
- resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.1.tgz#5f69b813376cee4fd0474a3aba835df04ab763b7"
- integrity sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg==
+ version "1.14.7"
+ resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.7.tgz#2004c02eb9436eee9a21446a6477debf17e81685"
+ integrity sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==
for-in@^1.0.2:
version "1.0.2"
- 
- 
-