Directif
Bien qu'il semble que bien qu'il soit similaire à la définition dans Angular, la directive est une expansion des fonctions DOM, la directive de Vue est beaucoup plus faible. Parce que le composant Vue contient réellement des opérations sur DOM, la plupart du temps lorsque nous écrivons un composant général, c'est un composant plutôt qu'une directive, et en angulaire, nous écrivons un composant général, c'est généralement une directive.
J'ai donc dit que la directive de Vue est beaucoup plus faible qu'angulaire, ou on peut dire qu'elle est beaucoup plus pure. Il s'agit d'une expansion des fonctions DOM, et non de la logique encapsulée liée à DOM. Si vous êtes intéressé, vous pouvez comprendre en comparant ces deux bibliothèques d'interface utilisateur:
• Vux https://github.com/airyland/vux
• Bootstrap angulaire https://github.com/angular-ui/bootstrap
En comparaison, nous constatons qu'en Vue, nous encapsulons en fait un composant général (en fait, qu'il soit général ou non) est un composant, mais en angulaire, c'est une directive, car le contrôleur en angulaire ne peut créer qu'une portée de portée $. Il peut être simplement pensé dans Vue Directive = Angular Directive + Controller. Comme mentionné précédemment, de nombreux conceptions de Vue sont similaires à Angular2. La directive en Vue peut essentiellement être équivalente à la directive dans Angular2, mais ne vous confondez pas avec la directive en angulaire.
Afin d'éviter les tromperies, la directive angulaire ne sera plus comparée plus tard.
cycle de vie
Le cycle de vie est divisé en trois étapes:
• lier les déclencheurs lorsqu'il est lié à l'élément DOM pour la première fois
• Le lien de mise à jour sera déclenché immédiatement après la fin et sera déclenché chaque fois que les paramètres seront mis à jour à l'avenir.
• Les déclencheurs désunissants lorsque les éléments non liés et DOM sont dénoncés
L'API est tellement concise. . .
Parmi eux, la mise à jour est la chose la plus importante, c'est-à-dire que lorsque la directive reçoit une mise à jour d'une valeur, le code correspondant sera exécuté. Les paramètres reçus par la fonction de mise à jour sont les valeurs transmises par l'utilisateur via ARTR.
Implémentons une directive simple ci-dessous, qui est utilisée pour vérifier l'entrée de contenu par la liste TODO (Vérification du formulaire). La structure de base de la directive est la suivante:
Vue.directive ("minLength", {bind: function () {}, update: function (value) {}, unstind: function () {}});Ensuite, nous devons effectuer une vérification lorsque l'utilisateur saisit. Ici, nous implémentons une vérification simple MinLength, le code est le suivant:
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 <felf.minlength) {e.preventDefault ();}}}}); el.parentNode.QuerySelector ("Button, [Type =" {}});La logique de base lie les événements pendant la phase de liaison, puis fait des jugements basés sur la valeur minLength transmise lors de la mise à jour.
À l'heure actuelle, la directive devrait être d'atteindre des fonctions similaires, et bien sûr, il y a encore de nombreux détails sur l'utilisation, donc je ne vais pas entrer dans les détails. La directive n'est pas une partie très importante de Vue. Les gens écrivent généralement des composants lors de l'écriture de code.
Le filtre et les mixins sont relativement simples, sautez-le.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.