Create Vue.js Directive
In this lesson, you'll learn how to create a custom Vue.js directive.
We will create a very important directive that we simply cannot live without. We will create the v-purple directive.
LESSON TRANSCRIPT
In this lesson, let's create our own custom directive. We'll call it vPurple. This directive's purpose will be to change the color of the element it's bound to to, well, you guessed it, purple. Over on the right-hand side, though, you can see that nothing is working yet.
That's because we haven't actually created the directive. So let's do that. All we have to do inside of Script Setup is to define a function with the v prefix. and it will be available to the template as a directive.
A directive takes the element that it's bound to as its first argument. Thus, all that's left to do is to target the style property on the element and change its color to purple. And then I'll give our preview a refresh. Perfect.
js. In this lesson, let's create our own custom directive. We'll call it vPurple. This directive's purpose will be to change the color of the element it's bound to to, well, you guessed it, purple.
Over on the right-hand side, though, you can see that nothing is working yet. That's because we haven't actually created the directive. So let's do that. All we have to do inside of Script Setup is to define a function with the v prefix.
and it will be available to the template as a directive. A directive takes the element that it's bound to as its first argument. Thus, all that's left to do is to target the style property on the element and change its color to purple. And then I'll give our preview a refresh.
Perfect. js.
This transcript is generated automatically from the lesson video. Spotted an inaccuracy? Let us know at team@vueschool.io.
