petite-vue : une bibliothèque légère inspirée de Vue.js
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.