Liaison bidirectionnelle et instructions communes des données Vue.js

Liaison bidirectionnelle des données (méthode d'écriture ES6)

Effet :

Lorsque la valeur dans la zone de saisie n'est pas modifiée :

Lors de l'effacement de la valeur dans la zone de saisie :

Ressaisissez la zone de saisie Après Doudou, la valeur liée à {{testData.name}} dans. l'étendue de la page suit les modifications d'entrée lorsque la valeur de la boîte change

Dans Vue.js, vous pouvez utiliser la directive v-model pour créer une liaison de données bidirectionnelle. sur les éléments de formulaire. Et la directive v-model ne peut être utilisée que pour trois balises : , , .

<template>
<div>
 <div class="form-inline mg-top">
  <div class="form-group">
   <label class="control-label">姓名:</label>
   <input type="text" v-model=&#39;testData.name&#39; class="form-control">
   <span class="control-span">姓名变为:{{testData.name}}</span>
  </div>
 </div>
</div>
</template>
 
 
<script>
export default {
 components: {
 },
 ready: function(){
 },
 methods: {
 },
 data() {
 return {
  testData:{
  id:&#39;1&#39;,
  name:&#39;张三&#39;,
  age:&#39;18&#39;
  }
 }
 }
}
</script>

Les composants Vue.js peuvent être compris comme des classes ViewModel avec des comportements prédéfinis. Un composant peut prédéfinir de nombreuses options, mais les principales sont les suivantes :

Modèle (template) : Le modèle déclare la relation de mappage entre les données et le DOM qui est finalement affichée à l'utilisateur.
Enregistrer les composants : après l'enregistrement, vous pouvez appeler un composant enfant en tant qu'élément personnalisé dans le modèle de composant parent.
Données initiales (data) : l'état initial des données d'un composant. Pour les composants réutilisables, il s’agit généralement d’un État privé.
Paramètres externes acceptés (accessoires) : les données sont transférées et partagées entre les composants via des paramètres. Les paramètres sont liés dans un sens (de haut en bas) par défaut, mais peuvent également être explicitement déclarés dans les deux sens.
Méthodes : Les opérations de modification sur les données sont généralement effectuées au sein des méthodes des composants. Les événements d'entrée utilisateur et les méthodes de composants peuvent être liés via la directive v-on.
Hooks de cycle de vie : un composant déclenchera plusieurs fonctions de hook de cycle de vie, telles que créé, attaché, détruit, etc. Dans ces fonctions hook, nous pouvons encapsuler une logique personnalisée. Par rapport au MVC traditionnel, on peut comprendre que la logique du contrôleur est dispersée dans ces fonctions de hook.
Ressources privées (actifs) : dans Vue.js, les instructions, filtres, composants, etc. définis par l'utilisateur sont collectivement appelés ressources. Étant donné que les ressources enregistrées globalement peuvent facilement conduire à des conflits de noms, un composant peut déclarer ses propres ressources privées. Les ressources privées ne peuvent être appelées que par le composant et ses sous-composants.

Instructions communes :

Les soi-disant instructions sont en fait des balises spéciales qui apparaissent dans le modèle. Sur la base de ces balises, le framework sait quelles opérations doivent être effectuées sur le DOM. éléments ici.

Commandes communes :

commande v-if

commande v-show

commande v-else

commande v-for

Directive v-bind

Directive v-on

Directive v-if :

v-if rend les éléments en fonction de la condition vraie ou fausse du valeur d'une expression. L'élément et ses liaisons/composants de données sont détruits et recréés sur le commutateur. Si l'élément est