Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Power of Custom Directives in Vue

The Power of Custom Directives in Vue

Vue ships with a default set of directives like v-model and v-show. Sometimes you reach a point working with Vue where you have a use-case that the framework does not cover. Luckily, Vue allows you to register your own custom directives. A custom directive allows you to perform a critical task that you must have in your application and you cannot live without. I will show you how to create a custom directive to address the needs you might have in your application.

Jennifer Bland

January 31, 2019
Tweet

More Decks by Jennifer Bland

Other Decks in Programming

Transcript

  1. THE POWER OF
    CUSTOM DIRECTIVES
    JENNIFER BLAND

    View Slide

  2. 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

    View Slide

  3. WHAT ARE DIRECTIVES?

    View Slide

  4. 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
    maxlength="72">
    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)

    View Slide

  5. Simple Custom Directive
    ...
    ...

    View Slide

  6. Passing Value to Directive
    Show this
    Show this

    View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide