Tweet
Tweet

Slide 1

Slide 1 text

THE POWER OF CUSTOM DIRECTIVES JENNIFER BLAND

Slide 2

Slide 2 text

Three Truths One Lie • I attended a coding bootcamp at age of 51 • My cat adopted me • I can deadlift 175 lbs • I have climbed the highest mountain on 4 continents

Slide 3

Slide 3 text

WHAT ARE DIRECTIVES?

Slide 4

Slide 4 text

Directive Examples NAME SHORTCUT PURPOSE EXAMPLE v-if, v-else-if, v-else none Conditional Rendering v-bind : Bind attributes dynamically, or pass props
v-on @ Attaches an event listener to the element v-model none Creates two-way binding v-once none Don’t rerender
Keep me from rerendering div> v-show none Will show or hide a component/ element based on state, but will leave it in the DOM without unmounting (unlike v-if) (toggles visibility when showComponent is true)

Slide 5

Slide 5 text

Simple Custom Directive
...
...

Slide 6

Slide 6 text

Passing Value to Directive
Show this
Show this

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content