From 1b6266471fb10289b99042d7ac9609d30ee0b19a Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Tue, 28 Jul 2020 18:07:16 +0300 Subject: [PATCH 1/5] fix: fixed names for createApp parameters --- src/guide/class-and-style.md | 4 ++-- src/guide/component-basics.md | 2 +- src/guide/component-registration.md | 2 +- src/guide/introduction.md | 32 ++++++++++++++--------------- src/guide/migration/global-api.md | 12 +++++------ src/guide/plugins.md | 29 ++++++++++++++------------ src/guide/routing.md | 10 ++++----- 7 files changed, 47 insertions(+), 44 deletions(-) diff --git a/src/guide/class-and-style.md b/src/guide/class-and-style.md index 1bb5c4f2fa..0bc9293360 100644 --- a/src/guide/class-and-style.md +++ b/src/guide/class-and-style.md @@ -128,7 +128,7 @@ When you use the `class` attribute on a custom component with a single root elem For example, if you declare this component: ```js -const app = Vue.createApp() +const app = Vue.createApp({}) app.component('my-component', { template: `

Hi!

` @@ -170,7 +170,7 @@ If your component has multiple root elements, you would need to define which com ``` ```js -const app = Vue.createApp() +const app = Vue.createApp({}) app.component('my-component', { template: ` diff --git a/src/guide/component-basics.md b/src/guide/component-basics.md index 664e060b79..df6d55ca8a 100644 --- a/src/guide/component-basics.md +++ b/src/guide/component-basics.md @@ -141,7 +141,7 @@ const App = { } } -const app = Vue.createApp() +const app = Vue.createApp({}) app.component('blog-post', { props: ['title'], diff --git a/src/guide/component-registration.md b/src/guide/component-registration.md index 8d21768f4e..e3d3d33a88 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', { /* ... */ diff --git a/src/guide/introduction.md b/src/guide/introduction.md index 301eb4640c..7a91d942ef 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 HelloVueApp = { +const HelloVue = { data() { return { message: 'Hello Vue!' @@ -43,7 +43,7 @@ const HelloVueApp = { } } -Vue.createApp(HelloVueApp).mount('#hello-vue') +Vue.createApp(HelloVue).mount('#hello-vue') ``` 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? Change the `message` property in the code snippet below to a different value and the rendered example will update accordingly: @@ -67,7 +67,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() @@ -75,7 +75,7 @@ const AttributeBindingApp = { } } -Vue.createApp(AttributeBindingApp).mount('#bind-attribute') +Vue.createApp(AttributeBinding).mount('#bind-attribute') ```

@@ -99,7 +99,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!' @@ -115,7 +115,7 @@ const EventHandlingApp = { } } -Vue.createApp(EventHandlingApp).mount('#event-handling') +Vue.createApp(EventHandling).mount('#event-handling') ```

@@ -137,7 +137,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!' @@ -145,7 +145,7 @@ const TwoWayBindingApp = { } } -Vue.createApp(TwoWayBindingApp).mount('#two-way-binding') +Vue.createApp(TwoWayBinding).mount('#two-way-binding') ```

@@ -166,7 +166,7 @@ It's easy to toggle the presence of an element, too: ``` ```js -const ConditionalRenderingApp = { +const ConditionalRendering = { data() { return { seen: true @@ -174,7 +174,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. @@ -201,7 +201,7 @@ There are quite a few other directives, each with its own special functionality. ``` ```js -const ListRenderingApp = { +const ListRendering = { data() { return { todos: [ @@ -213,7 +213,7 @@ const ListRenderingApp = { } } -Vue.createApp(ListRenderingApp).mount('#list-rendering') +Vue.createApp(ListRendering).mount('#list-rendering') ```

@@ -265,7 +265,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