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, and 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, not to encapsulate logic related to DOM. If you are interested, you can understand by comparing these two UI libraries:
•Vux https://github.com/airyland/vux
•Angular Bootstrap https://github.com/angular-ui/bootstrap
By comparison, we will find that in Vue, we actually 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 designs of Vue 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
•The update bind will be triggered immediately after completion, and will be triggered whenever the parameters are updated in the future.
•Unbind triggers when unbinding and DOM elements are unbind
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 by Todo List (form verification). The basic structure of Directive is as follows:
Vue.directive("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:
Vue.directive("minlength", { bind: function() { var self = this; var el = this.el; el.addEventListener("keydown", function(e) { if(e.keyCode === 13) { if(el.value.length < self.minlength) { e.preventDefault(); } } }); var submit = el.parentNode.querySelector("button, [type='submit']"); submit.disabled = true; el.addEventListener("keyup", function(e) { submitted.disabled = (el.value.length < self.minlength); }); }, update: function(value) { this.minlength = parseInt(value); }, unbind: function() { }});The basic logic binds events during 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 relatively simple, skip it.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.