Events and Reactivity

Mini Assignment 4: Framework Reactivity

• Assignment Instructions
• Due: Tuesday March 12th

Component planning warmup

working with the people around you, plan out components and their props for a webpage

1. Pick a website together
2. identify a component pattern for each person in the group
3. Create a vue 3 SFC in codepen
4. Create the props, sample content, and html markup to render the general layout of these components
5. TIP look up default values for vue props. you can use these to set fallbacks

Vue Events

• Documentation
• v-on gist with notes on how to use v-on
• v-on is used to listen to DOM events and trigger a javascript handler (often a function)
• syntax: v-on:click="handler"
  • or shortened as@click="handler
• Use this for any buttons on a page
  • set the handler to be a function
• This can be used with the ref() to make variables more reactive

Activity 1: sum the total cost in a shopping cart on click

• using our array from yesterday, calculate the total cost in the shopping cart on click
• create a second button to apply a discount when the cart total is >= $1000

Activity 2: Logic to Pass data between arrays

• create 2 arrays to pass data between. 1 array should be empty
• create a function that will pass the data from the full array to the empty one
• create a function that will pass the last value back to the first array

Activity 3: Add buttons so a user can make data pass back and forth

• create 2 buttons and connect them to the functions (moving data in each direction)
• validate that the buttons are passing the values with console logs
• use v-fors to show both lists on the page
• verify that they update with each click

Event Modifiers

• To stop a form from being submitted when using a <button>, or to stop other default behaviour, use .prevent
  • @click.prevent="myFunction
  • Check out the other event modifiers
    • @click.once - will only trigger once
    • @click.passive - great for touch events
  • Key modifiers allow for effecting how an event handler is triggered
  • You can specify specific keys using key aliases and key modifiers

Lifecycle Hooks

• Lifecycle hooks are common to javascript frameworks. They are the steps for when different parts of the site are initialized.
• This diagram shows the order of which the lifecycle hooks are initialized
• onMounted() can be made use of when fetching content

Activity: console.log a message when onMounted() is initialized

• Use the onMounted hook on a vue page to log a message
• log anohter message as per usual