Tutorial 02 - Vue.js 1

[braughtg]

Tutorial 02 - Vue.js 1

In this tutorial you will begin to learn about the Vue.js framework and how to use it to build interactive web applications. Some of the specific Vue.js concepts that you will learn about and gain practice with are:

• Text Interpolation
• Data binding
• Conditional rendering
• List rendering

The Tutorials

We will be using Susan Buck's Vue.js Simplified Course for our introduction for Vue.js. As you watch each video in this course, you will create the same code that Susan creates. Then in the Extensions to the tutorials, you will experiment with and extend this code to build your understanding and expand your Vue knowledge and skills.

Tasks

1. Visit CodeWithSusan's Vue.js Simplified Course .
2. Strongly consider purchasing the set of notes that accompany the videos (and all of her other videos as well) for $4. These notes are extremely helpful and contain code snippets that she uses that you will be able to copy and paste rather than typing as you work through the tutorials. Purchasing these notes will save you time, will be a great resource as you complete the tutorials, and will help support Susan's excellent work.

Introduction

The first video in the series introduces the Flashword app that you'll be building and then provides some "big picture" background about web applications and the Vue.js framework. You will not need to build anything when watching this video, but you should check your understanding of its content by deciding if you can answer the self check questions.

Tasks

1. Watch the "Introduction" video (10:27).
2. Self Check:
   a. What are requests and responses and what is their role in a static web site?
   b. What are micro requests and what is their role in a web application?
   c. What are some advantages of Vue.js as compared to other web application frameworks?

Getting Started

The tasks below will remind you how to get your codespace up and running and will have you create a directory for the Flashword project that you'll build as you follow the tutorials.

Tasks

1. Follow the steps for "Starting a Tutorial" in the CONTRIBUTING.md document.
2. Create aflashword directory inside of the web-projects directory you created during Tutorial 01.
3. Review the steps for "Working on Tutorial Tasks" in the CONTRIBUTING.md document and use them to complete each of the tutorials below.
   • Be sure that you are making at least one commit for each tutorial. Though, often it will make sense to make multiple commits per video.

The Basics

This tutorial uses a minimized version of Flashword to introduce you to some of the key features of Vue.js. You'll see everything again, in more detail, in the later videos.

Tasks

1. Watch and follow along with "The Basics" video (23:51).

   • Notes: Pay attention to the following notes. They indicate some things that you will need to do differently from what Susan does in the video.

     a. To open the "flashword" application use the "View your work in the browser" step from the "Working on Tutorial Tasks" section of the "CONTRIBUTING" document rather than following the directions that Susan gives in the video.

     b. When you open the "flashword" application the first time it will not work. To fix this replace the URL for the Vue CDN (https://unpkg.com/vue@next) with the updated URL https://unpkg.com/vue@3/dist/vue.global.js.

     c. When you try to commit these changes you will will see some linting errors that prevent the commit from occurring.

     /workspaces/Vue3-WebDev-Kit/web-projects/flashword/app.js
     9:7   error  'app' is assigned a value but never used  no-unused-vars
     9:13  error  'Vue' is not defined                      no-undef
     

     Point at the underlined words (app and Vue) in the app.js file and use the "Quick fix" suggestion to disable the associated linting rule for that line.

     Generally we will want to fix the errors rather than disabling the rule. But in this case disabling the rules is acceptable. Disabling those linting rules will insert the following comment just above the line that was causing the problem.

     // eslint-disable-next-line no-unused-vars, no-undef
     

2. Self Check:
   a. What is data interpolation in Vue.js and what is the syntax for implementing it in an app?
   b. What three Vue directives did you see? What does each one do? What is the syntax for each one?
   c. How do data interpolation and binding work together to make an app reactive?
   d. When is the this keyword necessary in Vue.js and when is it not necessary?

Behind the Scenes

This video will give you a little insight into how Vue.js works. Becoming a good Vue programmer requires that you think a little differently than when programming in other langauges (e.g. Java, Python, JavaScript, C/C++, etc). Having some insight into how Vue.js works will help you to begin to think like a Vue programmer.

Tasks

1. Watch and follow along with the "Behind the Scenes" video (11:14).
   • Note: Much of this video is informational, but there is a new feature that is implemented at the end.
2. Self Check:
   a. What is the Document Object Model (DOM)?
   b. What is the difference between imperative and declarative programming?
   c. What does Vue's reactivity system do?
   d. How does implementing a feature with Vue.js differ from implementing the same feature with plain JavaScript?

Conditional Rendering

In this tutorial you'll learn more about conditional rendering and the HTML elements and Vue directives for using it.

Tasks

1. Watch and follow along with the "Conditional Rendering" video (7:58).
2. Self Check:
   a. What is conditional rendering?
   b. What Vue directives are used to implement conditional rendering?
   c. When should you use the <template> HTML element?
   d. What is the difference between the v-if and v-show Vue directives? Why would you use one over the other?

List Rendering

List rendering in Vue is a mechanism that is used to iterate over an array, typically generating an HTML element for each element in the array. This is particularly useful for pages that display lists of things or provide a list of options for the user.

Tasks

1. Watch and follow along with the "List Rendering" video (12:51).
2. Self Check a. What are the five different ways that you have seen to use the v-for Vue directive?
   b. How do you iterate over the elements of an array? What if you want the index of each element?
   c. How do you iterate over the properties of an object? What if you want the key or index of the property?
   d. When iterating over an array of objects, how do you access specific properties of each object?
   e. What complication can arise when trying to combine the v-for and v-if Vue directives?
3. Remove the five examples of use of the v-for directive that you added to index.html in the "List Rendering" tutorial. These were added just to illustrate the different uses of thev-for directive and do not add any useful functionality to the Flashword app.

Turning in Your Work

Once you have finished all of the work in this tutorial you will need to officially submit it.

1. Use the steps in the Completing a Tutorial section of the CONTRIBUTING.md document to submit your work on this tutorial.

---

This Tutorial is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License