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 [2020/06/12 09:53] marclebrun |
— (Version actuelle) | ||
|---|---|---|---|
| Ligne 1: | Ligne 1: | ||
| - | ====== Vue.js ====== | ||
| - | |||
| - | * [[javascript:vuejs:utilisation_via_cdn]] | ||
| - | * [[javascript:vuejs:installation_basique]] | ||
| - | * [[javascript:vuejs:installation_via_npm]] | ||
| - | |||
| - | Didacticiels: | ||
| - | * [[https://www.youtube.com/playlist?list=PLpzy7FIRqpGDuLIo0zZ43CpA5MmYnnCUy|Vue.js - From The Ground Up]] | ||
| - | ===== 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> | ||
javascript/vuejs.1591955597.txt.gz · Dernière modification: 2020/06/12 09:53 (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
