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
   

   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