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 normal blockquote element. In our JavaScript section, write the following:
Vue.directive('pony', { bind (el) { el.style.backgroundColor = 'hotpink' }})
This is how you declare a new directive. The bind hook is called when the directive is bound to the element. The only thing we are doing ...
