Résumer quelques méthodes de stockage de Vue.js

Vue.js est un framework JavaScript populaire qui comprend de nombreux outils pratiques pour accélérer le développement. Parmi eux, sa méthode de stockage de données est très puissante et flexible. Voici quelques méthodes de stockage Vue.js.

1. stockage des attributs de données

L'attribut de données de Vue.js est le principal moyen de stocker des données. Lorsque le composant est monté, Vue.js liera les propriétés des données à la page. Ces propriétés sont accessibles via la syntaxe du modèle et sont accessibles dans le code JavaScript à l'aide de celle-ci.

Par exemple, le code suivant définit un composant Vue.js nommé App et stocke une chaîne nommée message dans l'attribut data :

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js!'
    }
  }
}
</script>

Dans cet exemple, lorsque le composant est monté, Vue js liera automatiquement l'attribut message à. le modèle. Ainsi, le résultat du rendu du composant sera un élément div contenant le texte « Bonjour, Vue.js !

2. stockage des attributs calculés

En plus des attributs de données ordinaires, Vue.js fournit également des attributs calculés pour stocker les attributs calculés. L'attribut calculé peut être calculé sur la base de la valeur d'un ou plusieurs attributs de données et les résultats peuvent être mis en cache.

Par exemple, le code suivant définit un composant Vue.js nommé App et stocke une chaîne nommée firstName et lastName dans la propriété data, ainsi qu'une propriété calculée fullName :

<template>
  <div>
    {{ fullName }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
    }
  }
}
</script>

Dans cet exemple, l'attribut fullName calcule un name basé sur les valeurs de firstName et lastName et met en cache le résultat. fullName est automatiquement recalculé chaque fois que firstName ou lastName change.

3. stockage des attributs de méthodes

L'attribut méthodes de Vue.js peut stocker un ensemble de méthodes similaires aux fonctions. Contrairement à l'attribut data et à l'attribut calculé, les méthodes de l'attribut méthodes sont généralement utilisées pour gérer les événements d'interaction utilisateur.

Par exemple, le code suivant définit un composant Vue.js nommé App et stocke une méthode nommée greet dans l'attribut méthodes :

<template>
  <div>
    <button @click="greet">Greet!</button>
  </div>
</template>

<script>
export default {
  methods: {
    greet() {
      alert('Hello, Vue.js!')
    }
  }
}
</script>

Dans cet exemple, lorsque l'utilisateur clique sur le bouton, Vue js appellera la méthode greet et. fait apparaître une boîte de dialogue contenant le texte « Bonjour, Vue.js ! »

4. stockage de l'attribut props

L'attribut props de Vue.js peut stocker les données du composant parent. Lorsqu'un composant souhaite afficher des données dans son composant parent, il peut utiliser l'attribut props pour stocker les données.

Par exemple, le code suivant définit un composant Vue.js nommé MyButton et stocke une chaîne nommée text dans l'attribut props :

<template>
  <button>{{ text }}</button>
</template>

<script>
export default {
  props: {
    text: String
  }
}
</script>

Dans cet exemple, le composant MyButton peut être récupéré du parent via l'attribut props. Obtenez une chaîne texte nommé à partir du composant et affichez-le dans l'élément bouton. Le composant parent peut utiliser le composant MyButton et définir son attribut props comme suit :

<template>
  <my-button text="Click me!"></my-button>
</template>

<script>
import MyButton from './MyButton.vue'

export default {
  components: {
    MyButton
  }
}
</script>

Dans cet exemple, le composant parent peut transmettre une chaîne nommée "Click me!" comme attribut de texte au composant MyButton et MyButton Le composant apparaît comme un bouton avec le texte "Cliquez sur moi !"

Résumé

Vue.js propose de nombreuses façons de stocker des données, notamment les attributs de données, les attributs calculés, les attributs de méthodes et les attributs d'accessoires. La maîtrise de ces méthodes peut nous aider à mieux utiliser les outils pratiques fournis par Vue.js et à obtenir une meilleure efficacité de développement.

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!