Maison > Article > interface Web > Comment introduire Vue dans une page Web

Comment introduire Vue dans une page Web

PHPzoriginal: 2023-04-13 11:36:271312parcourir

Vue est un framework JavaScript populaire largement utilisé pour créer des applications interactives d'une seule page (SPA). Dans cet article, nous présenterons comment écrire Vue dans des pages Web.

L'utilisation la plus basique de Vue consiste à introduire Vue.js sur la page, puis à créer une instance de Vue. Cette instance contiendra certaines propriétés de données, utilisées pour stocker les données, et un objet méthodes, contenant certaines méthodes pour contrôler ces données.

Ce qui suit est un exemple d'instance Vue simple :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">Reverse Message</button>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
    })
  </script>
</body>
</html>

Dans l'exemple ci-dessus, nous avons créé une instance Vue et l'avons liée à un div avec l'identifiant "app". Ensuite, un attribut de données de message (la valeur par défaut est « Hello Vue ! ») et une méthode reverseMessage sont définis. En HTML, nous utilisons une interpolation à double accolade pour afficher le message sur la page et lions la méthode reverseMessage sur la balise bouton à l'aide de la directive v-on:click.

En plus de la liaison de données et du traitement des événements, Vue fournit également des instructions, des propriétés calculées, des composants et d'autres fonctions. Ces fonctionnalités facilitent l'utilisation de Vue dans les pages Web.

Ce qui suit est un exemple d'affichage d'une liste d'images, en utilisant la directive v-for et les propriétés calculées :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="image in images">
        <img :src="image.url" :alt="image.title">
        <p>{{ image.title }}</p>
      </li>
    </ul>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        images: [
          { title: 'Image 1', url: 'https://via.placeholder.com/150' },
          { title: 'Image 2', url: 'https://via.placeholder.com/150' },
          { title: 'Image 3', url: 'https://via.placeholder.com/150' }
        ]
      },
      computed: {
        reverseImages: function () {
          return this.images.slice().reverse()
        }
      }
    })
  </script>
</body>
</html>

Dans l'exemple ci-dessus, nous utilisons la directive v-for pour afficher une liste d'images, et utilisons la valeur calculée propriété à la liste d'images inversée. Notez qu'en HTML, nous utilisons l'abréviation v-bind :src et :alt pour lier les attributs src et alt de l'image.

Pour résumer, Vue est un framework puissant qui peut être utilisé pour créer des applications interactives d'une seule page. En introduisant Vue.js dans la page Web et en créant une instance Vue, nous pouvons facilement utiliser la liaison de données, le traitement des événements, les instructions, les propriétés calculées et d'autres fonctions de Vue. Cela rend l'écriture de Vue dans les pages Web plus simple et plus facile à comprendre.

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!

JavaScript vue.js html for JS 对象事件

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 attribuer une valeur d'étiquette à l'étiquette dans vueArticle suivant：Comment attribuer une valeur d'étiquette à l'étiquette dans vue

Articles Liés

Voir plus