CPNT 262

Mini Activity 4 - Framework Reactivity

Weight: 10%

Due:

Late Penalty: 10% deduction for each day late. Submissions will not be accepted more than three days late.

Overview

This assignment is intended to help you develop your understanding about how js frameworks make data reactive and improve the developer’s experience (DE).

You’ll be creating a new Vue project that has just a single page App.vue as well as 2 components of your choosing. Then from there it’s up to you to decide how you want to implement the following reactivity features:

  • Data binding
    • v-bind attribute (at least 1)
    • double moustache variable rendering (at least 1)
  • Conditional Example
    • v-if/else or v-show
  • Props and Slots
    • at least 1 prop per component
    • use of 1 slot in 1 of the components
  • Events
    • 2 usages of v-on for event handling
    • can be buttons but doesn’t have to be
  • reactivity
    • use of ref() or reactive()

Instructions

  1. create a new vue app and push it to github
  2. pick use cases for the above listed language features
  3. build your ideas between the App.vue file and the 2 components

Note: Styling and design are not important for this assignment. It’s purely for practicing and demonstrating usage of vue directives.

Rubric

5 Points: Language features

  • 1 point per language feature (list of 5 above)

5 Points: Code Quality

  • vue project has been properly scaffolded
  • usage of modern vue 3 syntax
  • code comments

Submission Instructions

  1. As a comment in D2L: share links to make it easy for the instructor to quickly evaluate your work:
    • GH repos, Pages, Projects (Beta), etc.
    • Codepens, Figma, FigJam, etc.
  2. Double check the Activity for specific instructions.
  3. If applicable, include a README containing the following;
    • Activity name and author;
    • Attributions: Did anyone help you? Give credit to any classmates, articles, tutorials, etc that helped you complete this project.
    • Include self-assessments, observations, research, etc under the heading “Code Journal” in your README.
  4. Zip project repo and submit it.