Skip to main content

Day 13 v-bind and v-on

Javascript Warmups: Functions (20 min + 10min debrief)

  • Activity Link
    • Create functions that make conditional logic reusable

Debrief Questions

  • What kind of use cases could you use this logic on a web page? (each group will need to discuss at least 1 of their solutions)
  • What are your preferences for syntax style? and why?

Vue Directives

Vue Directives are used to render and manipulate data on a page. The most common is the v-bind which we discussed yesterday.

V-bind and Attributes

  • Render text from JS using double moustach syntax {{ variableName }}
  • Pass JS variables to attributes using v-bind: or :. ex: <img :src="varName.src" :alt="varName.alt" />
  • Bind css styles
    • See an example using functions here
  • pass props to components (what we will do after lunch)

Activity: Bind Two Attributes

  • Bind an image’s src and alt tags to an an object
    • example object: const image = {url: 'https://imageurl.com', alt: 'this is some text'}
  • Bind a class to styles declared in a variable
    • example variable: const textStyle = 'text-2xl text-red-200'
    • if the first example is comfortable, try using a conditional to determine the styles of a variable

Setting up Eslint and Prettier with Vue and Tailwind

  • Ashlyn’s Utils branch
    • This branch has tips in the readme plus functioning code examples (will be merged to main after class)

Lab Time

  • Vue Tutorial: Structured 15 step set of activities
  • Create new “views” and add them to the router docs
  • Create a number counter with v-on
  • Make variables change color depending on the state of a switch that is controlled using v-on

Homework