Comment implémenter des formulaires réactifs et des composants de formulaire personnalisés sous Vue ?

Vue est un framework JavaScript couramment utilisé qui fournit des outils très pratiques et puissants pour traiter la saisie de formulaire. Vue fournit des propriétés et des événements réactifs qui nous permettent de gérer facilement la saisie, la validation et la soumission de formulaires. Cet article expliquera comment implémenter des formulaires réactifs et des composants de formulaire personnalisés sous Vue.

1. Implémentation du formulaire réactif Vue

1. Liaison du modèle de formulaire

Vue fournit un moyen très simple de réaliser saisie des données du formulaire et réponse automatique. Grâce à la directive v-model, nous pouvons lier chaque champ de saisie du formulaire aux attributs de données de l'instance Vue pour obtenir une liaison de données bidirectionnelle.

Par exemple : nous pouvons implémenter un formulaire simple via le code suivant, dans lequel la valeur de l'entrée est liée à l'attribut de message dans les données via v-model. Lorsque nous saisissons du contenu dans la zone de saisie, le contenu de la zone de saisie et la valeur de l'attribut de message dans les données seront mis à jour simultanément : ## 🎜🎜#La validation de formulaire est une tâche inévitable dans notre développement web quotidien. Vue fournit également un moyen unique de gérer la validation du formulaire. En combinant l'attribut calculé et l'attribut watcher avec la directive v-model, nous pouvons facilement implémenter la validation des valeurs du formulaire.

Par exemple : nous pouvons mettre en œuvre une simple vérification de formulaire via le code suivant. Lorsque l'utilisateur saisit un mot de passe, nous vérifions le mot de passe via l'attribut calculé et l'attribut watcher, puis demandons à l'utilisateur la force. du mot de passe : #🎜🎜 #

<template>
  <div>
    <input type="text" v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "",
    };
  },
};
</script>

Soumission de formulaire

La soumission de formulaire est une fonction essentielle de Vue Grâce à la directive v-on et à l'attribut méthodes, nous pouvons lier l'événement de soumission de formulaire Définir une méthode Vue. Lorsque l'utilisateur remplit le formulaire et clique sur le bouton Soumettre, Vue appellera cette méthode et transmettra les données du formulaire en paramètre. Nous pouvons traiter les données soumises par l'utilisateur dans cette méthode.

Par exemple : nous pouvons implémenter une soumission de formulaire simple via le code suivant : lorsque l'utilisateur clique sur le bouton de soumission, nous pouvons formater les données du formulaire en JSON et les afficher dans la console :

.

<template>
  <div>
    <label>请输入密码：</label>
    <input type="password" v-model="password" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      password: "",
    };
  },

  computed: {
    message() {
      let pwd = this.password;
      if (pwd.length <= 5) return "密码强度较弱";
      if (pwd.length <= 9) return "密码强度一般";
      return "密码强度较高";
    },
  },

  watch: {
    password(newVal, oldVal) {
      console.log(newVal, oldVal);
      if (newVal.length >= 10) {
        alert("密码长度不能超过10");
        this.password = oldVal;
      }
    },
  },
};
</script>

3. 2. Implémentation de composants de formulaire personnalisés

En plus des composants de formulaire intégrés fournis par Vue, nous pouvons également définir certains composants de formulaire personnalisés en fonction de nos propres besoins pour réaliser la réutilisation du code et des effets logiques.

Vue fournit la méthode Vue.component() pour définir un composant personnalisé. Il nous suffit de définir un composant via la méthode Vue.component(), puis d'utiliser ce composant dans le modèle.

Ce qui suit est un exemple de composant personnalisé simple, qui contient un composant de champ de formulaire défini par l'utilisateur et un composant de bouton intégré. Dans ce composant, nous mettons le composant de champ de formulaire défini par l'utilisateur et le composant de bouton intégré dans le même formulaire. Lorsque l'utilisateur clique sur le bouton, une demande de soumission de données sera émise.

<template>
  <div>
    <label>请输入用户名：</label>
    <input type="text" v-model="username" />

    <label>请输入密码：</label>
    <input type="password" v-model="password" />

    <button v-on:click="submitForm">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },

  methods: {
    submitForm() {
      let formData = {
        username: this.username,
        password: this.password,
      };

      console.log(JSON.stringify(formData));
    },
  },
};
</script>

Résumé :

Implémenter des formulaires réactifs et des composants de formulaires personnalisés sous Vue est l'une des compétences essentielles dans notre développement web. Grâce à la liaison de données bidirectionnelle de la directive v-model, à la validation de formulaire de l'attribut calculé, au contrôle d'entrée de formulaire de l'attribut watcher et à la définition de composant de formulaire personnalisé de la méthode Vue.component(), nous pouvons facilement implémenter un Système de traitement de formulaires efficace, puissant et facile à entretenir.

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!