Comment utiliser vue en ligne-Questions et réponses frontales-php.cn

Maison

interface Web

Comment utiliser vue en ligne

May 25, 2023 pm 12:10 PM

Vue est un framework JavaScript très puissant qui peut nous aider à créer rapidement des pages frontales interactives. Dans Vue, l'utilisation du inline est également très courante. Ci-dessous, nous expliquerons comment utiliser Vue en ligne et les précautions associées.

1. Le concept de Vue inline

Dans Vue, l'inlining signifie intégrer des instances de Vue dans des balises HTML. Vous pouvez initialiser une instance Vue en ligne pour implémenter des fonctions telles que la liaison de données dynamique et le traitement des événements. Il existe généralement deux façons d'intégrer Vue. L'une consiste à intégrer les instances de Vue directement dans les balises HTML et l'autre consiste à utiliser les instructions en ligne de Vue.

2. Intégrer directement l'instance Vue dans la balise HTML

Pour intégrer directement l'instance Vue dans la balise HTML, vous devez référencer le fichier Vue JS dans la page HTML et définir les options de l'instance Vue dans la balise HTML. . Voici un exemple simple :

&lt;html&gt;
  &lt;head&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;
      {{ message }}
    &lt;/div&gt;
    &lt;script&gt;
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello, Vue!'
        }
      })
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

Dans l'exemple ci-dessus, le fichier Vue JS est d'abord référencé dans la section head. Dans la partie corps, nous définissons un div avec l'identifiant "app", puis spécifions l'identifiant du div avec le paramètre el dans l'instance Vue, définissons une variable de message avec le paramètre data, et enfin utilisons "{{ message } à l'intérieur du div tag }" pour afficher la valeur de la variable. Une fois la page chargée, Vue mettra automatiquement à jour la valeur du message sur la page.

3. Instructions en ligne Vue

Les instructions en ligne Vue peuvent lier des données et des méthodes dans des instances Vue sur certaines balises spécifiques, obtenant ainsi des fonctions plus dynamiques et puissantes. Les instructions en ligne courantes incluent v-bind, v-if, v-for, etc. Ci-dessous, nous prendrons l'instruction v-bind comme exemple pour présenter l'utilisation des instructions en ligne de Vue.

La directive v-bind est utilisée pour lier les données de l'instance Vue aux attributs de la balise HTML. Par exemple, nous pouvons utiliser la directive v-bind pour lier la variable message dans l'instance Vue à l'attribut title sur l'étiquette d'un bouton pour afficher la valeur de la variable lorsque la souris survole :

&lt;html&gt;
  &lt;head&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;
      &lt;button v-bind:title=&quot;message&quot;&gt;Hover me&lt;/button&gt;
    &lt;/div&gt;
    &lt;script&gt;
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello, Vue!'
        }
      })
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

Dans l'exemple ci-dessus, nous utilisons La directive v-bind lie la variable de message à l'attribut title de l'étiquette du bouton. À ce stade, lorsque la souris survole le bouton, la valeur de « Hello, Vue ! » sera affichée.

Il convient de noter que la directive v-bind peut également être utilisée pour lier d'autres attributs tels que les styles et les noms de classe. Par exemple, nous pouvons lier la variable color dans l'instance Vue à la couleur d'arrière-plan d'une balise div via l'instruction v-bind pour obtenir une transformation dynamique de la couleur d'arrière-plan :

&lt;html&gt;
  &lt;head&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;
      &lt;div v-bind:style=&quot;{ backgroundColor: color }&quot;&gt;Hello, Vue!&lt;/div&gt;
    &lt;/div&gt;
    &lt;script&gt;
      var app = new Vue({
        el: '#app',
        data: {
          color: 'red'
        }
      })
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

Dans l'exemple ci-dessus, nous avons utilisé v-bind L'instruction lie la variable de couleur au style d'une balise div pour modifier dynamiquement la couleur d'arrière-plan en fonction de la variable de couleur. Il convient de noter que afin d'être cohérents avec la méthode de dénomination des attributs HTML, les noms d'attributs de Vue sont généralement nommés en minuscules avec des lignes horizontales. Par exemple, background-color est remplacé par backgroundColor.

4. Résumé

Vue inlining est l'une des fonctions les plus courantes et les plus pratiques du framework Vue. Des fonctions telles que la liaison dynamique des données et le traitement des événements peuvent être rapidement implémentées en intégrant des instances Vue directement dans des balises HTML ou en utilisant des instructions en ligne Vue. Il convient de noter que lors de l'utilisation de Vue en ligne, nous devons le gérer avec soin pour éviter toute confusion de code et toute difficulté de maintenance. Dans le même temps, nous devons également choisir la méthode en ligne appropriée en fonction des différents besoins pour obtenir le meilleur effet de développement et la meilleure expérience utilisateur.

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 de ce site Web

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