From fe4bddc0b1780eadead8303a7a78fd387f5d4575 Mon Sep 17 00:00:00 2001 From: scientist27 <63222497+scientist27@users.noreply.github.com> Date: Sun, 12 Dec 2021 15:49:33 +0530 Subject: [PATCH 1/5] Fixed grammatical error in theme-data.js In the Flatlogic description, the phrase "how real applications is built" is grammatically incorrect since "applications" is a plural noun but "is" refers to a singular noun. I changed it to "how real applications are built." In the PrimeVue description, the phrase "look&feel" (which lacked spaces between the words and punctuation) has been changed to "look & feel". --- src/.vuepress/components/community/themes/theme-data.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/.vuepress/components/community/themes/theme-data.js b/src/.vuepress/components/community/themes/theme-data.js index 4604a5ea2e..81fa80feef 100644 --- a/src/.vuepress/components/community/themes/theme-data.js +++ b/src/.vuepress/components/community/themes/theme-data.js @@ -127,7 +127,7 @@ export default [ }, { name: 'PrimeVue', - description: `The open-source UI component library [PrimeVue](https://www.primefaces.org/primevue/#/?af_id=4218) offers over 80 flexible components to build your apps with! They have a ton of different component themes and Vue-CLI application templates available to get the look&feel that suits you best.`, + description: `The open-source UI component library [PrimeVue](https://www.primefaces.org/primevue/#/?af_id=4218) offers over 80 flexible components to build your apps with! They have a ton of different component themes and Vue-CLI application templates available to get the look & feel that suits you best.`, seeMoreUrl: 'https://www.primefaces.org/primevue/#/?af_id=4218', products: [ { @@ -218,7 +218,7 @@ export default [ }, { name: 'Flatlogic', - description: `Check the admin dashboards templates built by our partners from [Flatlogic](https://flatlogic.com/templates?ref=x-fdkuTAVW). With these themes you can see how real applications is built. Additionally these templates will help you to start a new application and save you time and money.`, + description: `Check the admin dashboard templates built by our partners from [Flatlogic](https://flatlogic.com/templates?ref=x-fdkuTAVW). With these themes you can see how real applications are built. Additionally, these templates will help you to start a new application and save you time and money.`, seeMoreUrl: 'https://flatlogic.com/templates?ref=x-fdkuTAVW', products: [ { From 031c2c8e4050caa45289e64b90ac33a69eef36e2 Mon Sep 17 00:00:00 2001 From: scientist27 <63222497+scientist27@users.noreply.github.com> Date: Sun, 12 Dec 2021 15:53:48 +0530 Subject: [PATCH 2/5] Update theme-data.js In the Flatlogic description, "Check the admin dashboard templates" has been changed to "Check out the admin dashboard templates." --- src/.vuepress/components/community/themes/theme-data.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/.vuepress/components/community/themes/theme-data.js b/src/.vuepress/components/community/themes/theme-data.js index 81fa80feef..7e0d9ffc1b 100644 --- a/src/.vuepress/components/community/themes/theme-data.js +++ b/src/.vuepress/components/community/themes/theme-data.js @@ -218,7 +218,7 @@ export default [ }, { name: 'Flatlogic', - description: `Check the admin dashboard templates built by our partners from [Flatlogic](https://flatlogic.com/templates?ref=x-fdkuTAVW). With these themes you can see how real applications are built. Additionally, these templates will help you to start a new application and save you time and money.`, + description: `Check out the admin dashboard templates built by our partners from [Flatlogic](https://flatlogic.com/templates?ref=x-fdkuTAVW). With these themes you can see how real applications are built. Additionally, these templates will help you to start a new application and save you time and money.`, seeMoreUrl: 'https://flatlogic.com/templates?ref=x-fdkuTAVW', products: [ { From e41323b46ee895053aee0c532f5ac47670745d5a Mon Sep 17 00:00:00 2001 From: scientist27 <63222497+scientist27@users.noreply.github.com> Date: Thu, 23 Dec 2021 14:48:30 +0530 Subject: [PATCH 3/5] Fix grammar and introduce the component method --- src/guide/introduction.md | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/src/guide/introduction.md b/src/guide/introduction.md index 93cef89efb..f40dc9105b 100644 --- a/src/guide/introduction.md +++ b/src/guide/introduction.md @@ -52,7 +52,7 @@ const 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: +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 the `counter` property increments every second and you will see how the rendered DOM changes: ```js{8-10} const Counter = { @@ -158,7 +158,7 @@ Vue.createApp(TwoWayBinding).mount('#two-way-binding') ## Conditionals and Loops -It's easy to toggle the presence of an element, too: +It's easy to toggle the presence of an element too: ```html
@@ -220,7 +220,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 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 = { @@ -239,6 +239,20 @@ const app = Vue.createApp({ app.mount(...) ``` +Another way to register a component is to use the `component()` method on the `app` object, passing in the name of the component as the first attribute and an options object as the second: + +```js +const app = Vue.createApp({ + ... // Properties for the component +}) + +app.component('todo-item', { + template: `
  • This is a todo
    • ` +}) + +app.mount() +``` + Now you can compose it in another component's template: ```html From fc2b3c815684ee637d5297054dac8377cb4a876b Mon Sep 17 00:00:00 2001 From: scientist27 <63222497+scientist27@users.noreply.github.com> Date: Thu, 23 Dec 2021 15:17:23 +0530 Subject: [PATCH 4/5] Add missing 'a' --- src/guide/introduction.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/introduction.md b/src/guide/introduction.md index f40dc9105b..c8f35f64de 100644 --- a/src/guide/introduction.md +++ b/src/guide/introduction.md @@ -316,7 +316,7 @@ 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: From 3270c230530b48ace9c1fefe6af0d0ba28cac4a9 Mon Sep 17 00:00:00 2001 From: scientist27 <63222497+scientist27@users.noreply.github.com> Date: Fri, 24 Dec 2021 14:19:45 +0530 Subject: [PATCH 5/5] Update introduction to include reviewer's changes Removed all use of the app.component() method from the introduction so as to not confuse readers. --- src/guide/introduction.md | 31 ++++++++++--------------------- 1 file changed, 10 insertions(+), 21 deletions(-) diff --git a/src/guide/introduction.md b/src/guide/introduction.md index c8f35f64de..301adefe22 100644 --- a/src/guide/introduction.md +++ b/src/guide/introduction.md @@ -239,20 +239,6 @@ const app = Vue.createApp({ app.mount(...) ``` -Another way to register a component is to use the `component()` method on the `app` object, passing in the name of the component as the first attribute and an options object as the second: - -```js -const app = Vue.createApp({ - ... // Properties for the component -}) - -app.component('todo-item', { - template: `
  • This is a todo
    • ` -}) - -app.mount() -``` - Now you can compose it in another component's template: ```html @@ -265,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`: @@ -292,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 { @@ -301,16 +292,14 @@ 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') ```