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.

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>