Section courante

A propos

Section administrative du site

 Langage  Elément  Tutoriel  Aide 
ABAP/4
Ada
Assembleur
Assembly & bytecode
ASP (Active Server Pages)
Basic
C
C++
C# (C Sharp)
Cobol
ColdFusion
Fortran
HTML
Java
JavaScript
LISP
Logo
LotusScript
Oberon
Pascal
Perl
PHP
PL/1
Prolog
Python
Rebol
REXX
Ruby
Rust
SAS
NoSQL
SQL
Swift
X++ (Axapta)
GNAT
SMALLAda
VHDL
Assembleur 370
Assembleur 1802
Assembleur 4004
Assembleur 6502
Assembleur 6800
Assembleur 68000
Assembleur 8080 et 8085
Assembleur 8089
Assembleur 80x86
Assembleur AGC4
Assembleur ARM
Assembleur DPS 8000
Assembleur i860
Assembleur Itanium
Assembleur MIPS
Assembleur PDP-11
Assembleur PowerPC
Assembleur RISC-V
Assembleur SPARC
Assembleur SuperH
Assembleur UNIVAC I
Assembleur VAX
Assembleur Z80
Assembleur Z8000
Assembleur z/Architecture
ASSEMBLER/MONITOR 64
Micol Assembler
GFA Assembler
A86
MASM (Macro Assembler)
TASM (Turbo Assembler)
CIL
Jasmin
LLVM
MSIL
Parrot
P-Code (PCode)
SWEET16
G-Pascal
ASP 1.0
ASP 2.0
ASP 3.0
ASP.NET
ASP.NET Core
ABasiC (Amiga)
Adam SmartBASIC
Altair BASIC
AmigaBASIC (Amiga)
AMOS Basic (Amiga)
Atari Basic (Atari 400, 600 XL, 800, 800XL)
Basic Apple II (Integer BASIC/APPLESOFT)
Basic Commodore 64 (CBM-BASIC)
Basic Commodore 128 (BASIC 7.0)
Basic Commodore VIC-20 (CBM-BASIC 2.0)
Basic Coco 1 (Color Basic)
Basic Coco 2 (Extended Color Basic)
Basic Coco 3 (Extended Color Basic 2.0)
BASICA (PC DOS)
Basic Pro
BBC BASIC
Blitz BASIC (Amiga)
DarkBASIC
Dartmouth BASIC
GFA-Basic (Atari ST/Amiga)
GWBASIC (MS-DOS)
Liberty BASIC
Locomotive BASIC (Amstrad CPC)
MSX-Basic
Omikron Basic (Atari ST)
Oric Extended Basic
Power Basic
Quick Basic/QBasic (MS-DOS)
Sinclair BASIC (ZX80, ZX81, ZX Spectrum)
ST BASIC (Atari ST)
Turbo Basic
Vintage BASIC
VBScript
Visual Basic (VB)
Visual Basic .NET (VB .NET)
Visual Basic pour DOS
Yabasic
BeckerBASIC
SIMONS' BASIC
Basic09 d'OS-9
Disk Extended Color Basic
Basic09 d'OS-9
Disk Extended Color Basic
Access
Excel
Visual Basic pour Windows
Visual Basic .NET pour Windows
C Shell Unix (csh)
C pour Amiga
C pour Atari ST
C pour DOS
C pour Falcon030
C pour GEMDOS (Atari ST)
C pour Linux
C pour PowerTV OS
C pour OS/2
C pour Unix
C pour Windows
Aztec C
CoCo-C
GNU C
HiSoft C
IBM C/2
Introl-C
Lattice C
Microsoft C
MinGW C
MSX-C
Open Watcom C
OS-9 C Compiler
Pure C
Quick C
Turbo C
HiSoft C for Atari ST
HiSoft C for CP/M (Amstrad CPC)
C++ pour OS/2
C++ pour Windows
Borland C++
C++Builder
IBM VisualAge C++
Intel C++
MinGW C++
Open Watcom C++
Symantec C++
Turbo C++
Visual C++
Visual C++ .NET
Watcom C++
Zortech C++
C# (C Sharp) pour Windows
Apple III Cobol
Microsoft Cobol
BlueDragon
Lucee
OpenBD
Railo
Smith Project
Microsoft Fortran
WATFOR-77
CSS
FBML
Open Graph
SVG
XML
XSL/XSLT
LESS
SASS
GCJ (GNU)
JSP
Jython
Visual J++
Node.js
TypeScript
AutoLISP
ACSLogo
LotusScript pour Windows
Amiga Oberon
Oberon .NET
Apple Pascal
Delphi/Kylix/Lazarus
Free Pascal
GNU Pascal
HighSpeed Pascal
IBM Personal Computer Pascal
Lisa Pascal
Maxon Pascal
MPW Pascal
OS-9 Pascal
OSS Personal Pascal
Pascal-86
Pascal du Cray Research
Pascal/VS
Pascal-XT
PURE Pascal
QuickPascal
RemObjets Chrome
Sun Pascal
THINK Pascal
Tiny Pascal (TRS-80)
Turbo Pascal
UCSD Pascal
VAX Pascal
Virtual Pascal
Turbo Pascal for CP/M-80
Turbo Pascal for DOS
Turbo Pascal for Macintosh
Turbo Pascal for Windows
CodeIgniter (Cadre d'application)
Drupal (Projet)
Joomla! (Projet)
Phalanger (PHP .NET)
phpBB (Projet)
Smarty (balise)
Twig (balise)
Symfony (Cadre d'application)
WordPress (Projet)
Zend (Cadre d'application)
PL360
PL/M-80
PL/M-86
Turbo Prolog
CPython
IronPython
Jython
PyPy
AREXX
Regina REXX
JMP
Btrieve
Cassandra
Clipper
CouchDB
dBASE
Hbase
Hypertable
MongoDB
Redis
Access
BigQuery
DB2
H2
Interbase
MySQL
Oracle
PostgreSQL
SAP HANA
SQL Server
Sybase
U-SQL
Introduction
Les premiers pas
Préface
Notes légales
Dictionnaire
Recherche

Les premiers pas

Vue (prononcé /vju:/, comme view) est un cadre d'application JavaScript pour la création d'interfaces utilisateur. Il s'appuie sur les standards HTML, CSS et JavaScript et fournit un modèle de programmation déclaratif basé sur des composantes vous aidant à développer efficacement des interfaces utilisateur de toute complexité.

Voici un exemple minimal (le code source JavaScript) :

  1. import { createApp, ref } from "vue"
  2.  
  3. createApp({
  4.   setup() {
  5.     return {
  6.       count: ref(0)
  7.     }
  8.   }
  9. }).mount("#app")

Puis le code source HTML :

  1. <div id="app">
  2.   <button @click="count++">
  3.     Compteur est: {{ count }}
  4.   </button>
  5. </div>     

Le résultat obtenir ressemblera à ceci :

L'exemple ci-dessus illustre les deux fonctionnalités principales de Vue.js :

Le cadre d'application progressif

Vue.js est un cadre d'application et un écosystème couvrant la plupart des fonctionnalités courantes nécessaires au développement front-end. Mais le Web est extrêmement diversifié : les éléments que nous construisons sur le Web peuvent varier considérablement en termes de forme et d'échelle. Dans cet esprit, Vue.js est conçu pour être flexible et progressivement adoptable. Selon votre cas d'utilisation, Vue.js peut être utilisé de différentes manières :

Composantes à fichier unique

Dans la plupart des projets Vue.js compatibles avec les outils de création, on crée des composantes Vue.js à l'aide d'un format de fichier de type HTML appelé composante à fichier unique (également connu sous le nom de fichiers *.vue, abrégé en SFC). Un SFC Vue, comme son nom l'indique, encapsule la logique de la composante (JavaScript), le modèle (HTML) et les styles (CSS) dans un seul fichier. Voici l'exemple précédent, écrit au format SFC :

  1. <script setup>
  2. import { ref } from 'vue'
  3. const count = ref(0)
  4. </script>
  5.  
  6. <template>
  7.   <button @click="count++">Compteur est : {{ count }}</button>
  8. </template>
  9.  
  10. <style scoped>
  11. button {
  12.   font-weight: bold;
  13. }
  14. </style>

SFC est une fonctionnalité déterminante de Vue.js et constitue la méthode recommandée pour créer des composantes Vue.js si votre cas d'utilisation justifie une configuration de build. Vous pouvez en apprendre davantage sur le comment et le pourquoi de SFC dans sa section dédiée - mais pour l'instant, sachez simplement que Vue.js gérera toute la configuration des outils de build pour vous.

Styles d'API

Les composantes Vue.js peuvent être créés dans deux styles d'API différents : API d'options et API de composition.

API d'options

Avec l'API d'options, vous définissez la logique d'une composante à l'aide d'un objet d'options telles que des données, des méthodes et des éléments montés. Les propriétés définies par les options sont exposées à l'intérieur de ces fonctions, pointant vers l'instance de la composante :

  1. <script>
  2. export default {
  3.   /* Les propriétés renvoyées par data() deviennent un état réactif et seront exposées sur «this». */
  4.   data() {
  5.     return {
  6.       count: 0
  7.     }
  8.   },
  9.  
  10.   /* Les méthodes sont des fonctions qui modifient l'état et déclenchent des mises à jour. Elles peuvent être liées en tant que gestionnaires d'événements dans les modèles. */
  11.   methods: {
  12.     increment() {
  13.       this.count++
  14.     }
  15.   },
  16.  
  17.   /* Les crochets de cycle de vie sont appelés à différentes étapes du cycle de vie d'une composante. Cette fonction sera appelée lorsque le composant sera monté. */
  18.   mounted() {
  19.     console.log("Le décompte initial est ${this.count}.")
  20.   }
  21. }
  22. </script>
  23.  
  24. <template>
  25.   <button @click="increment">Compteur est: {{ count }}</button>
  26. </template>

API de composition

Avec l'API de composition, nous définissons la logique d'une composante à l'aide de fonctions API importées. Dans les SFC, l'API de composition est généralement utilisée avec <script setup>. L'attribut setup est une astuce permettant à Vue.js d'effectuer des transformations au moment de la compilation nous permettant d'utiliser l'API de composition avec moins de code standard. Par exemple, les importations et les variables/fonctions de niveau supérieur déclarées dans <script setup> sont directement utilisables dans le modèle.

Voici la même composante, avec exactement le même modèle, mais en utilisant l'API de composition et <script setup> à la place :

  1. <script setup>
  2. import { ref, onMounted } from 'vue'
  3.  
  4. /* état réactif */
  5. const count = ref(0)
  6.  
  7. /* fonctions modifiant l'état et déclenchent des mises à jour */
  8. function increment() {
  9.   count.value++
  10. }
  11.  
  12. /* crochets de cycle de vie */
  13. onMounted(() => {
  14.   console.log("Le décompte initial est ${count.value}.")
  15. })
  16. </script>
  17.  
  18. <template>
  19.   <button @click="increment">Compteur est: {{ count }}</button>
  20. </template>

Lequel choisir ?

Les deux styles d'API sont entièrement capables de couvrir les cas d'utilisation courants. Ce sont des interfaces différentes alimentées par le même système sous-jacent. En fait, l'API d'options est implémentée sur l'API de composition ! Les concepts fondamentaux et les connaissances sur Vue.js sont partagés entre les deux styles.

L'API d'options est centrée sur le concept d'une «instance de composante» (comme le montre l'exemple), s'alignant généralement mieux sur un modèle mental basé sur les classes pour les utilisateurs issus de milieux de langage de programmation POO. Elle est également plus conviviale pour les débutants en faisant abstraction des détails de réactivité et en appliquant l'organisation du code via des groupes d'options.

L'API de composition est centrée sur la déclaration de variables d'état réactives directement dans une portée de fonction et la composition d'état à partir de plusieurs fonctions pour gérer la complexité. Elle est plus libre et nécessite une compréhension du fonctionnement de la réactivité dans Vue pour être utilisée efficacement. En retour, sa flexibilité permet des modèles plus puissants pour organiser et réutiliser la logique.

Si vous débutez avec Vue.js, voici la recommandation générale :

Pour une utilisation en production :

Vous n'êtes pas obligé de vous engager dans un seul style pendant la phase d'apprentissage. Le reste de la documentation fournira des exemples de code dans les deux styles, le cas échéant, et vous pourrez basculer entre eux à tout moment à l'aide des commutateurs de préférences API en haut de la barre latérale gauche.

Créer une application Vue.js

Dans cette section, nous allons vous présenter comment créer une application monopage Vue sur votre machine locale. Le projet créé utilisera une configuration de build basée sur Vite et nous permettra d'utiliser les composantes monofichiers Vue (SFC).

Assurez-vous que vous disposez d'une version à jour de Node.js installée et que votre répertoire de travail actuel est celui dans lequel vous avez l'intention de créer un projet. Exécutez la commande suivante dans votre ligne de commande selon votre préférence.

Si vous utilisez npm, exécuter la commande suivante :

npm create vue@latest

Ou si vous utilisez pnpm, exécuter la commande suivante :

pnpm create vue@latest

Ou si vous utilisez Yarn, exécuter les commande suivante :

# Pour Yarn (v1+)
yarn create vue

# Pour Yarn Modern (v2+)
yarn create vue@latest

# Pour Yarn ^v4.11
yarn dlx create-vue@latest

Ou enfin si vous utilisez Bun, exécuter les commande suivante :

bun create vue@latest

Une de ces commandes va installer et exécuter create-vue, l'outil officiel de création d'échafaudages du projet Vue.js. Des prompts vous seront présentées pour plusieurs fonctionnalités facultatives telles que TypeScript et la prise en charge des tests :

√ Project name: ... <votre-nom-de-projet>
√ Add TypeScript? ... No / Yes
√ Add JSX Support? .. No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit testing? ... No / Yes
√ Add an End-to-End Testing Solution? ... No / Cypress / Nightwatch / Playwright
√ Add ESLint for code quality? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes
√ Add Vue DevTools 7 extension for debugging? (experimental) ... No / Yes

Scaffolding project in ./<votre-nom-de-projet>...
Done.

Si vous n'êtes pas sûr d'une option, choisissez simplement Non en appuyant sur Enter pour l'instant. Une fois le projet créé, suivez les instructions pour installer les dépendances et démarrer le serveur de développement. Exécuter la commande suivante pour npm :

cd <votre-nom-de-projet>
npm install
npm run dev

Ou si vous utilisez pnpm, exécuter la commande suivante :

cd <votre-nom-de-projet>
pnpm install
pnpm run dev

Ou si vous utilisez Yarn, exécuter les commande suivante :

cd <votre-nom-de-projet>
yarn
yarn dev

Ou enfin si vous utilisez Bun, exécuter les commande suivante :

cd <votre-nom-de-projet>
bun install
bun run dev

Vous devriez maintenant avoir votre premier projet Vue.js en cours d'exécution ! Notez que les composantes d'exemple dans le projet généré sont écrits à l'aide de l'API de composition et de <script setup>, plutôt que de l'API d'options. Voici quelques conseils supplémentaires :

Lorsque vous êtes prêt à envoyer votre application en production, exécutez l'une des commandes suivantes. Exécuter la commande suivante pour npm :

npm run build

Ou si vous utilisez pnpm, exécuter la commande suivante :

pnpm run build

Ou si vous utilisez Yarn, exécuter les commande suivante :

yarn build

Ou enfin si vous utilisez Bun, exécuter les commande suivante :

bun run build

Cela créera une version de votre application prête pour la production dans le répertoire ./dist du projet.

Utilisation de Vue.js depuis un CDN

Vous pouvez utiliser Vue.js directement depuis un CDN via une balise de script :

  1. <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Ici, nous utilisons unpkg, mais vous pouvez également utiliser n'importe quel CDN servant des paquets npm, par exemple jsdelivr ou cdnjs. Bien sûr, vous pouvez également télécharger ce fichier et le servir vous-même.

Lorsque vous utilisez Vue.js à partir d'un CDN, aucune «étape de construction» n'est impliquée. Cela simplifie considérablement la configuration et convient à l'amélioration du HTML statique ou à l'intégration avec un cadre d'application backend. Cependant, vous ne pourrez pas utiliser la syntaxe Single-File Component (SFC).

Utilisation de la version globale

Le lien ci-dessus charge la version globale de Vue.js, où toutes les API de niveau supérieur sont exposées en tant que propriétés sur l'objet Vue.js global. Voici un exemple complet utilisant la version globale :

  1. <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  2.  
  3. <div id="app">{{ message }}</div>
  4.  
  5. <script>
  6.   const { createApp, ref } = Vue
  7.  
  8.   createApp({
  9.     setup() {
  10.       const message = ref('Bonjour Vue.js!')
  11.       return {
  12.         message
  13.       }
  14.     }
  15.   }).mount('#app')
  16. </script>

Utilisation de la construction de modules ES

Tout au long du reste de la page, on utiliserons principalement la syntaxe des modules ES. La plupart des navigateurs modernes prennent désormais en charge les modules ES de manière native, nous pouvons donc utiliser Vue.js à partir d'un CDN via des modules ES natifs comme celui-ci :

  1. <div id="app">{{ message }}</div>
  2.  
  3. <script type="module">
  4.   import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  5.  
  6.   createApp({
  7.     setup() {
  8.       const message = ref('Bonjour Vue.js!')
  9.       return {
  10.         message
  11.       }
  12.     }
  13.   }).mount('#app')
  14. </script>

Notez que nous utilisons <script type="module"> et que l'URL CDN importée pointe vers la version des modules ES de Vue.js à la place.

Activation de l'importation de cartes

Dans l'exemple ci-dessus, nous importons à partir de l'URL CDN complète, mais dans le reste de la page, vous verrez un code comme celui-ci :

  1. import { createApp } from "vue"

Nous pouvons apprendre au navigateur où localiser l'importation de Vue.js en utilisant Import Maps :

  1. <script type="importmap">
  2.   {
  3.     "imports": {
  4.       "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
  5.     }
  6.   }
  7. </script>
  8.  
  9. <div id="app">{{ message }}</div>
  10.  
  11. <script type="module">
  12.   import { createApp, ref } from 'vue'
  13.  
  14.   createApp({
  15.     setup() {
  16.       const message = ref('Bonjour Vue.js!')
  17.       return {
  18.         message
  19.       }
  20.     }
  21.   }).mount('#app')
  22. </script>     

Vous pouvez également ajouter des entrées pour d'autres dépendances à la carte d'importation, mais assurez-vous qu'elles pointent vers la version des modules ES de la bibliothèque que vous avez l'intention d'utiliser.

Séparation des modules

Au fur et à mesure que nous approfondissons la page, nous devrons peut-être diviser notre code en fichiers JavaScript distincts afin qu'ils soient plus faciles à gérer. Par exemple, le code HTML suivant :

  1. <!-- index.html -->
  2. <div id="app"></div>
  3.  
  4. <script type="module">
  5.   import { createApp } from 'vue'
  6.   import MaComposante from './ma-composante.js'
  7.  
  8.   createApp(MaComposante).mount('#app')
  9. </script>

Avec le code source JavaScript suivant :

  1. /* ma-composante.js */
  2. import { ref } from "vue"
  3. export default {
  4.   setup() {
  5.     const count = ref(0)
  6.     return { count }
  7.   },
  8.   template: "<div>Compteur est: {{ count }}</div>"
  9. }

Si vous ouvrez directement l'index.html ci-dessus dans votre navigateur, vous constaterez qu'il génère une erreur car les modules ES ne peuvent pas fonctionner sur le protocole file://, étant le protocole utilisé par le navigateur lorsque vous ouvrez un fichier local.

Pour des raisons de sécurité, les modules ES ne peuvent fonctionner que sur le protocole http://, étant celui utilisé par les navigateurs lors de l'ouverture de pages sur le Web. Pour que les modules ES fonctionnent sur notre machine locale, nous devons servir l'index.html sur le protocole http://, avec un serveur HTTP local.

Pour démarrer un serveur HTTP local, assurez-vous d'abord que Node.js est installé, puis exécutez npx serve à partir de la ligne de commande dans le même répertoire où se trouve votre fichier HTML. Vous pouvez également utiliser n'importe quel autre serveur HTTP capable de servir des fichiers statiques avec les types MIME corrects.

Vous avez peut-être remarqué que le modèle du composant importé est intégré en tant que chaîne JavaScript. Si vous utilisez VS Code, vous pouvez installer l'extension es6-string-html et préfixer les chaînes avec un commentaire /*html*/ pour obtenir la coloration syntaxique pour elles.



PARTAGER CETTE PAGE SUR
Dernière mise à jour : Lundi, le 20 janvier 2025