_javascript skills of Directive knowledge in front-end frame Vue.js

directive

Although it looks similar to the definition in angular, directive is an extension of DOM functionality, but Vue directive is much weaker. Because Vue Component actually contains operations on the DOM, most of the time we write a generic component is a Component rather than a directive, and in angular we write a generic component that is generally a directive.
So I say Vue's directive is a lot weaker than angular, and it's a lot more pure, and he's an extension of Dom's functionality, not to encapsulate the logic associated with DOM. Be interested in comparing the two UI libraries to understand:
Vux Https://github.com/airyland/vux
Angular Bootstrap https://github.com/angular-ui/bootstrap

In contrast, it turns out that in Vue we encapsulate a generic component (in fact, whether it is generic) as a Component, but in angular it is a directive, because angular in Controller can only create a $scope Scope. Can be simply considered in Vue directive = angular directive + Controller. As mentioned earlier Vue many design and Angular2 similar, Vue Directive basic can be equivalent to ANGULAR2 directive, but do not and angular mixed up in the directive.

In order to avoid misleading, so the back no longer take angular directive for comparison.

Life cycle

The life cycle is divided into three steps:
bind is triggered the first time it is bound to a DOM element
update bind is triggered immediately after it is complete and will be triggered whenever the parameter is updated
unbind and DOM element binding timed to trigger

API Simple to cry ...
Where update is the most important, that is, when the directive receives a value of the update will execute the corresponding code. The parameters that the update function receives are the values that the user passes through the Attr.

We implement a simple directive that verifies the contents of the Todo list input (form checksum). The basic structure of Directive is as follows:

Vue.directive ("MinLength", {
 bind:function () {
 },
 update:function (value) {
 },
 unbind:function () {
 }
});

Then, we need to check the user input, here to implement a simple minlength checksum, 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 = =) {
  if (El.value.length < self.minlength) { C7/>e.preventdefault ();}}
 );
 var submit = El.parentNode.querySelector ("button, [type= ' Submit ']");
 Submit.disabled = true;
 El.addeventlistener ("KeyUp", function (e) {
  submit.disabled = (El.value.length < self.minlength);}
 );

 ,
 update:function (value) {
 this.minlength = parseint (value);
 },
 unbind:function () {
 }
});

The basic logic binds the event in the bind phase, and then it is judged according to the MinLength value passed in at update time.

At present, directive should be to achieve similar functions exist, of course, there are many details of the use of no longer detailed. directive in Vue is not very important piece, we usually write code when more or write the Component.

The Filter and mixins look simpler and skip over.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.