Directive
Although it seems that although it is similar to the definition in Angular, Directive is an expansion of DOM functions, Vue's Directive is much weaker. Because Vue Component actually contains operations on DOM, most of the time when we write a general component, it is a Component rather than a Directive, while in Angular, we write a general component, it is usually a Directive.
So I said that Vue's Directive is much weaker than Angular, or it can be said to be much purer. It is an expansion of DOM functions, rather than encapsulating logic related to DOM. If you are interested, you can understand by comparing these two UI libraries:
•Vux /airyland/vux
•Angular Bootstrap /angular-ui/bootstrap
By comparing, we will find that in Vue, we encapsulate a general component (in fact, whether it is general or not) is a Component, but in Angular it is a Directive, because the Controller in Angular can only create a $scope scope. It can be simply thought in Vue Directive = Angular Directive + Controller. As mentioned earlier, many Vue designs are similar to Angular2. Directive in Vue can basically be equivalent to Directive in Angular2, but don't get confused with Directive in Angular.
In order to avoid misleading, Angular Directive will no longer be compared later.
life cycle
The life cycle is divided into three steps:
•bind triggers when bound to the DOM element for the first time
• Update bind will be triggered immediately after completion, and will be triggered whenever the parameters are updated in the future.
•unbind triggers when unbinding the binding to the DOM element
The API is so concise. . .
Among them, update is the most important thing, that is, when Directive receives an update of a value, the corresponding code will be executed. The parameters received by the update function are the values passed by the user through Attr.
Let’s implement a simple Directive below, which is used to verify the content input from Todo List (form verification). The basic structure of Directive is as follows:
("minlength", {
bind: function() {
},
update: function(value) {
},
unbind: function() {
}
});
Then, we need to perform verification when the user inputs. Here we implement a simple minlength verification, the code is as follows:
("minlength", {
bind: function() {
var self = this;
var el = ;
("keydown", function(e) {
if( === 13) {
if( < ) {
();
}
}
});
var submit = ("button, [type='submit']");
= true;
("keyup", function(e) {
= ( < );
});
},
update: function(value) {
= parseInt(value);
},
unbind: function() {
}
});
The basic logic binds events in the bind stage, and then makes judgments based on the minlength value passed in during update.
At present, Directive should be to achieve similar functions, and of course there are still many details of usage, so I won’t go into details. Directive is not a very important part in Vue. People usually write Component when writing code.
Filter and Mixins look simple, skip it.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.