La feuille de triche Vue.js

Commandes et instructions courantes que vous utiliserez dans vos sessions de codage Vue.js quotidiennes

Directives

Les directives sont des attributs identifiés par lev-préfixe.

Directif Description
v-text utilise la propriété comme valeur de texte de l'élément
v-html utilise la propriété comme valeur de texte de l'élément, interprétant le HTML
v-if afficher un élément uniquement si le conditionnel est vrai
v-else montre un élément alternatif si le précédentv-ifc'est faux
v-else-if ajoute un bloc else if pour unv-ifconstruction
v-show semblable àv-if, mais ajoute l'élément au DOM même s'il est faux. Réglez-le simplement surdisplay: none.
v-for itère sur un tableau ou un objet itérable
v-on écouter les événements DOM
v-bind mettre à jour de manière réactive un attribut HTML
v-model met en place une liaison bidirectionnelle pour les entrées de formulaire. utilisé dans les éléments de formulaire, met à jour le modèle lorsque l'utilisateur modifie la valeur du champ de formulaire
v-once applique la propriété une seule fois et ne la rafraîchit jamais même si les données transmises changent

v-bindetv-onont un format abrégé:

<a v-bind:href="url">...</a>
<a :href="url">...</a>
<a v-on:click="doSomething">...</a>
<a @click="doSomething">...</a>

Exemple dev-if/v-else/v-else-if:

<div v-if="type === 'A'">
  it's A
</div>
<div v-else-if="type === 'B'">
  it's B
</div>
<div v-else-if="type === 'C'">
  it's C
</div>
<div v-else>
  it's neither one
</div>

Conditionnels

Vous pouvez incorporer un conditionnel dans une expression à l'aide de l'opérateur ternaire:

{{ isTrue ? 'yes' : 'no' }}

Travailler avec des éléments de formulaire

Pour effectuer la mise à jour du modèle lorsque l'événement de modification se produit, et non à chaque fois que l'utilisateur appuie sur une touche, vous pouvez utiliserv-model.lazyau lieu de justev.model.

Travailler avec les champs de saisie,v-model.trimest utile car il supprime automatiquement les espaces.

Et si vous acceptez un nombre au lieu d'une chaîne, assurez-vous d'utiliserv-model.number.

Modifier les événements

j'utiliseclickà titre d'exemple, mais s'applique à tous les événements possibles

  • v-on:click.nativedéclencher un événement DOM natif au lieu d'un événement Vue
  • v-on:click.stoparrêter la propagation de l'événement de clic
  • v-on:click.passiveutilise leoption passive de addEventListener
  • v-on:click.captureutiliser la capture d'événements au lieu de la création de bulles
  • v-on:click.selfassurez-vous que l'événement de clic ne provient pas d'un événement enfant, mais s'est produit directement sur cet élément
  • v-on:click.oncel'événement ne sera déclenché qu'une seule fois
  • v-on:submit.prevent: appelerevent.preventDefault()sur l'événement d'envoi déclenché, utilisé pour éviter l'envoi d'un formulaire pour recharger la page

Pour en savoir plus sur la propagation, le bouillonnement / la capture, consultez monGuide des événements JavaScript.

Modificateurs d'événements de souris

  • v-on:click .leftse déclenche uniquement par un clic gauche
  • v-on:click .rightse déclenche uniquement en cliquant avec le bouton droit de la souris
  • v-on:click .middlese déclenche uniquement en cliquant sur le bouton central de la souris

Soumettre un événement uniquement si une touche particulière est enfoncée

  • v-on:keyup.enter
  • v-on:keyup.tab
  • v-on:keyup.delete
  • v-on:keyup.esc
  • v-on:keyup.up
  • v-on:keyup.down
  • v-on:keyup.left
  • v-on:keyup.right

Modificateurs d'événements de clavier

Ne déclenchez l'événement que si une touche du clavier particulière est également enfoncée:

  • .ctrl
  • .alt
  • .shift
  • .meta(cmd sur Mac, touche Windows sur Win)

v-bind

  • v-bind .proplier un accessoire au lieu d'un attribut
  • v-bind .camelutilisez camelCase pour le nom d'attribut
  • v-bind .syncun sucre syntaxique qui se développe en unv-ongestionnaire pour mettre à jour la valeur liée. Voirce.

Crochets de cycle de vie

  • beforeCreateappelé avant la création de l'application
  • createdappelé après la création de l'application
  • beforeMountappelé avant que l'application ne soit montée sur le DOM
  • mountedappelé après le montage de l'application sur le DOM
  • beforeDestroyappelé avant que l'application ne soit détruite
  • destroyedappelé après la destruction de l'application
  • beforeUpdateappelé avant la mise à jour d'une propriété
  • updatedappelé après la mise à jour d'une propriété
  • activatedappelé lorsqu'un composant maintenu en vie est activé
  • deactivatedappelé lorsqu'un composant maintenu en vie est désactivé

Composants intégrés

Vue fournit 5 composants intégrés:

  • <component>
  • <transition>
  • <transition-group>
  • <keep-alive>
  • <slot>

Configuration globale de l'objet Vue

LeVue.configobject possède ces propriétés, que vous pouvez modifier lorsque vous créez l'instance:

Biens Description
silent la valeur par défaut est false, si true supprime les journaux et les avertissements
optionMergeStrategies permet de définir unstratégie de fusion personnaliséepour les options
devtools La valeur par défaut est true en développement et false en production. Vous pouvez remplacer ces valeurs.
errorHandler permet de définir une fonction de gestionnaire d'erreurs. Utile pour accrocher Sentry et d'autres services similaires
warnHandler permet de définir une fonction de gestionnaire d'avertissement, similaire àerrorHandler, mais pour des avertissements plutôt que des erreurs
ignoredElements utilisé pour laisser Vue ignorer les éléments personnalisés définis en dehors de celui-ci, commeComposants Web.
keyCodes vous permettent de définir des alias de clé personnalisés pourv-on
performance la valeur par défaut est false. S'il est défini sur true, retrace les performances des composants Vue dans le navigateur DevTools.
productionTip la valeur par défaut est true. Définissez sur false pour désactiver l'avertissement «vous êtes en mode développement» pendant le développement dans la console.

Méthodes de l'objet Vue

Méthode Description
Vue.extend permet de sous-classer l'objet Vue, de créer un profil personnalisé
Vue.nextTick reporte le rappel à exécuter après le prochain cycle de mise à jour du DOM
Vue.set ajouter une propriété à l'objet
Vue.delete supprimer une propriété de l'objet
Vue.directive définir (ou obtenir) une directive globale
Vue.filter définir (ou obtenir) un filtre global
Vue.component définir (ou obtenir) un composant global
Vue.use installer un plugin Vue.js
Vue.mixin définir un mixin global
Vue.compile compiler une chaîne de modèle dans une fonction de rendu
Vue.version renvoie la version actuellement installée de Vue

Options passées à un objet Vue

Lors de l'initialisation d'un objet Vue, vous passez un objet:

const vm = new Vue({

})

Cet objet accepte un certain nombre de propriétés.

Biens Description
data permet de transmettre un ensemble de données réactives qui seront utilisées par l'application Vue. Toutes les propriétés réactives doivent être ajoutées au moment de l'initialisation, vous ne pouvez pas en ajouter de nouvelles ultérieurement.
props c'est un ensemble d'attributs qui sont exposés aux composants parents en tant que données d'entrée.
propsData données par défaut pour les accessoires. Seulement utile pendant les tests
methods un ensemble de méthodes définies sur l'instance Vue
computed comme les méthodes, mais mis en cache en interne
watch permet de regarder les propriétés et d'appeler une fonction lorsqu'elles changent

Exemple de définition de données, méthodes et propriétés calculées:

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  methods: {
    reverseMessageAsMethod: function () {
      return this.message.split('').reverse().join('')
    }
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

console.log(vm.reverseMessageAsMethod) // => ‘olleH’ vm.message = ‘Goodbye’ console.log(vm.reversedMessage) // => ‘eybdooG’

DOM

  • eldéfinit l'élément DOM sur lequel l'instance se monte. Cela peut être un sélecteur CSS ou un HTMLElement
  • templateest un modèle, représenté sous forme de chaîne, qui remplacera l'élément monté
  • renderou pour définir le modèle, vous pouvez définir un modèle à l'aide d'une fonction de rendu
  • renderErrordéfinir une sortie alternative lorsque la fonction associée àrenderéchoue

Actifs de l'instance Vue

  • directivesl'ensemble des directives à associer à l'instance Vue
  • filtersl'ensemble de filtres à associer à l'instance Vue
  • componentsl'ensemble des composants à associer à l'instance Vue

Options de composition de la vue

  • parentspécifie l'instance parente
  • mixinsdéfinit un tableau d'objets mixin
  • extendsétendre un autre composant

Autres options d'objet Vue

  • nameattribuer un nom au composant vous permet de l'invoquer, utile dans le débogage ou lorsque vous avez besoin d'ajouter de manière récursive un composant dans son modèle
  • functionalsi true, définit le composant comme étant sans état (nondata) et sans instanc (nonthis), ce qui le rend plus léger
  • modelpermet de personnaliser la propriété utilisée dans les événements, utile par exemple lors de l'interaction avec les formulaires
  • commentsla valeur par défaut est false. S'il est défini sur true, conserve les commentaires HTML placés dans les modèles

Propriétés de l'instance

Étant donné une instance de Vue, stockée dans une variableconst vm = new Vue(/*...*/), vous pouvez l'inspecter et interagir avec elle.

Propriétés d'une instance de Vue

  • vm.$datal'objet de données associé à l'instance
  • vm.$propsles accessoires que l'instance a reçus
  • vm.$ell'élément DOM auquel l'instance est liée
  • vm.$optionsl'objet utilisé pour instancier l'instance Vue
  • vm.$parentl'instance parente
  • vm.$rootl'instance racine (s'il s'agit de l'instance racine, celle-ci pointe vers elle-même)
  • vm.$childrenun tableau d'instances enfants
  • vm.$slotsun tableau des emplacements associés contenus dans le modèle
  • vm.$scopedSlotsun tableau des emplacements de portée associés
  • vm.$refsun objet qui contient une propriété pour chaque élément pointé par unrefattribut défini dans le modèle
  • vm.$isServertrue si l'instance Vue est en cours d'exécution sur le serveur (utile dans le rendu côté serveur)
  • vm.$attrsun objet d'attributs fournis au composant mais non définis comme accessoires
  • vm.$listenersun objet dev-onécouteurs d'événements affectés au composant

Données sur les méthodes

  • vm.$watchconfigurer un observateur pour les changements de propriété dans les données Vue. Il peut également surveiller les changements de valeur à l'intérieur des objets
  • vm.$setdéfinir une propriété
  • vm.$deletesupprimer une propriété

Événements

  • vm.$emitdéclenche un événement personnalisé sur levmInstance Vue
  • vm.$onécouter un événement personnalisé sur levmInstance Vue
  • vm.$onceaimer$on, mais n'écoute qu'une seule fois
  • vm.$offsupprime un écouteur d'événement de l'instance Vue

Méthodes du cycle de vie

  • vm.$mountmonter une instance Vue sur un élément DOM, au cas où elle n'aurait pas encore été montée
  • vm.$forceUpdateforcer levmInstance Vue à restituer. Ne force pas le rendu des composants enfants.
  • vm.$nextTickaccepte un rappel et planifie cela pour le prochain cycle de mise à jour du DOM
  • vm.$destroydétruit l'application et supprime tous les composants enfants, observateurs et écouteurs

Téléchargez mon gratuitManuel de Vue


Plus de tutoriels vue: