Paramètres d'actualisation de la page actuelle de la page Web de développement frontal Vue

Avec le développement continu de la technologie Internet, le développement front-end est devenu un métier de plus en plus populaire. En tant qu'ingénieur front-end, nous devons souvent ajouter et implémenter des fonctions spéciales dans les pages Web. Parmi eux, les paramètres d'actualisation des pages sont une fonction très courante, en particulier pour les pages Web qui doivent mettre à jour les données en temps opportun. Dans cet article, nous apprendrons comment utiliser le framework Vue pour implémenter les paramètres d'actualisation de page actuels.

1. Framework Vue

Vue est un framework progressif pour la création d'interfaces utilisateur. Il crée des applications Web complexes en utilisant des idées de composantisation. Vue est un framework léger, facile à apprendre et à comprendre, et adapté à la création rapide d'applications Web. Le framework Vue dispose d'un riche ensemble de fonctions de base et de bibliothèques de plug-ins qui peuvent aider les développeurs à créer des applications Web complexes rapidement et efficacement.

2. Vue implémente les paramètres d'actualisation de la page actuels

Pour plus de commodité, dans cet article, nous utiliserons Vue CLI pour créer un projet Vue. Vue CLI est un outil de ligne de commande permettant de créer rapidement des applications Vue. Le processus d'installation est très simple et peut être installé via npm. Je n’entrerai pas dans les détails ici.

1. Create Vue Project

Tout d'abord, nous devons créer un nouveau projet Vue. Ouvrez un terminal et entrez la commande suivante :

vue create demo

où "demo" est le nom du projet que vous souhaitez créer.

2. Actualiser la page actuelle

Le framework Vue fournit une instruction v-on:click, qui peut déclencher une méthode lorsque l'on clique sur l'élément . Nous pouvons l'utiliser pour actualiser la page actuelle.

Ajoutez le code suivant dans le modèle Vue :

<button v-on:click="refreshPage()">刷新</button>

Ajoutez le code suivant dans la méthode Vue :

methods: {
  refreshPage() {
    window.location.reload()
  },
}

Lorsque l'utilisateur clique sur le bouton , La méthodefreshPage() sera appelée. Il utilise window.location.reload() pour actualiser la page actuelle.

3. Implémenter l'actualisation automatique

En plus d'actualiser manuellement la page, nous pouvons également implémenter la fonction d'actualisation automatique. Vue fournit une fonction de minuterie couramment utilisée setInterval(), qui peut exécuter une fonction périodiquement pour réaliser la fonction de mise à jour automatique des données.

Ajoutez le code suivant dans la fonction hook Mounted() de Vue :

mounted() {
  setInterval(() => {
    window.location.reload()
  }, 10000) //10秒刷新一次
},

Ce code démarrera automatiquement une minuterie lorsque le composant est chargé. Le minuteur appelle la méthode rafraîchirPage() toutes les 10 secondes pour obtenir l'effet de mise à jour automatique des données. Si vous souhaitez définir un temps de mise à jour plus long ou plus court, modifiez l'intervalle de temps dans setInterval().

Pour résumer, le framework Vue est un outil puissant et flexible qui peut nous aider à mettre en œuvre rapidement et facilement les paramètres d'actualisation de page actuels. Au cours de ce processus, nous avons maîtrisé l'utilisation des instructions, des méthodes et des fonctions de minuterie pour implémenter des fonctions d'actualisation manuelle et automatique. Que nous développions un site Web simple ou une application Web complexe, le framework Vue peut nous aider à accomplir le travail plus rapidement.

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!