Base
En plus des directives intégrées, Vue.js permet également l'enregistrement des directives personnalisées. Les directives personnalisées fournissent un mécanisme pour cartographier les modifications des données en comportement DOM.
Une directive personnalisée globale peut être enregistrée à l'aide de la méthode VUE.Directive (ID, Définition), qui reçoit deux ID d'instructions de paramètres et des objets de définition. Vous pouvez également enregistrer une directive personnalisée locale à l'aide de l'option Directives du composant.
Fonction de crochet
La définition d'un objet peut fournir plusieurs fonctions de crochet (toutes facultatives):
• Bind: appelé une seule fois, et est appelé lorsque l'instruction est liée à l'élément pour la première fois.
• Mise à jour: le premier appel est appelé immédiatement après se lier avec la valeur initiale comme paramètre, puis chaque fois que la valeur liée change, les paramètres sont la nouvelle valeur et l'ancienne valeur.
• Débinding: appelé une seule fois, lorsque l'instruction est insensée à partir de l'élément.
Exemple
Vue.Directive ('My-Directive', {bind: function () {// PRÉPARATION WORK // Par exemple, ajoutant un processeur d'événements ou une tâche qui consomme de haut Supprimer l'écouteur d'événements ajouté par bind ()}})Après votre inscription, vous pouvez l'utiliser comme ceci dans le modèle Vue.js (n'oubliez pas d'ajouter le préfixe V-):
<div v-my-directive = "SomeValue"> </div>
Lorsque seule la fonction de mise à jour est nécessaire, vous pouvez passer dans une fonction au lieu de l'objet de définition:
Vue.directive ('my-directive', fonction (valeur) {// Cette fonction est utilisée comme mise à jour ()})Propriétés d'instance directive
Toutes les fonctions de crochet seront copiées dans l'objet directif réel, et cela à l'intérieur du crochet pointe vers cet objet directif. Cet objet expose certaines propriétés utiles:
• EL: l'élément lié à la directive.
• VM: le contexte ViewModel qui détient l'instruction.
• Expression: l'expression de la directive, à l'exclusion des paramètres et des filtres.
• Arg: paramètres de la directive.
• Nom: le nom de la directive, sans préfixe.
• Modificateurs: un objet contenant des modificateurs pour les directives.
• Descripteur: un objet contenant les résultats d'analyse d'une directive.
Vous devez traiter ces propriétés comme en lecture seule et ne pas les modifier. Vous pouvez également ajouter des propriétés personnalisées à l'objet directif, mais veillez à ne pas écraser les propriétés internes existantes.
Exemple:
<div id = "Demo" V-Demo: Hello.ab = "msg"> </div>
Vue.Directive ('Demo', {bind: function () {console.log ('Demo Bound!')}, Update: function (value) {this.el.innerhtml = 'name -' + this.name + '<br>' + 'expression -' + this.expression + '<br>' + 'argument -' + this.arg + '<br>' + '+' + '. JSON.Stringify (this.modificateurs) + '<br>' + 'valeur -' + valeur}}) var démo = new vue ({el: '#demo', data: {msg: 'bonjour!'}})Objet littéral
Si la directive nécessite plusieurs valeurs, vous pouvez transmettre un lital d'objet JavaScript. N'oubliez pas que les directives peuvent utiliser n'importe quelle expression JavaScript légale:
<div v-demo = "{Color: 'White', texte: 'Bonjour!' } "> </div>
Vue.directive ('démo', fonction (valeur) {console.log (value.color) // "blanc" console.log (value.text) // "Bonjour!"})Modificateur littéral
Lorsque la directive utilise un modificateur littéral, sa valeur sera traitée comme une chaîne normale et transmise à la méthode de mise à jour. La méthode de mise à jour ne sera appelée qu'une seule fois, car une chaîne normale ne peut pas répondre aux modifications de données.
<div v-demo.literal = "foo bar baz">
Vue.directive ('démo', fonction (valeur) {console.log (valeur) // "foo bar baz"})Directive élémentaire
Parfois, nous voulons utiliser des directives sous forme d'éléments personnalisés, pas sous forme de fonctionnalités. Ceci est très similaire à la directive "E" d'Angular. Les instructions d'élément peuvent être considérées comme un composant léger. Vous pouvez enregistrer une directive d'élément personnalisée comme ce qui suit:
Vue.ElementDirective ('my-directive', {// api bind: function () {// operation this.el ...}})N'écrivez pas comme ceci:
<div v-my-directive> </div>
Écrivez de cette façon:
<y-directive> </y-directive>
Une instruction d'élément ne peut pas accepter des paramètres ou des expressions, mais il peut lire les caractéristiques d'un élément pour déterminer son comportement.
Contrairement aux instructions ordinaires, les instructions d'élément sont finales, ce qui signifie qu'une fois que Vue rencontrera une instruction d'élément, elle sautera l'élément et ses éléments enfants - seule l'instruction de l'élément lui-même peut fonctionner sur l'élément et ses éléments enfants.
Options avancées
paramètres
Les directives personnalisées peuvent recevoir un tableau de paramètres, spécifiant une liste de fonctionnalités, et le compilateur VUE extraire automatiquement ces fonctionnalités des éléments liés. Par exemple:
<div V-Example A = "Hi"> </div>
Vue.Directive ('Exemple', {params: ['a'], bind: function () {console.log (this.params.a) // -> "hi"}})Cette API prend également en charge les propriétés dynamiques. this.params [clé] sera automatiquement mis à jour. De plus, un rappel peut être spécifié pour appeler lorsque la valeur change:
<div V-Example V-Bind: a = "SomeValue"> </div>
Vue.Directive ('Exemple', {params: ['a'], paramwatchers: {a: function (val, oldval) {console.log ('a changé!')}}})Semblable aux accessoires, le nom du paramètre de directif utilise le style de camecase en JavaScript, et le style de cas de kebab correspond au HTML. Par exemple, supposons qu'il existe un paramètre «Disable-Effect» dans le modèle, accédez-y en JavaScript avec «DisableEffect».
profond
Si une directive personnalisée est utilisée sur un objet et que la mise à jour est déclenchée lorsque les propriétés internes de l'objet changent, spécifiez Deep: TRUE dans l'objet de définition directive.
<div v-my-directive = "obj"> </div>
Vue.directive ('my-directive', {Deep: true, update: function (obj) {// appelé lorsque les propriétés imbriquées de `obj` changent}})twoway
Si la directive souhaite réécrire des données sur l'instance Vue, spécifiez Twoway: true dans l'objet de définition de la directive. Cette option permet d'utiliser ce.set (valeur) dans les directives:
Vue.directive ('example', {twoway: true, bind: function () {this.handler = function () {// réécrire les données à vm // si la directive relie V-example = "ABC" comme this // il définira `vm.abc` avec la valeur donnée this.set (this.el.value)}. this.handler)}, unstind: function () {this.el.removeeventListener ('input', this.handler)}})étapement
Passer à l'acceptation: True permet aux directives personnalisées d'accepter les instructions en ligne, tout comme V-on:
<div v-my-directive = "a ++"> </div>
Vue.Directive ('My-Directive', {AcceptStatement: true, Update: Fonction (FN) {// La valeur entrante est une fonction // L'instruction "A ++" sera calculée dans la portée de l'instance d'appartenance lorsqu'elle est appelée}})Utilisez judicieusement car généralement vous souhaitez éviter les effets secondaires de votre modèle.
Terminal
1.0.19+
Vue compile les modules en traversant récursivement l'arbre Dom. Mais lorsqu'il rencontre une directive terminale, elle cesse de traverser les éléments descendant de cet élément. Cette directive reprendra la tâche de compiler cet élément et ses descendants. V-IF et V-FOR sont des directives terminales.
L'écriture de directives de terminaux personnalisées est un sujet de haut niveau et nécessite une meilleure compréhension du processus de compilation de Vue, mais cela ne signifie pas qu'il est impossible d'écrire des directives de terminal personnalisées. Utilisez Terminal: True pour spécifier une directive sur le terminal personnalisé et peut également avoir besoin d'utiliser Vue.fragmentFactory pour compiler partiel. Voici une directive de terminal personnalisée qui compile son modèle de contenu et injecte les résultats dans un autre endroit sur la page:
var fragmentfactory = vue.fragmentfactoryvar retire = vue.util.removevar createanchor = vue.util.createanchorvue.directive ('inject', {terminal: true: bind: function () {var contener = document.getelementyid (this.arg) this.anchor = createAnchor ('V-inject) Container.ApendChild (this.anchor) supprimer (this.el) var factory = new fragmentfactory (this.vm, this.el) this.frag = factory.create (this._host, this._scope, this._frag) this.frag.before (this.anchor)}, upnd: function () {this.frag.ragove<div id = "modal"> </div> ... <div v-inject: modal> <h1> en-tête </h1> <p> corps </p> <p> pied </p> </div>
Si vous souhaitez rédiger des directives de terminal personnalisées, il est recommandé de lire le code source des directives terminales intégrées, telles que V-IF et V-FOR, afin de mieux comprendre les mécanismes internes de Vue.
priorité
Vous pouvez attribuer une priorité à l'instruction. Si ce n'est pas spécifié, la commande par défaut pour la commande normale est de 1000, et la par défaut pour la commande Terminal est 2000. Les instructions avec une priorité plus élevée sur le même élément seront traitées plus tôt que les autres instructions. Les directives avec la même priorité sont traitées dans l'ordre dans lequel ils apparaissent dans la liste des propriétés des éléments, mais il ne peut pas être garanti que cette commande est cohérente dans différents navigateurs.
La priorité des directives intégrées peut être consultée dans l'API. De plus, les instructions de contrôle du processus V-IF et V-FOR ont toujours la priorité la plus élevée pendant le processus de compilation.
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.