Creating a new directive

Directives are like mini functions that you can use to quickly drop in to your code, mainly to improve the user experience, and to add new low-level features to your graphic interface.

Getting ready

This recipe, although found in the advanced chapter, is really easy to complete. The main reason directives are advanced is because you should usually prefer composition to add functionality and style to your apps. When components won't cut it, use directives.

How to do it...

We will build a v-pony directive that will turn any element into a pony element. A pony element is created with a pink background and changes color when you click on it.

The HTML code for the pony element is as follows:

<div id="app">
  <p v-pony>I'm a pony paragraph!</p>
  <code v-pony>Pony code</code>
  <blockquote>Normal quote</blockquote>
  <blockquote v-pony>I'm a pony quote</blockquote>
</div>

Just to show the difference, I've included a...