Challenge 4: Writing a Simple Plugin

[00:00:00]
>> Evan You: Our exercise is gonna leverage these knowledge and write a simple plugin. Let's go into the repository. We can close the first directory now and go into Plugin, and go into [INAUDIBLE]
>> Evan You: [COUGH] And our goal is to create a plugin that teaches Vue components to handle a custom rules option.

[00:00:26]
The rules option expects an object that specifies validation rules for data in the component.
>> Evan You: So notice this usage example. This rules option doesn't exist in Vue's own API. It's completely custom. If you just add this to a vanilla Vue component, it doesn't do anything, Vue will just ignore it.

[00:00:49]
But it doesn't complain about it. But if inside this component's created hook, and you try to do this.$options.rules, you actually get this object here. Right? So, this provides us with an interesting opportunity to do things to [INAUDIBLE] Based on this custom option. And understand, we don't want the consumers of our plugin to always have to manually create this hook in order to access this thing.

[00:01:28]
So, we can abstract this away inside of Mixin. Right? So, const myMixin equals this. And what we can do is, inside this mixing we can check for the existence of this custom rule.
>> Evan You: If this rule exists, we can do something about it.
>> Evan You: Right? And going further, if we apply this mixing globally.

[00:02:00]
>> Evan You: We've essentially taught every Vue instance how to deal with this custom rules option, all right? And going one step further, if we take this global mixing operation and put it inside a plugin
>> Evan You: So view plug-ins can be just a function. So the simplest form is just this.

[00:02:38]
>> Evan You: Okay, so sometimes your plug-in can Can also take the more verbose object formats, which exposes the install function.
>> Evan You: This is essentially the same thing, just alternative interface. Okay, so this is how we This is the boil plate for creating a plugin. When you call view, don't use this plugin.

[00:03:04]
It'll apply this global mixing which will teach every view instance created after that point, they will invoke this creative hook when they're created, And then we'll execute our code of checking for this custom rules option, okay? So, the exercise wants us to implement the plug-in that knows how to handle this.

[00:03:34]
Okay. So the end effect is, if we provide these rules, so the rules are essentially saying for the property full Which is here. We will have a validator function. This validator function will be run every time foo changes. And if it doesn't, it fails the validation, we'll log this message to the console, okay?

[00:03:58]
>> Evan You: And essentially What you need to fill in is this part.
>> Evan You: And there are some hints at the end too.