diff --git a/2-dynamic-rendering/0-introduction.md b/2-dynamic-rendering/0-introduction.md index be59e26..bba72b3 100644 --- a/2-dynamic-rendering/0-introduction.md +++ b/2-dynamic-rendering/0-introduction.md @@ -16,5 +16,5 @@ Upon completion of this module you will understand the following: - Knowledge of JavaScript - Familiarity with Vue.js and directives - [Git](https://git-scm.com/) -- A code editor, such as [Visual Studio Code](https://code.visualstudio.com) +- [Visual Studio Code](https://code.visualstudio.com) - [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) extension diff --git a/3-data-events/0-introduction.md b/3-data-events/0-introduction.md index 7443c30..73ddd09 100644 --- a/3-data-events/0-introduction.md +++ b/3-data-events/0-introduction.md @@ -1,4 +1,16 @@ -- event handlers -- updating state -- forms -- computed properties?? \ No newline at end of file +Users typically modify data in a web application through a form. Since Vue.js is about working with dynamic data, it has a robust mechanism for binding data to forms. We can also manage events, performing different operations when a user clicks on a button or otherwise interacts with the page. And we even have the ability to add in values which are computed dynamically, allowing us to minimize the amount repeated code. + +In this module you will learn how to: + +- bind model data to a form +- add event handlers +- create computed values + +Prerequisites + +- Knowledge of HTML and CSS +- Knowledge of JavaScript +- Familiarity with Vue.js and directives +- [Git](https://git-scm.com/) +- [Visual Studio Code](https://code.visualstudio.com) + - [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) extension diff --git a/3-data-events/0-overview.md b/3-data-events/0-overview.md deleted file mode 100644 index 183cf84..0000000 --- a/3-data-events/0-overview.md +++ /dev/null @@ -1,16 +0,0 @@ -In this lesson we demonstrate how to work with data in Vue. We'll cover capture event handlers (such as clicking a button or hovering their mouse over an object on a webpage), working with properties and using a special Vue affordance called v-bind to build dynamic forms. - -## Learning Objectives - -Upon completion of this module you will: - -- Use an expression to calculate a value -- Set up a listener for an event -- Trigger application logic when the event occurs by: - - Changing inline data properties for implementing simple logic - - Creating a method that can be used to implement more complex logic - -If you completed the prior exercises, your HTML file should look like the image below when viewed in a browser. You can continue to build upon your own files, or you can use the the files in our [starting code](link). - -![Screenshot showing the HTML page with a selected produce image on the left and 4 thumbnail images below it. Product name and description are displayed on the right, with two paragraphs of text. Below this are unordered lists for Passenger Rates and Group Discounts](../media/m05-start.png) -- Change the selected product image when a thumbnail image is clicked diff --git a/3-data-events/1-updating-state.md b/3-data-events/1-updating-state.md deleted file mode 100644 index e69de29..0000000 diff --git a/3-data-events/2-forms.md b/3-data-events/2-forms.md new file mode 100644 index 0000000..dd7d25b --- /dev/null +++ b/3-data-events/2-forms.md @@ -0,0 +1,70 @@ +The data returned by the `data()` function in a Vue app or component is generically referred to as state. State is any information your application needs to track to perform the necessary operations. Users typically modify state through HTML forms. Vue.js allows us to bind data to a form, allowing users to update state. + +## v-model + +The `v-model` directive creates a *two-way* binding between an HTML control and the associated data. This means whenever the value is updated in the form it is updated inside your application's state. `v-model` supports binding to any form control, including checkboxes, textboxes and dropdown lists. + +> ![NOTE] +> `v-bind` creates a one-way binding, meaning any changes the user might make in the form would not be stored in state. + +For all of our examples below, we will use the following Vue application: + +```javascript +Vue.createApp({ + data() { + return { + name: 'Cheryl', + status: -1, + active: true, + benefitsSelected: 'yes', + statusList: [ + 'full-time', + 'part-time', + 'contractor' + ] + } + } +}) +``` + +## Binding to textboxes + +To bind to a textbox, you use the `v-model` directive. + +```html + +``` + +The `name` property will be updated whenever the textbox value changes. If you wish to use a `textarea` instead, the syntax is the same; you use `v-bind="name"` just as before. + +## Binding to checkboxes + +Typically Boolean values are bound to checkboxes, as they allow for the option to be toggled. To bind the `active` option we can use `v-model` as we've done before: + +```html + Is active +``` + +However, there may be times when the toggle isn't a Boolean value, but maybe two choices such as *yes*/*no*. In this case, we can use `true-value` and `false-value` to indicate the associated value for the checkbox being checked (true) or unchecked (false). + +```html + Benefits selected: {{ benefitsSelected }} +``` + +## Dropdown lists + +Dropdown lists are created in HTML by using `select` to create the list, and `option` to add options. The `select` tag stores the selected value of the dropdown list, so we will use it to bind to our model. To create the list of `option`s, we will use `v-for` to loop through the array. + +Let's say we want to create a dropdown list for the `statusIndex` in our model. We bind the model to the select tag by using `v-model`. + +We create the list of options by using `v-for`, which loops through a list of items. Because we want to set the value to be the index of the item in the array rather than the value, we use `v-for(status, index) in statusList`, which will provide the index for each item. We then set the `:value` of each option to the `index`, and display `status` as the option for the user. + +```html + diff --git a/3-data-events/3-exercise-forms.md b/3-data-events/3-exercise-forms.md new file mode 100644 index 0000000..a3b8b6c --- /dev/null +++ b/3-data-events/3-exercise-forms.md @@ -0,0 +1,88 @@ +Let's update a fictitious application for allowing people to book cruises into space. We will add a form to allow someone to book a trip to the moon. + +## Exploring the starter code + +The starter application already contains the core data model we will use. The `product` has information about the cruise itself, including the list of available `cabins`. The `booking` object is what we will use to store the options the user selects for their reservation. You can see the setup inside **index.js**. + +## Create the form + +Let's create the form the user will use to setup their reservation. + +1. Inside Visual Studio Code, open *index.html* +1. Below the comment which reads `TODO: Add booking form`, add the following HTML + + ```html + +
+ ``` + +## Breaking down the code + +Let's walk through HTML code you added to the page. + +### form element + +```html +tag */`. -- The code in the `template` section of **FoodPrefsForm.js** should now look like the code snippet shown here. - -```javascript -... - template: - /* TODO: Add
tag */ - /*html*/ - `
Room Service Fee{{ roomService }}
-Please fill out this form to let us know your food preferences.
- -tag */`. -- Add a trigger to the listener so it will execute a method named `onSubmit`. - -```javascript -... - template: - /* TODO: Add
tag */ - /*html*/ - `
Room Service Fee{{ roomService }}
-Please fill out this form to let us know your food preferences.
- -