Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
javascript:vuejs [2020/06/15 09:03] marclebrun [Vue.js] |
— (Version actuelle) | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
- | ====== Vue.js ====== | ||
- | |||
- | * [[javascript:vuejs:utilisation_via_cdn]] | ||
- | * [[javascript:vuejs:installation_via_npm]] | ||
- | |||
- | Didacticiels: | ||
- | * [[https://www.grafikart.fr/tutoriels/vuejs?fbclid=IwAR1dYMi7wJ3WcuIOLS0RhKlJwWgN0XM5XADfks1L0At5Q80keBlnySBbNP4|Apprendre VueJS | Grafikart.fr]] | ||
- | * [[https://www.youtube.com/playlist?list=PLpzy7FIRqpGDuLIo0zZ43CpA5MmYnnCUy|Vue.js - From The Ground Up]] | ||
- | * [[https://blog.elao.com/fr/dev/comment-integrer-vue-js-application-symfony/|Comment intégrer Vue.js dans une application Symfony]] | ||
- | * [[https://michaelnthiessen.com/avoid-mutating-prop-directly/|Vue Error: Avoid Mutating a Prop Directly - Michael Thiessen]] | ||
- | * [[https://markus.oberlehner.net/blog/goodbye-webpack-building-vue-applications-without-webpack/|Building Vue.js Applications Without webpack]] | ||
- | |||
- | ===== Instance de Vue ===== | ||
- | |||
- | <code javascript> | ||
- | new Vue({ | ||
- | |||
- | el: '#app', // ID de la div contenant l'application | ||
- | | ||
- | data: { | ||
- | }, | ||
- | | ||
- | methods: { | ||
- | | ||
- | exemple: function(param1, param2) { | ||
- | // ... | ||
- | }, | ||
- | | ||
- | } | ||
- | }) | ||
- | </code> | ||
- | |||
- | ===== Composant ===== | ||
- | |||
- | <code javascript> | ||
- | Vue.component('mon-composant', { | ||
- | | ||
- | props: [ | ||
- | 'label', | ||
- | // ... | ||
- | ], | ||
- | | ||
- | template: '<span v-on:click="onClick">{{ label }}</span>', | ||
- | | ||
- | methods: { | ||
- | | ||
- | onClick: function() { | ||
- | console.log("Vous avez cliqué sur " + this.label); | ||
- | } | ||
- | | ||
- | } | ||
- | }) | ||
- | </code> | ||
- | |||
- | Utilisation du composant dans l'HTML : | ||
- | |||
- | <code html> | ||
- | <mon-composant v-bind:label="Bla bla bla"></mon-composant> | ||
- | </code> | ||