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

More Decks by Jennifer Bland

Other Decks in Programming


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