Maison > Article > interface Web > Comment instancier Vue dans une page HTML

Comment instancier Vue dans une page HTML

PHPzoriginal: 2023-04-26 16:13:33757parcourir

Vue est un framework JavaScript populaire pour créer des applications Web dynamiques. Vue dispose d'une API facile à apprendre et à utiliser qui peut être facilement intégrée aux pages HTML existantes. Dans cet article, nous nous concentrerons sur la façon d'instancier Vue dans une page HTML.

Vue.js est un framework JavaScript léger qui peut être facilement intégré dans des pages HTML. Pour instancier Vue, nous devons définir une instance de Vue comme ceci :

new Vue({
  // options
})

Ici, nous instancions Vue en passant un objet options. L'objet options contient divers paramètres et configurations pour l'application Vue.

Pour intégrer Vue dans une page HTML, téléchargez le fichier Vue.js et incluez-le dans le document HTML. Vous pouvez utiliser un CDN (Content Delivery Network) ou télécharger la bibliothèque Vue.js et la stocker sur votre serveur. Voici un exemple d'utilisation d'un CDN pour inclure Vue :

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Vue Example</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    });
  </script>
</body>
</html>

Dans l'exemple ci-dessus, nous utilisons le CDN Vue.js pour inclure Vue dans notre document HTML. Nous définissons ensuite un élément HTML avec l'identifiant "app", attachons l'instance Vue à l'élément et définissons une propriété appelée "message" dans l'option data de l'instance Vue.

Dans l'option "el" de l'instance Vue, nous indiquons à Vue que nous souhaitons attacher l'application Vue à l'élément HTML avec l'identifiant "app". De cette façon, Vue trouvera l'élément dans la page HTML et utilisera le moteur de modèle Vue pour le restituer.

Dans l'option data de l'instance Vue, nous définissons une propriété appelée "message" et définissons sa valeur initiale sur "Hello Vue!". En utilisant la syntaxe à double crochet ({{ message }}), nous pouvons insérer des attributs dans des documents HTML.

Avec ces étapes simples, nous pouvons instancier et intégrer Vue dans une page HTML. La facilité d'utilisation et la flexibilité de Vue en font un excellent choix pour créer des applications Web interactives.

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：Comment faire pivoter un élément en utilisant CSS3 (exemple de code)Article suivant：Comment faire pivoter un élément en utilisant CSS3 (exemple de code)

Articles Liés

Voir plus