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

  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
  3. WHAT ARE DIRECTIVES?

  4. Directive Examples NAME SHORTCUT PURPOSE EXAMPLE v-if, v-else-if, v-else none

    Conditional Rendering <g v-if="flourish === 'A'"></g> <g v-else-if="flourish === 'B'"></g> <g v-else></g> v-bind : Bind attributes dynamically, or pass props <div :style="{ background: color }"></div> v-on @ Attaches an event listener to the element <button @click="fnName"></button> v-model none Creates two-way binding <textarea rows="5" v-model="message" maxlength="72"></textarea> v-once none Don’t rerender <div class=”v-once”>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) <child v-show=”showComponent”></child>(toggles visibility when showComponent is true)
  5. Simple Custom Directive <div v-example> ... </div> <div v-else> ...

    </div>
  6. Passing Value to Directive <div v-if=“isVisible">Show this</div> <div v-color=“‘purple’”>Show this</div>

  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None