Comment instancier Vue dans une page HTML-Questions et réponses frontales-php.cn

Comment instancier Vue dans une page HTML

PHPz

Libérer： 2023-04-26 16:18:24

original

822 Les gens l'ont consulté

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
})

Copier après la connexion

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>

Copier après la connexion

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!