La feuille de triche Vue.js

• Directives
  • Conditionnels
• Travailler avec des éléments de formulaire
• Modifier les événements
• Modificateurs d'événements de souris
• Soumettre un événement uniquement si une touche particulière est enfoncée
• Modificateurs d'événements de clavier
• Crochets de cycle de vie
• Composants intégrés
• Configuration globale de l'objet Vue
• Méthodes de l'objet Vue
• Options passées à un objet Vue
  • DOM
  • Actifs de l'instance Vue
  • Options de composition de la vue
  • Autres options d'objet Vue
• Propriétés de l'instance
  • Propriétés d'une instance de Vue
  • Données sur les méthodes
  • Événements
  • Méthodes du cycle de vie

Directives

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

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:

Méthodes de l'objet 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.

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

Plus de tutoriels vue:

• Un aperçu de Vue.js
• La CLI Vue.js: apprenez à l'utiliser
• Les DevTools Vue.js
• Configurer VS Code pour le développement Vue
• Créez votre première application avec Vue.js
• Composants de fichier unique Vue.js
• Modèles et interpolations Vue.js
• Directives Vue.js
• Méthodes Vue.js
• Propriétés calculées Vue.js
• Styliser les composants Vue.js à l'aide de CSS
• Observateurs Vue.js
• Méthodes Vue vs observateurs vs propriétés calculées
• Filtres Vue.js
• Composants Vue.js
• Machines à sous Vue.js
• Accessoires de composants Vue.js
• Événements Vue.js
• Communication des composants Vue.js
• Vuex, le gestionnaire d'état de Vue.js
• Vue, utilisez un composant à l'intérieur d'un autre composant
• Vue, comment utiliser un accessoire comme nom de classe
• Comment utiliser SCSS avec les composants de fichier unique Vue.js
• Utilisation de Tailwind avec Vue.js
• Le routeur Vue
• Afficher dynamiquement un composant Vue
• La feuille de triche Vue.js
• Stocker les données Vue sur localStorage à l'aide de Vuex
• Comment appliquer dynamiquement une classe à l'aide de Vue
• Vue, comment utiliser v-model
• Vue, pourquoi les données doivent être une fonction
• Roadmap to become a Vue.js developer in 2020