Outils pour utilisateurs
javascript:vuejs
Différences
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 [2021/11/06 09:22] marclebrun [Instance de Vue] |
— (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/|Goodbye webpack: Building Vue.js Applications Without webpack]] | ||
| - | * [[https://codingexplained.com/coding/front-end/vue-js/using-multiple-vue-instances-page|Using multiple Vue instances on the same page]] | ||
| - | |||
| - | |||
| - | ===== Instance de Vue ===== | ||
| - | |||
| - | <code javascript> | ||
| - | new Vue({ | ||
| - | |||
| - | // ID de la div contenant l'application | ||
| - | el: '#app', | ||
| - | | ||
| - | // si nécessaire, il est possible d'utiliser | ||
| - | // d'autres délimiteurs que {{ ceux par défaut }} | ||
| - | delimiters: ['[[', ']]'], | ||
| - | | ||
| - | 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> | ||
javascript/vuejs.1636190557.txt.gz · Dernière modification: 2021/11/06 09:22 (modification externe)
Outils de la page
Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution-Share Alike 4.0 International
