Skip to content

vueschool/custom-vue-directives

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

9 Commits
Β 
Β 
Β 
Β 

Repository files navigation

Custom Vue.js Directives

Custom Vue.js Directives Course Illustration

This repository contains the example code for the Custom Vue.js Directives Course.

Vue.js Directives are special HTML attributes that allow us to manipulate the DOM. Directives are very powerful and we use them every day.

Common directives are v-if, v-for and v-model.

The course covers all you need to know to be able to create your own, custom vue.js directives. In the course, we create three different directives to showcase the possibilities and power of custom vue.js directives.

The Directives

v-color allows us to easily add a CSS color to an HTML element.

v-switching-color changes the CSS color of the element every 500 milliseconds.

v-click-outside allows us to attach an event handler to when a user clicks outside an element. Perfect for modals and pop-over menus, toolboxes etc.

While the two first might seem silly, the possibilities with these patterns are very powerful. The course also teaches you what you need to know about directive modifiers and hooks.

Visit Vue School to watch the course.