Merge pull request GeekTrainer#4 from GeekTrainer/final-updates

Final updates

1-vue-getting-started/metadata.md

@@ -0,0 +1,111 @@
+# Title
+
+Getting started with creating web apps with Vue.js
+
+## Role(s)
+
+- student
+- developer
+
+## Level
+
+- intermediate
+
+## Product(s)
+
+- Vue.js
+- Azure Static Web Apps
+- Visual Studio Code
+
+## Prerequisites
+
+- HTML/CSS
+- Git
+- npm
+- JavaScript
+
+## Summary
+
+Vue.js is a progressive web framework allowing developers to get up and running quickly, with just the addition of a `script` tag. However, Vue.js can also grow with you, and can be used to create large scalable applications. In this module we will explore the core concepts of Vue.js, and how to get started.
+
+## Learning objectives
+
+1. Creating an app
+1. Working with data
+
+## Chunk your content into subtasks
+
+Identify the subtasks of *module title*
+
+| Subtask | What part of the introduction scenario does this subtask satisfy? | How will you assess it: **Exercise or Knowledge check**? | Which learning objective(s) does this help meet? | Does the subtask have enough learning content to justify an entire unit? If not, which other subtask will you combine it with? |
+| ---- | ---- | ---- | ---- | ---- |
+| Creating your first app | Creating an app | Exercise | Creating an app | Yes |
+| Displaying data | Working with data | Exercise | Working with data | Binding data to attributes |
+| Binding data to attributes | Working with data | Exercise | Working with data | Displaying data |
+
+## Outline the units
+
+1. **Introduction to Vue.js**
+
+    Vue.js is a progressive web framework. We will see how this can help you creating your applications.
+
+1. **Getting started with Vue.js**
+
+    We will see how to add Vue.js to an application, and explore the concept of state.
+
+    - Adding Vue.js
+    - Creating an app
+    - Adding data
+
+1. **Exercise - Creating an app with Vue.js**
+
+    Let's create our first Vue.js application
+
+    - Adding Vue.js
+    - Adding data
+    - Displaying data
+
+    1. Clone the starter
+    1. Link to library
+    1. Create JavaScript file
+    1. Import and mount the application
+    1. Use the data
+    1. Launch the page
+
+1. **Attribute binding**
+
+    Beyond displaying data on the page, you can also bind data to attributes. We will discuss the various options and syntax available to you.
+
+    - Attribute binding
+    - v-bind
+    - : shortcut
+    - Style and attributes
+
+1. **Exercise - Attribute binding**
+
+    Let's see how you can bind values to attributes.
+
+    - Add data to the application
+    - Bind to attributes
+
+    1. Add properties to the data object
+    1. Add HTML
+    1. Test the results
+    1. Play
+
+1. **Summary**
+
+    We saw how to create a project using Vue.js, and a couple of the different ways we can interact with data.
+
+1. **Knowledge check**
+
+    What types of questions will test *learning objective*? *[(Knowledge check guidance)](https://review.docs.microsoft.com/learn-docs/docs/id-guidance-knowledge-check)*
+
+    - Multiple choice
+
+## Notes
+
+Note any additional information that may be beneficial to this content such as links, reference material, etc.
+
+- [Vue.js](https://v3.vuejs.org/)
+- [Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/overview)

2-dynamic-rendering/metadata.md

@@ -0,0 +1,102 @@
+# Title
+
+Dynamic page displays with Vue.js
+
+## Role(s)
+
+- student
+- developer
+
+## Level
+
+- intermediate
+
+## Product(s)
+
+- Vue.js
+- Azure Static Web Apps
+- Visual Studio Code
+
+## Prerequisites
+
+- Vue.js
+- HTML/CSS
+- Git
+- npm
+- JavaScript
+
+## Summary
+
+One of the goals of any web framework is to update the display based on data values. We will explore how you can make your page dynamic based on the values, and display lists of information.
+
+## Learning objectives
+
+1. Displaying lists
+1. Conditional rendering
+
+## Chunk your content into subtasks
+
+Identify the subtasks of *module title*
+
+| Subtask | What part of the introduction scenario does this subtask satisfy? | How will you assess it: **Exercise or Knowledge check**? | Which learning objective(s) does this help meet? | Does the subtask have enough learning content to justify an entire unit? If not, which other subtask will you combine it with? |
+| ---- | ---- | ---- | ---- | ---- |
+| Displaying lists of data | Displaying lists | Exercise | Displaying lists | Yes |
+| Showing or hiding information | Conditional rendering | Exercise | Conditional rendering | Yes |
+
+## Outline the units
+
+1. **Overview of dynamic displays**
+
+    When working with data you need the ability to change the display. We will explore some of the core concepts to make this happen.
+
+1. **Rendering lists**
+
+    Let's see how we can use a directive to loop through an array of information
+
+    - v-for syntax
+    - working with keys
+
+1. **Exercise - Rendering lists**
+
+    Let's display a list of information
+
+    - Displaying list data
+
+    1. Clone the starter
+    1. Display the list
+    1. Exploring the code
+    1. Test the page
+
+1. **Conditional rendering**
+
+    There are times when you don't want to show certain information based on the data. We will see how we can control if and when to display values.
+
+    - v-if/v-else
+    - v-show
+
+1. **Exercise - Conditional rendering**
+
+    Let's implement conditional rendering
+
+    - v-if/v-else
+    - v-show
+
+    1. Add the code
+    1. Test the display
+
+1. **Summary**
+
+    We saw how to control the display with data in Vue.js
+
+1. **Knowledge check**
+
+    What types of questions will test *learning objective*? *[(Knowledge check guidance)](https://review.docs.microsoft.com/learn-docs/docs/id-guidance-knowledge-check)*
+
+    - Multiple choice
+
+## Notes
+
+Note any additional information that may be beneficial to this content such as links, reference material, etc.
+
+- [Vue.js](https://v3.vuejs.org/)
+- [Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/overview)

2-dynamic-rendering/quiz.md

@@ -2,16 +2,31 @@ Choose the best response for each of the questions below. Then select **Check yo
 
 ## quiz title: Check your knowledge
 
-## Multiple Choice
-Which of the following statements is accurate with respect to the way Vue enables list rendering most efficiently?
+What directive do you use to iterate through a list of items?
 
-()`v-if` should be used to cycle through a list of array items in the browser.{{Incorrect. `v-for` is the simplest way to cycle through a list of array objects. Add the `v-for` directive to an `<li>` tag (rather than the `<ul>` or `<ol>` tag) using syntax like the following: `<li v-for="group_discount in group_discounts">{{ group_discount }}</li>`.}}
-()`v-else` should be used to cycle through a list of array items in the browser.{{Incorrect. `v-for` is the simplest way to cycle through a list of array objects. Add the `v-for` directive to an `<li>` tag (rather than the `<ul>` or `<ol>` tag) using syntax like the following: `<li v-for="group_discount in group_discounts">{{ group_discount }}</li>`.}}
-(x)`v-for`should be used to cycle through a list of array items in the browser.{{Correct! `v-for` is the simplest way to cycle through a list of array objects. Add the `v-for` directive to an `<li>` tag (rather than the `<ul>` or `<ol>` tag) using syntax like the following: `<li v-for="group_discount in group_discounts">{{ group_discount }}</li>`.}}
+(x) `v-for`
+    `v-for` allows you to iterate through an array of items
+( ) `v-show`
+    `v-show` allows you to toggle display, but not iterate through items
+( ) `v-else`
+    `v-else` is used with v-if to add Boolean logic
+( ) `v-if`
+    `v-if` is used to add Boolean logic
 
-## Multiple Choice
-Which of the following statements is accurate with respect to the way Vue enables conditional rendering?
+What directive do you use to determine if you should display data?
 
-()`v-show` removes an HTML element from the DOM temporarily in order to prevent the browser from displaying designated content.{{Incorrect. `v-show` will leave the HTML elements in the DOM and write an inline CSS style in the HTML tag to prevent content from being displayed in the browser. The `v-show` option may be the most efficient processing method for any item where you want to toggle its visibility multiple times.}}
-()`v-else` directive must be used in conjunction with `v-if`.{{Incorrect. It is technically not necessary to use the `v-else` directive if you do not need to display an alternative. You can simply use a `v-if` statement to either display an element or not.}}
-(x)`v-if`, `v-else-if` and `v-else` can be used to add layers of complexity for conditional rendering {{Correct! For complicated decision-making you can set a numeric property in order to compute mathematical decisions that you can then layer in your HTML interface with a set of `v-if`, `v-else-if` and `v-else` directives to define multiple conditions.}}
+( ) `v-for`
+    `v-for` allows you to iterate through an array of items
+(x) `v-show`
+    `v-show` allows you to toggle display
+( ) `v-bind`
+    `v-bind` allows you to bind attribute values
+
+What directive is used to implement Boolean logic?
+
+( ) `v-for`
+    `v-for` is used to iterate through an array of items
+( ) `v-bind`
+    `v-bind` is used to bind values to attributes
+(x) `v-if`
+    `v-if` is used to implement Boolean logic

3-data-events/5-computed-properties.md

@@ -27,4 +27,3 @@ const app = Vue.createApp({
 ```
 
 The fields `lastName` and `firstName` are concatenated using a string literal.
-

3-data-events/metadata.md

@@ -0,0 +1,124 @@
+# Title
+
+Working with data and events in Vue.js
+
+## Role(s)
+
+- student
+- developer
+
+## Level
+
+- intermediate
+
+## Product(s)
+
+- Vue.js
+- Azure Static Web Apps
+- Visual Studio Code
+
+## Prerequisites
+
+- HTML/CSS
+- Git
+- npm
+- JavaScript
+- Vue.js
+
+## Summary
+
+Creating dynamic web applications typically allows users to interact with the page and data. In this module we will see how to add forms to a Vue.js page, and respond to user events. We will also see how we can add computed values to calculate values based on updates to the data.
+
+## Learning objectives
+
+1. Working with forms
+1. Adding events
+1. Computed properties
+
+## Chunk your content into subtasks
+
+Identify the subtasks of *module title*
+
+| Subtask | What part of the introduction scenario does this subtask satisfy? | How will you assess it: **Exercise or Knowledge check**? | Which learning objective(s) does this help meet? | Does the subtask have enough learning content to justify an entire unit? If not, which other subtask will you combine it with? |
+| ---- | ---- | ---- | ---- | ---- |
+| Adding a form to a page | Working with forms | Exercise | Working with forms | Adding a form to a page |
+| Binding data to a form | Working with forms | Exercise | Working with forms | Adding a form to a page |
+| Responding to user events | Adding events | Exercise | Adding events | Yes |
+| Calculating values dynamically | Computed properties | Exercise | Computed properties | Yes |
+
+## Outline the units
+
+1. **Overview of dynamic data and events**
+
+    Let's see how we can incorporate interactivity into a Vue.js application.
+
+1. **Working with forms**
+
+    Let's explore how to bind Vue.js data to a form.
+
+    - v-model directive
+    - Binding to various controls
+
+1. **Exercise - Binding data to forms**
+
+    Let's add a form to a page and bind data
+
+    - Adding a form
+    - Binding data
+
+    1. Clone the starter
+    1. Create the form
+    1. Walk through the code
+    1. Test the results
+
+1. **Working with events**
+
+    Events are raised when the user interacts with the page. Let's see how we can respond to events.
+
+    - Event concepts
+    - Binding to events
+
+1. **Exercise - Adding event handlers**
+
+    Let's add events to a page
+
+    - Adding the code
+    - Adding the control
+
+    1. Add the function
+    1. Add the button
+    1. Test the page
+
+1. **Understanding computed properties**
+
+    Computed properties allow you to add new values based on existing data
+
+    - Explaining computed properties
+    - Adding computed properties
+
+1. **Exercise - Adding computed properties**
+
+    Let's add a computed property
+
+    - computed properties
+
+    1. Add the computed property
+    1. Add the display to the page
+    1. Test the page
+
+1. **Summary**
+
+    We saw how to allow the user to interact with the page.
+
+1. **Knowledge check**
+
+    What types of questions will test *learning objective*? *[(Knowledge check guidance)](https://review.docs.microsoft.com/learn-docs/docs/id-guidance-knowledge-check)*
+
+    - Multiple choice
+
+## Notes
+
+Note any additional information that may be beneficial to this content such as links, reference material, etc.
+
+- [Vue.js](https://v3.vuejs.org/)
+- [Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/overview)