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.

Da526e4b5901b3a2759cf234285c6488?s=128

Jennifer Bland

January 31, 2019
Tweet

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