review module 1

1-vue-getting-started/0-introduction.md

@@ -1,4 +1,4 @@
-**Vue.js** (or Vue) was created by Evan You and first released in February 2014. His objective in developing Vue was to create a progressive, lightweight version of JavaScript. It was designed to allow developers to create a user interface by adding a set of custom HTML attributes that connect software components with data. To accomplish this, Vue.js interprets the HTML attributes as **directives** that bind input or output parts of the page to a model that is represented by standard JavaScript variables. You can easily add the Vue core library to any page and immediately start creating dynamic HTML markup with powerful data binding and event handling features.
+**Vue.js** (or Vue) was created by Evan You and first released in February 2014. His objective in developing Vue, was to create a progressive, lightweight version of JavaScript. It was designed to allow developers to create a user interface, by adding a set of custom HTML attributes that connect software components with data. To accomplish this, Vue.js interprets the HTML attributes as **directives** that bind input or output parts of the page to a model that is represented by standard JavaScript variables. You can easily add the Vue core library to any page and immediately start creating dynamic HTML markup with powerful data binding and event handling features.
 
 Upon completing this training module, you will understand the Vue.js framework and create a functional application.
 

1-vue-getting-started/1-creating-an-app.md

@@ -1,8 +1,8 @@
-To start using Vue.js we need to install the framework, create a Vue app, and then register it on the page (tell the page how to use the app). Let's see how this is done.
+To start using Vue.js, we need to install the framework, create a Vue app, and then register it on the page (tell the page how to use the app). Let's see how this is done.
 
 ## Adding Vue.js to a page
 
-There are a few different ways of adding Vue.js to an application. In this module we will explore how you can implement Vue by adding a `script` element to import Vue from a content delivery network (or CDN). By using a CDN it's possible to add Vue to existing applications without having to completely rewrite them.
+There are a few different ways of adding Vue.js to an application. In this module, we will explore how you can implement Vue by adding a `script` element to import Vue from a content delivery network (or CDN). By using a CDN, it's possible to add Vue to existing applications without having to completely rewrite them.
 
 To add Vue to a page by using the CDN, you add the following `script` element to your page.
 
@@ -14,7 +14,7 @@ This will tell the browser to run the script file referenced in the `src` direct
 
 ## Creating an app
 
-All Vue.js applications begin with creating an app object. The app is the central location for any data and methods your application will use. While the app object follows certain conventions, at its core it is just a JavaScript object. We then make it a Vue app by calling `createApp`.
+All Vue.js applications begin with creating an app object. The app is the central location for any data and methods your application will use. While the app object follows certain conventions, at its core, it's a JavaScript object. To create a Vue app, invoke the method `createApp()`.
 
 ```javascript
 const App = Vue.createApp({
@@ -24,11 +24,16 @@ const App = Vue.createApp({
 
 ## Adding data
 
-The first method, and the one we'll focus on in this module, added to most app objects is `data()`. `data()` is used by Vue.js to access any information you need to make available to your application. `data()` will return a JavaScript object.
+You've seen so far how you can create a Vue.js application by calling the `createApp()` method. You can add various properties to it to give your app more functionality. An important method, that most apps have, is `data()`. It's used by Vue.js to access any information you need to make available to your application.
 
-Any of the properties inside the object returned by `data()` are dynamic. If the values change, Vue.js will automatically detect those updates and refresh the appropriate portions of the display as needed with the updated information.
+> [!NOTE ]
+> You'll focus on using this method throughout this module.
 
-The object itself can be named whatever you like; we will use the name `App` in this example.
+Any of the properties inside the object returned by `data()`, are dynamic. If the values change, Vue.js will automatically detect those updates and refresh the appropriate portions of the display as needed with the updated information.
+
+### Creating a data object
+
+The `data()` method will be invoked by Vue.js itself and Vue.js expects the method to return a JavaScript object. Here's an example where an object is returned containing the properties `firstName` and `lastName`.
 
 ```javascript
 // a sample app object
@@ -42,9 +47,11 @@ const App = Vue.createApp({
 });
 ```
 
+At this point, the data is now exposed so that it can be displayed for the user, more on that later.
+
 ## Mounting the app
 
-In order for Vue.js to use the created app object it must be mounted. By mounting the app you are telling Vue.js the portion of the page it controls, allowing it to display information or even HTML. To mount the application you reference the `id` of an ordinary HTML element.
+In order for Vue.js to use the created app object, it must be _mounted_. By mounting the app, you're telling Vue.js the portion of the page it controls, allowing it to display information or even HTML. To mount the application you reference the `id` of an ordinary HTML element.
 
 ```html
 <!-- the HTML element which will host our app -->
@@ -66,11 +73,13 @@ In order for Vue.js to use the created app object it must be mounted. By mountin
 </script>
 ```
 
+At runtime, the element with id `app` will now have its content replaced with that of the Vue.js application.
+
 ## Displaying data
 
-To display data on the page you use the `{{ }}` syntax, sometimes called **handlebars**. Inside `{{ }}` you can provide whatever JavaScript code is necessary to access the information you wish to display.
+To display data on the page you use the `{{ }}` syntax, sometimes called **handlebars**. Inside `{{ }}`, you can provide whatever JavaScript code is necessary to access the information you wish to display.
 
-You will notice we created a `data()` function earlier which returns an object. Vue.js will automatically make the object available, so there is no need to call `data()`. If you wish to display the `firstName` from before you can use the syntax `{{ firstName }}`. You can see the full application below, which can display `lastName` and `firstName`.
+You'll notice you created a `data()` function earlier, which returns an object. Vue.js will automatically make the object available, so there is no need to call `data()`. If you wish to display the `firstName` from before, you can use the syntax `{{ firstName }}`. You can see the full application below, which can display `lastName` and `firstName`.
 
 ```html
 <!-- the HTML element which will host our app -->

1-vue-getting-started/2-exercise-create-an-app.md

@@ -1,4 +1,4 @@
-In this section you will create a starter Vue application using an HTML file that is linked to the Vue core library and an external JavaScript file that contains the application details. You will also define one Vue data variable and display it dynamically within the HTML page.
+In this section, you'll create a starter Vue application using an HTML file that is linked to the Vue core library and an external JavaScript file that contains the application details. You'll also define one Vue data variable and display it dynamically within the HTML page.
 
 ## Clone the starter repository
 
@@ -14,7 +14,7 @@ We have provided a starter site for the application which includes images and a
 
 ## Link to the Vue core library in your HTML file
 
-We will install Vue.js from the CDN.
+You'll install Vue.js from the CDN.
 
 1. Inside Visual Studio Code, open **index.html**
 1. Install Vue.js by linking to the Vue core library, paste the following script tag into your starter **index.html** file below the comment that reads `TODO: Import Vue.js core library`.
@@ -26,7 +26,7 @@ We will install Vue.js from the CDN.
 
 ## Create a separate JavaScript file for your Vue application
 
-While we can start writing Vue script inside our HTML file if we want, but it is typically cleaner to manage our application if we place the code into a separate JavaScript file.
+You can start writing Vue script inside your HTML file if you want, but it's typically cleaner to manage your application if you place the code in a separate JavaScript file.
 
 1. Create a new file named **index.js**
 1. Add the following code to **index.js** to create the app
@@ -43,11 +43,11 @@ While we can start writing Vue script inside our HTML file if we want, but it is
     });
     ```
 
-    The `createApp()` function is available to us because we imported the Vue.js library into the `<head>` tag of our HTML page. We then pass an argument for this function as an object with a `data` property. This object returns another object that we will use to store our data.
+    The `createApp()` function is available to you because you imported the Vue.js library into the `<head>` tag of your HTML page. You then pass an argument for this function as an object with a `data` property. This object returns another object that you will use to store your data.
 
 ## Import and mount the application
 
-With our JavaScript file created, we can now import and mount the application.
+With your JavaScript file created, you can now import and mount the application.
 
 1. Return to **index.html**
 1. Below the comment which reads `TODO: Import Vue app` add the following:
@@ -61,7 +61,7 @@ With our JavaScript file created, we can now import and mount the application.
 
 ## Use the Vue application
 
-With our Vue application created and imported, we can now create the display for the information.
+With your Vue application created and imported, you can now create the display for the information.
 
 1. Inside **index.html**, below the comment which reads `TODO: Add information display` add the following HTML:
 
@@ -73,14 +73,14 @@ With our Vue application created and imported, we can now create the display for
     ```
 
 > [!IMPORTANT]
-> IMPORTANT: Note that page execution order is important in VueJS processing. We cannot attach our application to the DOM until the HTML page is fully loaded. Therefore, we import the Vue application at the bottom of the page after all other HTML elements have been loaded into the browser. It is generally a good idea to let the HTML page load before calling an external script file that is intended to change the content or structure of the DOM.
+> IMPORTANT: Note that page execution order is important in Vue.js processing. You cannot attach your application to the DOM, until the HTML page is fully loaded. Therefore, you import the Vue application at the bottom of the page after all other HTML elements have been loaded into the browser. It's generally a good idea to let the HTML page load, before calling an external script file, that is intended to change the content or structure of the DOM.
 
 ## Launch the page with Live Server
 
-The [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) extension for Visual Studio Code creates a development web server which will automatically refresh the page as changes are detected. After installing the extension (by clicking on the link if you haven't already), we can use it to host our page.
+The [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) extension for Visual Studio Code creates a development web server which will automatically refresh the page as changes are detected. After installing the extension (by clicking on the link if you haven't already), you can use it to host your page.
 
 1. Save all files
-1. Open the command palate in Visual Studio Code by hitting **Ctl-Shift-P** (or **Cmd-Shift-P** on a Mac)
+1. Open the command palette in Visual Studio Code by hitting **Ctl-Shift-P** (or **Cmd-Shift-P** on a Mac)
 1. Type **Live Server: Open with Live Server**
 
     A dialog will open in the bottom right saying your page is now being hosted on [http://localhost:5500](http://localhost:5500).

1-vue-getting-started/3-attribute-binding.md

@@ -1,4 +1,4 @@
-We explored how you can display data on a page through the use of handlebars (`{{}}`). However text on the page is not the only part we may need to make dynamic. A large part of the values we set on a page are done through attributes. Fortunately, Vue.js allows you to bind to attributes through directives.
+You explored how you can display data on a page through the use of handlebars (`{{}}`). However, text on the page is not the only part you may need to make dynamic. A large part of the values you set on a page, are done through attributes. Fortunately, Vue.js allows you to bind to attributes through directives.
 
 ## Directives
 
@@ -8,7 +8,7 @@ Directives are attributes recognized by Vue.js, and allow you to dynamically set
 
 The core directive is `v-bind`, which allows you to bind a data value to an attribute. This could be used to dynamically set the name of a class, the source for an image, or a style.
 
-To use `v-bind`, you place it in front of the attribute you wish to set with a `:`. So to set the `src` attribute for an image you would use `v-bind:src="value"`. The attribute value is then evaluated much in the same way as you would use `{{ }}`.
+To use `v-bind`, you place it in front of the attribute you wish to set with a `:`. So to set the `src` attribute for an image, you would use `v-bind:src="value"`. The attribute value is then evaluated much in the same way as you would use `{{ }}`.
 
 The following code would generate the HTML element `<img src="./media/sample.jpg">`
 
@@ -29,24 +29,44 @@ The following code would generate the HTML element `<img src="./media/sample.jpg
 </script>
 ```
 
+The `imageSource` property is made available to the template by it being returned from the `data()` method. Then it's bound to the `src` attribute of the image element.
+
 > ![NOTE]
-> We do not have to maintain a reference to the object we use for our app, but can call `createApp` immediately followed by `mount` as demonstrated above.
+> You do not have to maintain a reference to the object you use for your app, but you can call `createApp` immediately followed by `mount` as demonstrated above.
 
-## Class and style
+## Binding shorthand
+
+You've seen so far how you can use the `v-bind` directive to bind data, in your Vue app, to an attribute. There's a shorthand, a shortened way to type this directive. Instead of typing `v-bind:attribute`, you can type `:attribute` and thereby save a few characters. Let's revisit the example with the bound image source. Instead of typing:
+
+```html
+<div id="app">
+    <img v-bind:src="imageSource" />
+</div>
+```
 
-One of the most common attributes you may wish to set for an HTML element is its `class` or `style`. To support this, Vue.js includes a shortcut available for these two attributes. `:class` and `:style` are identical to using `v-bind:class` and `v-bind:style` respectively.
+you can now type:
+
+```html
+<div id="app">
+    <img :src="imageSource" />
+</div>
+```
+
+> [!TIP] It's considered a good practice to use `:attribute` over `v-bind:attribute`.
+
+## Class and style
 
-Both class and style support object syntax, allowing you to represent more complex or dynamic style by creating JavaScript objects.
+One of the most common attributes you may wish to set for an HTML element is its `class` or `style`. To bind to these attributes, you can use the `v-bind:class` and `v-bind:style` or `:class` and `:style`, if you're using the shorthand notation.
 
 ### Class objects
 
-Let's say we have an application with two classes - `centered` and `active`. Using HTML we can enable these attributes by using the following HTML:
+Let's say we have an application with two classes - `centered` and `active`. Using HTML, you can uses these classes by using the following HTML:
 
 ```html
 <div class='centered active'>Hello, Vue!</div>
 ```
 
-We could represent this with a class object and binding in Vue by using the following:
+The example above is static though. If you want to be able to change the data, you can use a binding. However Vue not only accepts a string to bind to, but can also take an object. You can now switch out the the static value `centered active` for a property of your choosing like so:
 
 ```html
 <div id="app">
@@ -68,16 +88,16 @@ We could represent this with a class object and binding in Vue by using the foll
 </script>
 ```
 
-The boolean values allow us to enable or disable specific classes. Setting `centered` to `false` would render `<div class="active">`.
+The data property `classObject` has two properties where their values are booleans. The boolean values allows you to _enable_ or _disable_ specific classes. Setting `centered` to `false` would render `<div class="active">`, as `active` would be the only property that's still `true`.
 
 > ![NOTE]
 > When creating a class object, JavaScript naming rules apply. If you have a class name which uses a dash, such as `center-text`, you will have to place the name in quotes (`'center-text': true`) when adding the property.
 
 ### Style objects
 
-Setting styles in CSS involves creating different collections of key/value pairs. This is relatively natural to represent with a JavaScript object. We can create objects which Vue.js can use to set style through style objects.
+Setting styles in CSS involves creating different collections of key/value pairs. This is relatively natural to represent with a JavaScript object. You can create objects which Vue.js that you can use to set the style through style objects.
 
-If we wanted to set the background color (`background-color`) of an HTML element's style, we could do this with the following:
+If you wanted to set the background color (`background-color`) of an HTML element's style, you could do this with the following code:
 
 ```html
 <div id="app">

1-vue-getting-started/4-exercise-attribute-binding.md

@@ -1,8 +1,8 @@
-We would like to display an image of what the space cruise looks like for our customers. Because each type of adventure will have a different image and potentially style, we want to add it to the data object for our application.
+You would like to display an image of what the space cruise looks like for your customers. Because each type of adventure will have a different image, and potentially style, you want to add it to the data object for your application.
 
 ## Add the properties to the data object
 
-In the previous exercise we created `data()` inside the `App` object. Let's add the properties for the image.
+In the previous exercise you created `data()` inside the `App` object. Let's add the properties for the image.
 
 1. Open **index.js**.
 1. Immediately below the line which reads `// additional properties later` add the following code:
@@ -36,13 +36,13 @@ const app = Vue.createApp({
 
 ## Add the HTML
 
-Let's update the HTML to include the image. We will set the attributes and style by using attribute binding.
+Let's update the HTML to include the image. You will set the attributes and style by using attribute binding.
 
 1. Open **index.html**.
 1. Add the following HTML below the line which reads `<div>{{ productDescription }}</div>`:
 
     ```html
-    <img v-bind:src="productImage" v-bind:alt="productImageDescription" :style="productImageStyle" />
+    <img :src="productImage" :alt="productImageDescription" :style="productImageStyle" />
     ```
 
     The entire `div` element for the app should now look like the following:
@@ -51,10 +51,12 @@ Let's update the HTML to include the image. We will set the attributes and style
     <div id="app">
         <h2>{{ productName }}</h2>
         <div>{{ productDescription }}</div>
-        <img v-bind:src="productImage" v-bind:alt="productImageDescription" :style="productImageStyle" />
+        <img :src="productImage" :alt="productImageDescription" :style="productImageStyle" />
     </div>
     ```
 
+    Not how the shorthand notation `:attribute` is used on all the attributes and how this usage makes for an easier read over the longer `v-bind:attribute`.
+
 ## Test the results
 
 1. Save all files.