Que sont les directives vue.js

Les instructions vue.js sont de nombreuses instructions intégrées, telles que [v-if] et [v-show]. Ces instructions riches peuvent répondre à la plupart de nos besoins commerciaux. Les instructions personnalisées ont des fonctions de hook telles que. [lier, inséré, mettre à jour].

L'environnement d'exploitation de ce tutoriel : système windows10, vue2.9, cet article est applicable à toutes les marques d'ordinateurs.

[Recommandations d'articles connexes : vue.js]

Question 1 : Que sont les instructions personnalisées dans vue.js ?

Personnalisez certaines instructions pour opérer sur le DOM sous-jacent

Plus de références

Vue possède de nombreuses instructions intégrées, telles que v-if et v-show. Ces instructions riches peuvent répondre à la plupart de nos besoins professionnels, mais lorsque nous avons besoin de certaines fonctions spéciales, nous souhaitons toujours effectuer des opérations de bas niveau sur le DOM, et nous devons ensuite utiliser des instructions personnalisées.

Question 2 : Plusieurs fonctions hook d'instructions personnalisées

• bind : appelée une seule fois, lorsque l'instruction est liée à un élément pour la première fois appel de temps. Les paramètres d'initialisation uniques peuvent être effectués ici.

• inséré : Appelé lorsque l'élément lié est inséré dans le nœud parent (seul le nœud parent est garanti d'exister, mais pas nécessairement inséré dans le document).

• update : Appelé lorsque le VNode du composant est mis à jour, mais peut se produire avant que son VNode enfant ne soit mis à jour. La valeur de la directive peut avoir changé ou non. Mais vous pouvez ignorer les mises à jour inutiles des modèles en comparant les valeurs avant et après la mise à jour.

• componentUpdated : Appelé après que tous les VNode du composant où se trouve l'instruction et ses sous-VNodes ont été mis à jour.

• unbind : Appelé une seule fois, lorsque l'instruction n'est pas liée à l'élément.

Question 3 : Paramètres de la fonction Hook

Sauf el, les autres paramètres doivent être en lecture seule et ne doivent pas être modifiés. Si vous devez partager des données entre des hooks, il est recommandé de le faire via l'ensemble de données de l'élément.

La fonction hook de commande sera passée dans les paramètres suivants :

1. el : L'élément lié à la commande peut être utilisé pour faire fonctionner directement le DOM.

2. liaison : un objet contenant les attributs suivants :

• name : nom de la commande, à l'exclusion du préfixe v-.

• value : La valeur de liaison de la directive, par exemple : v-my-directive="1 + 1", la valeur de liaison est 2.

• oldValue : La valeur précédente de la liaison d'instruction, disponible uniquement dans les hooks update et componentUpdated. Disponible même si la valeur a changé.

• expression : expression d'instruction sous forme de chaîne. Par exemple, dans v-my-directive="1 + 1", l'expression est "1 + 1".

• arg : paramètres passés à la commande, facultatifs. Par exemple, dans v-my-directive:foo, le paramètre est « foo ».

• modificateurs : Un objet contenant des modificateurs. Par exemple : dans v-my-directive.foo.bar, l'objet modificateur est { foo: true, bar: true }.

• vnode : Le nœud virtuel généré par la compilation Vue.

3. oldVnode : le nœud virtuel précédent, disponible uniquement dans les hooks update et ComponentUpdated.

Question 4 : Comment utiliser les instructions personnalisées dans vue-cli ?

Structure du fichier :

.
├── src
│   ├── directives
│   │    ├── index.js
│   │    ├── modules
│   └── main.js
└── ...

Créer foucs.js sous modules

// 聚焦指令
export default {
  bind (el, binding, vnode) {},
  inserted (el, binding, vnode) {
    el.focus()
  },
  update (el, binding, vnode) {},
  componentUpdated (el, binding, vnode) {},
  unbind (el, binding, vnode) {}
}

Sous src/directives/index.js

import focus from './modules/focus'
export {focus}

Sous src/ main.js, utilisez les instructions personnalisées des directives

//引入自定义指令
import * as directives from './directives'
//注册指令
Object.keys(directives).forEach(k => Vue.directive(k, directives[k]));

et utilisez

<input v-focus type="text" />

dans le composant .vue Recommandations d'apprentissage gratuites associées : JavaScript (vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!