Web Developer Fast Track

Winter 2022

Vue Data Binding

Morning Javascipt

Activity

Step 1

  • create a javascript file with an array of data
  • import it into another javascript file
  • console.log the data

Step 2

  • Iterate through an array of objects and only return 1 property from each object using forEach()
  • use either module import/export syntax or module.exports/require syntax
  • Then Try using the other version

Vue-CLI

  • There are a lot of ways to add vue to a project and to create a vue project
  • the vue-cli
  • The UI for the vue-cli (adds a clickable interface)
  • Using vite
  • Nuxt and other Vue based frameworks

Today we are going to work with a pure vue experience using the cli

  1. install vue
  2. set up a project
    • using the cli
    • uisng the ui
  3. Start creating things

Why when we are just using nuxt next week?

  • It's good to get an idea of what vue is outside of a framework
  • This will give you an opportunity to see vue in it's default environment
  • Less dependencies
  • Faster experimentation

Activity: Install and set up a vue project

A short introduction conditional rendering with v-if/v-else

  • This works just like regular if/else statements, but you put them in the template
  • Use this for error handling.
  • Documentation
  • Be familiar with this concept as it will come in handy next week.

How to Use Components

  • Vue Components Documentation
  • Single File Components are nested within one another and on pages to build a website.
  • Follow the style guide on naming components
  • You will need to use es6 import syntax to add components to vue files (in nuxt, this behaviour requires less work)

Why components?

  • components allow you to create reusable code (edit once, fix everywhere)
  • They make it easier to spot errors
  • They also make it easier to upgrade your code over time
  • Modularity is awesome

Activity

  • Create a TheHeader.vue component and add it to an app.vue page
  • Add a background image
  • Add static text to the hero component (Page title, text)
  • import TheHeader.vue onto the app.vue page
  • Add some sample content to the page

Props

  • Documentation
  • Props are a convention in many frameworks, they refer to how variables are passed between parent and child components
  • By using props, you can set a component's layout to be specific about how it displays information from the parent component
  • Note that the options api and composition api use different syntax to define props
  • Props are a one way data flow from parent to child (page to component)

Tips

  • When defining props, make sure to define their variable type (ie: string, array...)

Activity

  • Set up a prop on your AppHeader.vue component
  • use it to take the page title and hero description text from the app.vue page

Lab Time

More Cool Javascript Stuff (main room demonstration)

Activities

  • Practice working with variables
    • This repo has a bunch of prompts in the code for achievemnts
  • Practice Creating components for achievement 6
  • Pass data from parent to child components

Prep