diff --git a/src/api/application-api.md b/src/api/application-api.md index 6acc202be3..3aa702ede4 100644 --- a/src/api/application-api.md +++ b/src/api/application-api.md @@ -158,7 +158,7 @@ Apart from `el`, you should treat these arguments as read-only and never modify - **Usage:** - Apply a mixin in the whole application scope, which will affect **every** Vue instance created afterwards in the given app (for example, child components). This can be used by plugin authors to inject custom behavior into components. **Not recommended in application code**. + Apply a mixin in the whole application scope. Once registered they can be used in the template of any component within the current application. This can be used by plugin authors to inject custom behavior into components. **Not recommended in application code**. - **See also:** [Global Mixin](../guide/mixins.html#global-mixin) @@ -192,44 +192,6 @@ app.mount('#my-app') - **See also:** - [Lifecycle Diagram](../guide/instance.html#lifecycle-diagram) -## provide - -- **Type:** - - - `Object | () => Object` - -- **Details:** - - This option is [used together with `inject`](../api/options-composition.html#provide-inject) to allow an ancestor component to serve as a dependency injector for all its descendants, regardless of how deep the component hierarchy is, as long as they are in the same parent chain. - - The `provide` option should be an object or a function that returns an object. This object contains the properties that are available for injection into its descendants. You can use ES2015 Symbols as keys in this object, but only in environments that natively support `Symbol` and `Reflect.ownKeys`. - - > Note: the `provide` and `inject` bindings are NOT reactive. This is intentional. However, if you pass down an observed object, properties on that object do remain reactive. - -- **Example:** - -```js -import { createApp } from 'vue' - -const app = createApp({ - provide: { - user: 'John Doe' - } -}) - -app.component('user-card', { - inject: ['user'], - template: ` -
- {{ user }} -
- ` -}) -``` - -- **See also:** - - [Provide / Inject](../guide/component-provide-inject.md) - ## unmount - **Arguments:** diff --git a/src/api/application-config.md b/src/api/application-config.md index b38191c183..b702fcd8c6 100644 --- a/src/api/application-config.md +++ b/src/api/application-config.md @@ -38,7 +38,7 @@ app.config.errorHandler = (err, vm, info) => { } ``` -Assign a handler for uncaught errors during component render function and watchers. The handler gets called with the error and the Vue instance. +Assign a handler for uncaught errors during component render function and watchers. The handler gets called with the error and the application instance. > Error tracking services [Sentry](https://sentry.io/for/vue/) and [Bugsnag](https://docs.bugsnag.com/platforms/browsers/vue/) provide official integrations using this option. @@ -134,7 +134,7 @@ app.mixin({ Define merging strategies for custom options. -The merge strategy receives the value of that option defined on the parent and child instances as the first and second arguments, respectively. The context Vue instance is passed as the third argument. +The merge strategy receives the value of that option defined on the parent and child instances as the first and second arguments, respectively. The context application instance is passed as the third argument. - **See also:** [Custom Option Merging Strategies](../guide/mixins.html#custom-option-merge-strategies) diff --git a/src/api/directives.md b/src/api/directives.md index ed00602e99..fcbf7ff896 100644 --- a/src/api/directives.md +++ b/src/api/directives.md @@ -409,7 +409,7 @@ - **Usage:** - This directive will remain on the element until the associated Vue instance finishes compilation. Combined with CSS rules such as `[v-cloak] { display: none }`, this directive can be used to hide un-compiled mustache bindings until the Vue instance is ready. + This directive will remain on the element until the associated component instance finishes compilation. Combined with CSS rules such as `[v-cloak] { display: none }`, this directive can be used to hide un-compiled mustache bindings until the component instance is ready. - **Example:** diff --git a/src/api/instance-methods.md b/src/api/instance-methods.md index df12c72e5d..08aa499aee 100644 --- a/src/api/instance-methods.md +++ b/src/api/instance-methods.md @@ -1,6 +1,6 @@ # Instance Methods -## $watch +## \$watch - **Arguments:** @@ -14,7 +14,7 @@ - **Usage:** - Watch a reactive property or a computed function on the Vue instance for changes. The callback gets called with the new value and the old value for the given property. We can only pass top-level `data`, `prop`, or `computed` property name as a string. For more complex expressions or nested properties, use a function instead. + Watch a reactive property or a computed function on the component instance for changes. The callback gets called with the new value and the old value for the given property. We can only pass top-level `data`, `prop`, or `computed` property name as a string. For more complex expressions or nested properties, use a function instead. - **Example:** @@ -172,7 +172,7 @@ - **See also:** [Watchers](../guide/computed.html#watchers) -## $emit +## \$emit - **Arguments:** @@ -249,13 +249,13 @@ - [`emits` option](./options-data.html#emits) - [Emitting a Value With an Event](../guide/component-basics.html#emitting-a-value-with-an-event) -## $forceUpdate +## \$forceUpdate - **Usage:** - Force the Vue instance to re-render. Note it does not affect all child components, only the instance itself and child components with inserted slot content. + Force the component instance to re-render. Note it does not affect all child components, only the instance itself and child components with inserted slot content. -## $nextTick +## \$nextTick - **Arguments:** diff --git a/src/api/instance-properties.md b/src/api/instance-properties.md index b244a3ce28..3f8a420581 100644 --- a/src/api/instance-properties.md +++ b/src/api/instance-properties.md @@ -6,7 +6,7 @@ - **Details:** - The data object that the Vue instance is observing. The Vue instance proxies access to the properties on its data object. + The data object that the component instance is observing. The component instance proxies access to the properties on its data object. - **See also:** [Options / Data - data](./options-data.html#data-2) @@ -16,7 +16,7 @@ - **Details:** - An object representing the current props a component has received. The Vue instance proxies access to the properties on its props object. + An object representing the current props a component has received. The component instance proxies access to the properties on its props object. ## $el @@ -26,7 +26,7 @@ - **Details:** - The root DOM element that the Vue instance is managing. + The root DOM element that the component instance is managing. ## $options @@ -36,7 +36,7 @@ - **Details:** - The instantiation options used for the current Vue instance. This is useful when you want to include custom properties in the options: + The instantiation options used for the current component instance. This is useful when you want to include custom properties in the options: ```js const app = Vue.createApp({ @@ -49,7 +49,7 @@ ## $parent -- **Type:** `Vue instance` +- **Type:** `Component instance` - **Read only** @@ -59,13 +59,13 @@ ## $root -- **Type:** `Vue instance` +- **Type:** `Component instance` - **Read only** - **Details:** - The root Vue instance of the current component tree. If the current instance has no parents this value will be itself. + The root component instance of the current component tree. If the current instance has no parents this value will be itself. ## $slots diff --git a/src/api/options-assets.md b/src/api/options-assets.md index 06b1364b62..2ac7d50763 100644 --- a/src/api/options-assets.md +++ b/src/api/options-assets.md @@ -6,7 +6,7 @@ - **Details:** - A hash of directives to be made available to the Vue instance. + A hash of directives to be made available to the component instance. - **See also:** [Custom Directives](../guide/custom-directive.html) @@ -16,6 +16,6 @@ - **Details:** - A hash of components to be made available to the Vue instance. + A hash of components to be made available to the component instance. - **See also:** [Components](../guide/component-basics.html) diff --git a/src/api/options-data.md b/src/api/options-data.md index 2fcef55d10..3f8f63a338 100644 --- a/src/api/options-data.md +++ b/src/api/options-data.md @@ -6,13 +6,13 @@ - **Details:** - The function that returns a data object for the Vue instance. In `data`, we don't recommend to observe objects with their own stateful behavior like browser API objects and prototype properties. A good idea would be to have here just a plain object that represents component data. + The function that returns a data object for the component instance. In `data`, we don't recommend to observe objects with their own stateful behavior like browser API objects and prototype properties. A good idea would be to have here just a plain object that represents component data. Once observed, you can no longer add reactive properties to the root data object. It is therefore recommended to declare all root-level reactive properties upfront, before creating the instance. - After the instance is created, the original data object can be accessed as `vm.$data`. The Vue instance also proxies all the properties found on the data object, so `vm.a` will be equivalent to `vm.$data.a`. + After the instance is created, the original data object can be accessed as `vm.$data`. The component instance also proxies all the properties found on the data object, so `vm.a` will be equivalent to `vm.$data.a`. - Properties that start with `_` or `$` will **not** be proxied on the Vue instance because they may conflict with Vue's internal properties and API methods. You will have to access them as `vm.$data._property`. + Properties that start with `_` or `$` will **not** be proxied on the component instance because they may conflict with Vue's internal properties and API methods. You will have to access them as `vm.$data._property`. - **Example:** @@ -20,7 +20,7 @@ // direct instance creation const data = { a: 1 } - // The object is added to a Vue instance + // The object is added to a component instance const vm = Vue.createApp({ data() { return data @@ -92,7 +92,7 @@ - **Details:** - Computed properties to be mixed into the Vue instance. All getters and setters have their `this` context automatically bound to the Vue instance. + Computed properties to be mixed into the Vcomponent instance. All getters and setters have their `this` context automatically bound to the component instance. Note that if you use an arrow function with a computed property, `this` won't be the component's instance, but you can still access the instance as the function's first argument: @@ -143,10 +143,10 @@ - **Details:** - Methods to be mixed into the Vue instance. You can access these methods directly on the VM instance, or use them in directive expressions. All methods will have their `this` context automatically bound to the Vue instance. + Methods to be mixed into the component instance. You can access these methods directly on the VM instance, or use them in directive expressions. All methods will have their `this` context automatically bound to the component instance. :::tip Note - Note that **you should not use an arrow function to define a method** (e.g. `plus: () => this.a++`). The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect and `this.a` will be undefined. + Note that **you should not use an arrow function to define a method** (e.g. `plus: () => this.a++`). The reason is arrow functions bind the parent context, so `this` will not be the component instance as you expect and `this.a` will be undefined. ::: - **Example:** @@ -177,7 +177,7 @@ - **Details:** - An object where keys are expressions to watch and values are the corresponding callbacks. The value can also be a string of a method name, or an Object that contains additional options. The Vue instance will call `$watch()` for each entry in the object at instantiation. + An object where keys are expressions to watch and values are the corresponding callbacks. The value can also be a string of a method name, or an Object that contains additional options. The component instance will call `$watch()` for each entry in the object at instantiation. - **Example:** @@ -244,7 +244,7 @@ ``` ::: tip Note - Note that _you should not use an arrow function to define a watcher_ (e.g. `searchQuery: newValue => this.updateAutocomplete(newValue)`). The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect and `this.updateAutocomplete` will be undefined. + Note that _you should not use an arrow function to define a watcher_ (e.g. `searchQuery: newValue => this.updateAutocomplete(newValue)`). The reason is arrow functions bind the parent context, so `this` will not be the component instance as you expect and `this.updateAutocomplete` will be undefined. ::: - **See also:** [Watchers](../guide/computed.html#watchers) @@ -290,10 +290,9 @@ } }) ``` - + ::: tip Note Events listed in the `emits` option **will not** be inherited by the root element of the component and also will be excluded from the `$attrs` property. ::: - -- **See also:** [Attribute Inheritance](../guide/component-props.html#non-prop-attributes) +* **See also:** [Attribute Inheritance](../guide/component-props.html#non-prop-attributes) diff --git a/src/api/options-dom.md b/src/api/options-dom.md index 6ed7ec7837..5aca0f1ab9 100644 --- a/src/api/options-dom.md +++ b/src/api/options-dom.md @@ -6,7 +6,7 @@ - **Details:** - A string template to be used as the markup for the Vue instance. The template will **replace** the mounted element. Any existing markup inside the mounted element will be ignored, unless content distribution slots are present in the template. + A string template to be used as the markup for the component instance. The template will **replace** the mounted element. Any existing markup inside the mounted element will be ignored, unless content distribution slots are present in the template. If the string starts with `#` it will be used as a `querySelector` and use the selected element's innerHTML as the template string. This allows the use of the common ` -Since components are reusable Vue instances, they accept the same options as a root instance, such as `data`, `computed`, `watch`, `methods`, and lifecycle hooks. The only exceptions are a few root-specific options like `el`. +Since components are reusable instances, they accept the same options as a root instance, such as `data`, `computed`, `watch`, `methods`, and lifecycle hooks. The only exceptions are a few root-specific options like `el`. ## Reusing Components @@ -86,7 +86,7 @@ app.component('my-component-name', { }) ``` -Globally registered components can be used in the template of `app` instance created afterwards - and even inside all subcomponents of that Vue instance's component tree. +Globally registered components can be used in the template of `app` instance created afterwards - and even inside all subcomponents of that root instance's component tree. That's all you need to know about registration for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Component Registration](component-registration.md). @@ -141,7 +141,7 @@ const App = { } } -const app = Vue.createApp() +const app = Vue.createApp({}) app.component('blog-post', { props: ['title'], @@ -220,7 +220,7 @@ The problem is, this button doesn't do anything: ``` -When we click on the button, we need to communicate to the parent that it should enlarge the text of all posts. Fortunately, Vue instances provide a custom events system to solve this problem. The parent can choose to listen to any event on the child component instance with `v-on` or `@`, just as we would with a native DOM event: +When we click on the button, we need to communicate to the parent that it should enlarge the text of all posts. Fortunately, component instances provide a custom events system to solve this problem. The parent can choose to listen to any event on the child component instance with `v-on` or `@`, just as we would with a native DOM event: ```html diff --git a/src/guide/component-provide-inject.md b/src/guide/component-provide-inject.md index 69f8daaa7a..b63451a490 100644 --- a/src/guide/component-provide-inject.md +++ b/src/guide/component-provide-inject.md @@ -49,7 +49,7 @@ app.component('todo-list-statistics', { }) ``` -However, this won't work if we try to provide some Vue instance property here: +However, this won't work if we try to provide some component instance property here: ```js app.component('todo-list', { @@ -67,7 +67,7 @@ app.component('todo-list', { }) ``` -To access Vue instance properties, we need to convert `provide` to be a function returning an object +To access component instance properties, we need to convert `provide` to be a function returning an object ```js app.component('todo-list', { diff --git a/src/guide/component-registration.md b/src/guide/component-registration.md index 8d21768f4e..cef7d22d87 100644 --- a/src/guide/component-registration.md +++ b/src/guide/component-registration.md @@ -7,7 +7,7 @@ When registering a component, it will always be given a name. For example, in the global registration we've seen so far: ```js -const app = createApp({...}) +const app = Vue.createApp({...}) app.component('my-component-name', { /* ... */ @@ -51,7 +51,7 @@ When defining a component with PascalCase, you can use either case when referenc ## Global Registration -So far, we've only created components using `Vue.component`: +So far, we've only created components using `app.component`: ```js Vue.createApp({...}).component('my-component-name', { @@ -59,7 +59,7 @@ Vue.createApp({...}).component('my-component-name', { }) ``` -These components are **globally registered**. That means they can be used in the template of any root Vue instance created after registration. For example: +These components are **globally registered** for the application. That means they can be used in the template of any component instance within this application: ```js const app = Vue.createApp({}) diff --git a/src/guide/composition-api-setup.md b/src/guide/composition-api-setup.md index f24080cc72..775141589f 100644 --- a/src/guide/composition-api-setup.md +++ b/src/guide/composition-api-setup.md @@ -148,4 +148,4 @@ export default { ## Usage of `this` -**Inside `setup()`, `this` won't be a reference to Vue instance** Since `setup()` is called before other component options are resolved, `this` inside `setup()` will behave quite differently from `this` in other options. This might cause confusions when using `setup()` along other Options API. +**Inside `setup()`, `this` won't be a reference to the current active instance** Since `setup()` is called before other component options are resolved, `this` inside `setup()` will behave quite differently from `this` in other options. This might cause confusions when using `setup()` along other Options API. diff --git a/src/guide/computed.md b/src/guide/computed.md index 150717bcff..15b4f56173 100644 --- a/src/guide/computed.md +++ b/src/guide/computed.md @@ -210,7 +210,7 @@ In addition to the `watch` option, you can also use the imperative [vm.\$watch A ### Computed vs Watched Property -Vue does provide a more generic way to observe and react to data changes on a Vue instance: **watch properties**. When you have some data that needs to change based on some other data, it is tempting to overuse `watch` - especially if you are coming from an AngularJS background. However, it is often a better idea to use a computed property rather than an imperative `watch` callback. Consider this example: +Vue does provide a more generic way to observe and react to data changes on a current active instance: **watch properties**. When you have some data that needs to change based on some other data, it is tempting to overuse `watch` - especially if you are coming from an AngularJS background. However, it is often a better idea to use a computed property rather than an imperative `watch` callback. Consider this example: ```html
{{ fullName }}
diff --git a/src/guide/events.md b/src/guide/events.md index 46c75c1180..f4b30fa246 100644 --- a/src/guide/events.md +++ b/src/guide/events.md @@ -56,7 +56,7 @@ Vue.createApp({ }, methods: { greet(event) { - // `this` inside methods points to the Vue instance + // `this` inside methods points to the current active instance alert('Hello ' + this.name + '!') // `event` is the native DOM event if (event) { diff --git a/src/guide/forms.md b/src/guide/forms.md index 1fd035177e..a4531a6178 100644 --- a/src/guide/forms.md +++ b/src/guide/forms.md @@ -5,7 +5,7 @@ You can use the `v-model` directive to create two-way data bindings on form input, textarea, and select elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, `v-model` is essentially syntax sugar for updating data on user input events, plus special care for some edge cases. ::: tip Note -`v-model` will ignore the initial `value`, `checked` or `selected` attributes found on any form elements. It will always treat the Vue instance data as the source of truth. You should declare the initial value on the JavaScript side, inside the `data` option of your component. +`v-model` will ignore the initial `value`, `checked` or `selected` attributes found on any form elements. It will always treat the current active instance data as the source of truth. You should declare the initial value on the JavaScript side, inside the `data` option of your component. ::: `v-model` internally uses different properties and emits different events for different input elements: @@ -246,7 +246,7 @@ For radio, checkbox and select options, the `v-model` binding values are usually ``` -But sometimes we may want to bind the value to a dynamic property on the Vue instance. We can use `v-bind` to achieve that. In addition, using `v-bind` allows us to bind the input value to non-string values. +But sometimes we may want to bind the value to a dynamic property on the current active instance. We can use `v-bind` to achieve that. In addition, using `v-bind` allows us to bind the input value to non-string values. ### Checkbox diff --git a/src/guide/instance.md b/src/guide/instance.md index 49061f701c..fcdf03da31 100644 --- a/src/guide/instance.md +++ b/src/guide/instance.md @@ -1,24 +1,24 @@ -# The Vue Instance +# The Application Instance -## Creating a Vue Instance +## Creating an Instance -Every Vue application starts by creating a new **Vue instance** with the `createApp` function: +Every Vue application starts by creating a new **application instance** with the `createApp` function: ```js Vue.createApp(/* options */) ``` -After the Vue instance is created, we can _mount_ it, passing a container to `mount` method. For example, if we want to mount a Vue application on `
`, we should pass `#app`: +After the instance is created, we can _mount_ it, passing a container to `mount` method. For example, if we want to mount a Vue application on `
`, we should pass `#app`: ```js Vue.createApp(/* options */).mount('#app') ``` -Although not strictly associated with the [MVVM pattern](https://en.wikipedia.org/wiki/Model_View_ViewModel), Vue's design was partly inspired by it. As a convention, we often use the variable `vm` (short for ViewModel) to refer to our Vue instance. +Although not strictly associated with the [MVVM pattern](https://en.wikipedia.org/wiki/Model_View_ViewModel), Vue's design was partly inspired by it. As a convention, we often use the variable `vm` (short for ViewModel) to refer to our instance. -When you create a Vue instance, you pass in an **options object**. The majority of this guide describes how you can use these options to create your desired behavior. For reference, you can also browse the full list of options in the [API reference](../api/options-data.html). +When you create an instance, you pass in an **options object**. The majority of this guide describes how you can use these options to create your desired behavior. For reference, you can also browse the full list of options in the [API reference](../api/options-data.html). -A Vue application consists of a **root Vue instance** created with `createApp`, optionally organized into a tree of nested, reusable components. For example, a todo app's component tree might look like this: +A Vue application consists of a **root instance** created with `createApp`, optionally organized into a tree of nested, reusable components. For example, a `todo` app's component tree might look like this: ``` Root Instance @@ -31,17 +31,17 @@ Root Instance └─ TodoListStatistics ``` -We'll talk about [the component system](component-basics.html) in detail later. For now, just know that all Vue components are also Vue instances, and so accept the same options object (except for a few root-specific options). +We'll talk about [the component system](component-basics.html) in detail later. For now, just know that all Vue components are also instances, and so accept the same options object. ## Data and Methods -When a Vue instance is created, it adds all the properties found in its `data` to [Vue's **reactivity system**](reactivity.html). When the values of those properties change, the view will "react", updating to match the new values. +When an instance is created, it adds all the properties found in its `data` to [Vue's **reactivity system**](reactivity.html). When the values of those properties change, the view will "react", updating to match the new values. ```js // Our data object const data = { a: 1 } -// The object is added to a Vue instance +// The object is added to the root instance const vm = Vue.createApp({ data() { return data @@ -102,7 +102,7 @@ const vm = Vue.createApp({ ``` -In addition to data properties, Vue instances expose a number of useful instance properties and methods. These are prefixed with `$` to differentiate them from user-defined properties. For example: +In addition to data properties, instances expose a number of useful instance properties and methods. These are prefixed with `$` to differentiate them from user-defined properties. For example: ```js const vm = Vue.createApp({ @@ -120,7 +120,7 @@ In the future, you can consult the [API reference](../api/instance-properties.ht ## Instance Lifecycle Hooks -Each Vue instance goes through a series of initialization steps when it's created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called **lifecycle hooks**, giving users the opportunity to add their own code at specific stages. +Each instance goes through a series of initialization steps when it's created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called **lifecycle hooks**, giving users the opportunity to add their own code at specific stages. For example, the [created](../api/options-lifecycle-hooks.html#created) hook can be used to run code after an instance is created: @@ -138,7 +138,7 @@ Vue.createApp({ }) ``` -There are also other hooks which will be called at different stages of the instance's lifecycle, such as [mounted](../api/options-lifecycle-hooks.html#mounted), [updated](../api/options-lifecycle-hooks.html#updated), and [unmounted](../api/options-lifecycle-hooks.html#unmounted). All lifecycle hooks are called with their `this` context pointing to the Vue instance invoking it. +There are also other hooks which will be called at different stages of the instance's lifecycle, such as [mounted](../api/options-lifecycle-hooks.html#mounted), [updated](../api/options-lifecycle-hooks.html#updated), and [unmounted](../api/options-lifecycle-hooks.html#unmounted). All lifecycle hooks are called with their `this` context pointing to the current active instance invoking it. ::: tip Don't use [arrow functions](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) on an options property or callback, such as `created: () => console.log(this.a)` or `vm.$watch('a', newValue => this.myMethod())`. Since an arrow function doesn't have a `this`, `this` will be treated as any other variable and lexically looked up through parent scopes until found, often resulting in errors such as `Uncaught TypeError: Cannot read property of undefined` or `Uncaught TypeError: this.myMethod is not a function`. @@ -148,4 +148,4 @@ Don't use [arrow functions](https://developer.mozilla.org/en/docs/Web/JavaScript Below is a diagram for the instance lifecycle. You don't need to fully understand everything going on right now, but as you learn and build more, it will be a useful reference. -Vue instance lifecycle +Instance lifecycle hooks diff --git a/src/guide/introduction.md b/src/guide/introduction.md index b5581fc363..708b85f5a6 100644 --- a/src/guide/introduction.md +++ b/src/guide/introduction.md @@ -35,7 +35,7 @@ At the core of Vue.js is a system that enables us to declaratively render data t ``` ```js -const CounterApp = { +const Counter = { data() { return { counter: 0 @@ -43,7 +43,7 @@ const CounterApp = { } } -Vue.createApp(CounterApp).mount('#counter') +Vue.createApp(Counter).mount('#counter') ``` We have already created our very first Vue app! This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now **reactive**. How do we know? Take a look at the example below where `counter` property increments every second and you will see how rendered DOM changes: @@ -77,7 +77,7 @@ In addition to text interpolation, we can also bind element attributes like this ``` ```js -const AttributeBindingApp = { +const AttributeBinding = { data() { return { message: 'You loaded this page on ' + new Date().toLocaleString() @@ -85,7 +85,7 @@ const AttributeBindingApp = { } } -Vue.createApp(AttributeBindingApp).mount('#bind-attribute') +Vue.createApp(AttributeBinding).mount('#bind-attribute') ```

@@ -95,11 +95,11 @@ Vue.createApp(AttributeBindingApp).mount('#bind-attribute')

-Here we're encountering something new. The `v-bind` attribute you're seeing is called a **directive**. Directives are prefixed with `v-` to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here we are basically saying "_keep this element's `title` attribute up-to-date with the `message` property on the Vue instance._" +Here we're encountering something new. The `v-bind` attribute you're seeing is called a **directive**. Directives are prefixed with `v-` to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here we are basically saying "_keep this element's `title` attribute up-to-date with the `message` property on the current active instance._" ## Handling User Input -To let users interact with your app, we can use the `v-on` directive to attach event listeners that invoke methods on our Vue instances: +To let users interact with your app, we can use the `v-on` directive to attach event listeners that invoke methods on our instances: ```html
@@ -109,7 +109,7 @@ To let users interact with your app, we can use the `v-on` directive to attach e ``` ```js -const EventHandlingApp = { +const EventHandling = { data() { return { message: 'Hello Vue.js!' @@ -125,7 +125,7 @@ const EventHandlingApp = { } } -Vue.createApp(EventHandlingApp).mount('#event-handling') +Vue.createApp(EventHandling).mount('#event-handling') ```

@@ -147,7 +147,7 @@ Vue also provides the `v-model` directive that makes two-way binding between for ``` ```js -const TwoWayBindingApp = { +const TwoWayBinding = { data() { return { message: 'Hello Vue!' @@ -155,7 +155,7 @@ const TwoWayBindingApp = { } } -Vue.createApp(TwoWayBindingApp).mount('#two-way-binding') +Vue.createApp(TwoWayBinding).mount('#two-way-binding') ```

@@ -176,7 +176,7 @@ It's easy to toggle the presence of an element, too: ``` ```js -const ConditionalRenderingApp = { +const ConditionalRendering = { data() { return { seen: true @@ -184,7 +184,7 @@ const ConditionalRenderingApp = { } } -Vue.createApp(ConditionalRenderingApp).mount('#conditional-rendering') +Vue.createApp(ConditionalRendering).mount('#conditional-rendering') ``` This example demonstrates that we can bind data to not only text and attributes, but also the **structure** of the DOM. Moreover, Vue also provides a powerful transition effect system that can automatically apply [transition effects](TODO) when elements are inserted/updated/removed by Vue. @@ -211,7 +211,7 @@ There are quite a few other directives, each with its own special functionality. ``` ```js -const ListRenderingApp = { +const ListRendering = { data() { return { todos: [ @@ -223,7 +223,7 @@ const ListRenderingApp = { } } -Vue.createApp(ListRenderingApp).mount('#list-rendering') +Vue.createApp(ListRendering).mount('#list-rendering') ```

@@ -239,7 +239,7 @@ The component system is another important concept in Vue, because it's an abstra ![Component Tree](/images/components.png) -In Vue, a component is essentially a Vue 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 `App` objects and we define it in parent's `components` option: ```js // Create Vue application @@ -275,7 +275,7 @@ app.component('todo-item', { Now we can pass the todo into each repeated component using `v-bind`: ```html -

+
    @@ -123,7 +123,7 @@ in the "Dynamic Argument Expression Constraints" section below. ... ``` -Here `attributeName` will be dynamically evaluated as a JavaScript expression, and its evaluated value will be used as the final value for the argument. For example, if your Vue instance has a data property, `attributeName`, whose value is `"href"`, then this binding will be equivalent to `v-bind:href`. +Here `attributeName` will be dynamically evaluated as a JavaScript expression, and its evaluated value will be used as the final value for the argument. For example, if your application instance has a data property, `attributeName`, whose value is `"href"`, then this binding will be equivalent to `v-bind:href`. Similarly, you can use dynamic arguments to bind a handler to a dynamic event name: diff --git a/src/guide/transitions-state.md b/src/guide/transitions-state.md index 0e62c048bc..abcf4de3be 100644 --- a/src/guide/transitions-state.md +++ b/src/guide/transitions-state.md @@ -67,7 +67,7 @@ As with Vue's transition components, the data backing state transitions can be u ## Organizing Transitions into Components -Managing many state transitions can quickly increase the complexity of a Vue instance or component. Fortunately, many animations can be extracted out into dedicated child components. Let's do this with the animated integer from our earlier example: +Managing many state transitions can quickly increase the complexity of a component instance. Fortunately, many animations can be extracted out into dedicated child components. Let's do this with the animated integer from our earlier example: ```html