Maison > Article > interface Web > Comment configurer une page statique dans vue

Comment configurer une page statique dans vue

PHPzoriginal: 2023-04-13 09:11:162486parcourir

Avant-propos

Vue est un framework front-end populaire grâce à Vue, nous pouvons facilement créer des pages dynamiques. Mais parfois, nous devons créer des pages statiques. Cet article explique comment utiliser Vue pour créer des pages statiques.

Pages statiques de Vue

Dans Vue, nous pouvons créer des pages statiques sous la forme de "Single File Component". Les composants à fichier unique sont des fichiers avec le suffixe .vue. Les composants Vue peuvent organiser le code HTML, CSS et JavaScript en un composant indépendant et réutilisable.

Ce qui suit est un simple composant Vue à fichier unique :

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'StaticPage',
  data() {
    return {
      title: '这是一个静态页面',
      content: '欢迎使用Vue创建静态页面。'
    };
  }
};
</script>

<style>
h1 {
  font-size: 32px;
  color: #333333;
}
p {
  font-size: 24px;
  color: #666666;
}
</style>

Le code ci-dessus définit un composant Vue nommé StaticPage, en utilisant deux attributs de données titre et contenu dans le modèle, et en les liant à la page. Deux styles de sélecteur h1 et p sont définis dans le style.

L'utilisation de Vue pour créer des pages statiques présente les avantages suivants :

Liaison de données : contrairement aux pages statiques qui nécessitent une modification manuelle du contenu dans les balises, Vue lie les données à la page pour réaliser des mises à jour automatisées
Organisation du code : HTML ; , CSS et JavaScript sont organisés en un composant indépendant pour simplifier le code ;
Réutilisabilité : les composants Vue sont indépendants et peuvent être réutilisés dans différentes pages, améliorant ainsi la réutilisabilité du code.

Comment utiliser les pages statiques dans Vue ?

Il y a plusieurs étapes pour créer une page statique à l'aide de Vue :

Installer Vue
Créer un composant de fichier unique
Enregistrer le composant dans l'instance Vue
Ajouter le composant à la page

Ensuite, nous allons étape Ces étapes sont présentées étape par étape.

Installer Vue

Avant d'utiliser Vue, vous devez d'abord l'installer. Nous pouvons installer Vue via npm ou CDN. Dans cet article, nous le présentons en mode CDN :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue Static Page</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Le code ci-dessus présente la bibliothèque Vue et installe Vue globalement.

Créez un composant de fichier unique

Créez un fichier .vue dans le répertoire du projet Voici un exemple de composant de fichier unique pour une simple page statique :

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'StaticPage',
  data() {
    return {
      title: '这是一个静态页面',
      content: '欢迎使用Vue创建静态页面。'
    };
  }
};
</script>

<style>
h1 {
  font-size: 32px;
  color: #333333;
}
p {
  font-size: 24px;
  color: #666666;
}
</style>

Enregistrez le composant dans l'instance Vue

. Dans l'instance Vue Enregistrez le composant que vous venez de créer dans :

Vue.component('static-page', staticPage);

Nommez le composant "static-page" ici.

Ajoutez le composant à la page

Ajoutez le composant à la page avec le code suivant :

<div id="app">
  <static-page></static-page>
</div>

Le code ci-dessus ajoute le composant à la balise div avec l'identifiant "app".

Exemple complet de page statique Vue

Ce qui suit est un exemple complet de page statique Vue :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue Static Page</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
      <static-page></static-page>
    </div>
    
    <template id="static-page-template">
      <div>
        <h1>{{ title }}</h1>
        <p>{{ content }}</p>
      </div>
    </template>
    
    <script>
      var staticPage = {
        template: '#static-page-template',
        data() {
          return {
            title: '这是一个静态页面',
            content: '欢迎使用Vue创建静态页面。'
          };
        }
      };
    
      new Vue({
        el: '#app',
        components: {
          'static-page': staticPage
        }
      });
    </script>
    
    <style>
      h1 {
        font-size: 32px;
        color: #333333;
      }
      p {
        font-size: 24px;
        color: #666666;
      }
    </style>
  </body>
</html>

Le code ci-dessus définit une instance Vue et enregistre le composant staticPage dans l'instance. Le composant utilise le modèle avec l'identifiant "static-page-template", utilise deux attributs de données title et content dans le modèle et les lie à la page. Deux styles de sélecteur h1 et p sont définis dans le style.

Conclusion

Cet article présente brièvement comment utiliser Vue pour créer des pages statiques. Les pages statiques de Vue présentent les avantages de la liaison de données, de l'organisation du code et de la réutilisabilité, et conviennent à la création de sites Web statiques de petite et moyenne taille. Grâce à l'introduction de cet article, j'espère que les lecteurs pourront mieux comprendre l'utilisation de Vue.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Une analyse approfondie de la conception CSS sous différentes résolutionsArticle suivant：Une analyse approfondie de la conception CSS sous différentes résolutions

Articles Liés

Voir plus