Dans cette vidéo je vous propose de découvrir les nouveautés de Vue 3.2.
Du nouveau pour les .vue
Cette version 3.2 vient stabiliser 2 éléments de syntaxe disponible dans les fichier .vue.
script setup
Pour commencer <script setup> permet d'utiliser l'API composition beaucoup plus simplement que par le passé.
<template>
<div>
<p>Compteur {{ suffix }} : {{ count }} x 2 = {{ double }}</p>
<button @click="handleClick">Incrémenter</button>
</div>
</template>
<script setup>
import { ref, computed } from "vue";
// Un composant peut être importé directement
import Button from "../components/Button.vue";
const count = ref(0);
// Les props sont définit via defineProps() et renvoie la valeur des props
const props = defineProps({
suffix: String,
});
// si on souhaite émettre un évènement, on peut utiliser defineEmits()
const emit = defineEmits(["increment"]);
// Toutes les variables sont exposées à la vue
const double = computed(() => count.value * 2);
function handleClick() {
count.value++;
emit("increment", count.value);
}
</script>
Même si cette syntaxe est stabilisée, l'équipe Vue.js continue à travailler sur la simplification de l'utilisation des refs dans les composants .vue.
style v-bind
Un autre ajout est la possibilité d'utiliser une propriété de notre composant dans la partie CSS.
<script setup>
import { ref } from "vue";
const color = ref("red");
</script>
<template>
<div>
<input v-model="color" />
</div>
</template>
<style scoped>
input {
border: solid 1px v-bind(color);
color: v-bind(color);
}
</style>
Lors de la compilation, vue.js utilisera une variable CSS qui sera injectée sur l'élément racine du composant.
Les composants web
Il est maintenant possible de créer des composants web à l'aide de la méthode defineCustomElement().
import { defineCustomElement } from "vue";
const MyVueElement = defineCustomElement({
// Les options classiques d'un composant vue vont ici
});
// On peut ensuite enregistrer notre composant
customElements.define("my-vue-element", MyVueElement);
Il est aussi possible d'utiliser un fichier .vue qu'il faudra suffixer par .ce.vue.
import { defineCustomElement } from "vue";
import MyVueComponent from "../components/MyVueComponent.ce.vue";
customElements.define("my-vue-element", defineCustomElement(MyVueComponent));
