petite-vue : une bibliothèque légère inspirée de Vue.js

Par:
fredericmazue

mar, 07/09/2021 - 15:07

petite-vue est une bibliothèque simple inspirée de Vue.js. Comme Vue.js, petite-vue permet de dynamiser des pages. Mais petite-vue se veut plus légère, et s’oriente plutôt vers l’amélioration progressive de vos pages web comme dans l'esprit de jQuery ou Alpine. La syntaxe de modèle est la même que celle de Vue.js. petite-vue pèse environ 5 Ko.

petite-vue ne nécessite aucun construction et peut-être importée via une simple balise <script>. Voici par exemple comment ajouter un bouton compteur de clics à une page

<script src="https://unpkg.com/petite-vue" defer init></script>

<!-- N'importe où dans la page -->
<div v-scope="{ count: 0 }">
  {{ count }}
  <button @click="count++">inc</button>
</div>

A remarquer : la fonction createApp qui accepte un objet de données qui sert de portée racine pour toutes les expressions.

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'

  createApp({
    // exposed to all expressions
    count: 0,
    // getters
    get plusOne() {
      return this.count + 1
    },

    // methods
    increment() {
      this.count++
    }
  }).mount()
</script>

<!-- v-scope value can be omitted -->
<div v-scope>
  <p>{{ count }}</p>
  <p>{{ plusOne }}</p>
  <button @click="increment">increment</button>
</div>

Il est également possible de spécifier une cible de montage (sélecteur ou élément) à limiter petite-vue à cette seule région de la page :

createApp().mount('#only-this-div')

petite-vue est un logiciel libre sous licence MIT, disponible sur GitHub.