Tutoriel d'introduction à VUE3 : Utilisez le plug-in Vue.js pour jouer avec SVG

Avec le développement continu du développement frontal Web moderne, de plus en plus de technologies sont largement utilisées dans le développement réel. Parmi eux, Vue.js est actuellement l'un des frameworks JavaScript les plus populaires. Il est basé sur le modèle MVVM et fournit une riche bibliothèque d'API et de composants, facilitant le développement d'applications Web réactives, réutilisables et efficaces. La dernière version de Vue.js 3 offre de meilleures performances et des fonctionnalités plus riches que l'ancienne version, qui a attiré une large attention et de nombreuses recherches.

Cet article vous présentera une méthode d'utilisation du plug-in Vue.js pour jouer avec SVG. SVG est un langage de balisage XML utilisé pour décrire des graphiques vectoriels bidimensionnels. Il peut être directement restitué par le navigateur et prend en charge la conception réactive. Cet article utilisera Vue.js et le plug-in Vue.js pour créer une galerie SVG simple afin de démontrer l'utilisation de base de Vue.js 3.

Qu'est-ce que le SVG ?

SVG, le nom complet est Scalable Vector Graphics, qui est un standard ouvert basé sur le langage de balisage XML pour décrire les graphiques vectoriels bidimensionnels. Les images SVG peuvent être rendues directement via le navigateur, elles présentent donc de grands avantages en termes de performances, et contrairement aux graphiques en pixels, les graphiques SVG sont des graphiques vectoriels, ils ne seront donc pas déformés, peu importe s'ils sont agrandis ou réduits, même s'ils sont agrandis à l'infini. .Perte de clarté. De plus, SVG possède également les caractéristiques du responsive design, lui permettant de conserver les mêmes performances sur différents appareils.

Installer les plug-ins Vue.js et Vue.js

Avant d'utiliser Vue.js pour créer une application, vous devez d'abord installer Vue.js et ses plug-ins . Voici les étapes pour installer Vue.js 3 :

1. via javascript 9a14a4376198953348f36d79566feff52cacc6d41bbb37262a98f745aa00fbf0 [ javascript] pour utiliser rapidement Vue.js.
2. Ou installez via npm : npm install vue@nextnpm install vue@next
3. 安装Vue.js插件，本文将会使用vue-svg插件：npm install vue-svg@4.0.1
Installez le plug-in Vue.js Cet article utilisera le vue-svg. plug-in : npm install vue-svg@4.0.1

Build SVG Gallery

Grâce aux étapes ci-dessus, nous avons installé avec succès Vue.js et son plugin. Ensuite, créons une simple galerie SVG.

Tout d'abord, nous devons créer une instance Vue.js et ajouter une balise à son modèle pour placer l'image SVG. Le code spécifique est le suivant :

<div id="app">
  <svg>
    <!-- SVG代码将会在此处插入 -->
  </svg>
</div>

Ensuite, nous devons enregistrer le plug-in vue-svg dans l'instance Vue.js et transmettre le chemin du fichier SVG. Le code d'implémentation du plug-in Vue.js est le suivant :

import { createApp } from 'vue'
import App from './App.vue'
import VueSvgPlugin from 'vue-svg'

createApp(App).use(VueSvgPlugin, {url: './assets/img.svg'}).mount('#app')

Dans l'exemple, nous avons référencé le composant App.vue, enregistré le plug-in vue-svg via l'utilisation et passé le Chemin du fichier SVG vers le milieu VueSvgPlugin. Cela permet le rendu des images SVG dans des modèles. Dans cet exemple, l'image SVG est un fichier SVG externe chargé via l'attribut url.

Ensuite, dans le fichier SVG, nous pouvons utiliser la syntaxe de liaison bidirectionnelle de Vue.js pour ajouter des comportements interactifs et des effets réactifs à l'image. Voici un exemple simple de galerie SVG :

<template>
  <svg width="800" height="400">
    <rect v-for="(rect, index) in rects"
          :key="index"
          :x="rect.x"
          :y="rect.y"
          :width="rect.width"
          :height="rect.height"
          fill="red"
          @click="removeRect(index)"
          >
    </rect>
  </svg>
</template>

<script>
export default {
  data() {
    return {
      rects: [
        { x: 100, y: 100, width: 100, height: 100 },
        { x: 300, y: 150, width: 150, height: 150 },
        { x: 500, y: 100, width: 120, height: 120 }
      ]
    }
  },
  methods: {
    removeRect(index) {
      this.rects.splice(index, 1)
    }
  }
}
</script>

Dans le code ci-dessus, nous avons ajouté des données et des événements liés dans les deux sens pour chaque rectangle de l'image SVG. Utilisez la directive v-for de Vue.js pour générer l'élément rectangulaire correspondant, utilisez la directive v-bind pour lier les données et utilisez la directive v-on pour enregistrer les événements. Avec le code simple ci-dessus, nous avons réussi à créer une galerie SVG réactive.

Résumé

Cet article présente brièvement l'utilisation de base de Vue.js 3 et comment utiliser le plug-in Vue.js pour jouer avec SVG. Vue.js est un framework JavaScript extrêmement populaire et largement utilisé dans le développement web front-end. Lorsque nous utilisons Vue.js, nous pouvons utiliser la riche API et les bibliothèques de composants qu'il fournit pour développer rapidement des applications Web réactives, réutilisables et efficaces. Utiliser le plug-in Vue.js pour créer des galeries SVG est une méthode très intéressante et pratique, qui nous permet d'obtenir plus facilement un design réactif et des effets interactifs. Par conséquent, l’apprentissage de Vue.js et SVG est très important et significatif pour les développeurs Web front-end. #🎜🎜#

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!