Débutant(e)
Image

Vue.js est un framework JavaScript open source, permettant de développer des App. Web monopages et des interfaces utilisateur.

Exemples de codes

→ Commençons par des codes très simples. Plus vous progresserez, page après page, plus les scripts seront sophistiqués. Vous devez néanmoins passer le cap de 30 à 40 pages par niveau, avant de passer à la prochaine étape...

→ Afin d'évaluer vos codes, cliquez sur l'icône à gauche en bas de page (rouages), puis choisissez un compilateur dans la liste qui s'ouvrira dans un autre onglet. Finalement, testez votre travail.

MAINTENANT, RECOPIEZ ET IMPRÉGNEZ-VOUS !

C 0001 - Bonjour tout le monde !

Reproduisez ce code (ne le copier-coller pas!).
<template>
<h1>Bonjour tout le monde !</h1>
</template>

C 0002 - Declarative Rendering

Reproduisez ce code (ne le copier-coller pas!).
<script setup>
import { ref } from 'vue'
</script>

<template>
<h1>C'est encore moi !</h1>
</template>

C 0003 - Declarative Rendering

Reproduisez ce code (ne le copier-coller pas!).
<script setup>
import { reactive, ref } from 'vue'

const counter = reactive({ count: 0 })
const message = ref('Il fait beau !')
</script>

<template>
<h1>{{ message }}</h1>
<p>Le décompte est de : {{ counter.count }}</p>
</template>

C 0004 - Attribute Bindings

Reproduisez ce code (ne le copier-coller pas!).
<script setup>
import { ref } from 'vue'

const titleClass = ref('title')
</script>

<template>
<h1 :class="titleClass">Je vois rouge</h1>
</template>

<style>
.title {
color: red;
}
</style>

C 0005 - Attribute Bindings

Reproduisez ce code (ne le copier-coller pas!).
<script setup>
import { ref } from 'vue'

const titleClass = ref('title')
</script>

<template>
<h1 :class="titleClass">Je rêve de bleu</h1>
</template>

<style>
.title {
color: blue;
}
</style>

C 0006 - Attribute Bindings

Reproduisez ce code (ne le copier-coller pas!).
<script setup>
import { ref } from 'vue'

const titleClass = ref('title')
</script>

<template>
<h1 :class="titleClass">J'aimerais bien manger une bonne orange...</h1>
</template>

<style>
.title {
color: orange;
}
</style>

C 0007 - Event Listeners

Reproduisez ce code (ne le copier-coller pas!).
<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
count.value++
}
</script>

<template>
<button @click="increment">Le décompte est : {{ count }}</button>
</template>

C 0008 - Event Listeners

Reproduisez ce code (ne le copier-coller pas!).
<script setup>
import { ref } from 'vue'

const count = ref(8544548)

function increment() {
count.value++
}
</script>

<template>
<button @click="increment">Le décompte est : {{ count }}</button>
</template>

Icon

CHOISISSEZ VOTRE COMPILATEUR

Reproduisez ce code, en choisissant l'un des compilateurs (♦ voir DEF) ci-dessous (ne copiez-collez pas ! Ce serait trop facile). Tous ont la même fonction, choisissez-en un en tenant simplement compte de vos préférences.

Lorsque vous copiez votre code, remplacez le code existant (par défaut) figurant déjà dans le compilateur, par le vôtre.

Attention ! Pour certains de ces compilateurs, vous devez vous-même choisir le langage de programmation, dans le menu qui vous est alors proposé. Bien évidemment, n'oubliez pas de cliquer sur RUN !

Spécifications techniques Vue.Js

Versions récentes

Info+ Vue.Js

Origine
» Date de création : 2014
* Créé par Evan You
* Développé par The PHP Group

* Écrit en TypeScript / JavaScript

* Multiplateforme
* Licence MIT

Outils+ Vue.Js

Logiciels et environnements

Actualité

À propos...

À propos...
Reflex001

Programmation
Développement
Web

Entreprise basée à
Nice - FRANCE / Montréal - CANADA
Uniquement sur RDV...
© 2022 - Tous droits réservés.
ISSN Demande d'enregistrement en cours...

Rappels

Rappels

Légal/Support

Légal/Support
Image
© Copyright 2023 Reflex001. Designed By Art and Earth Networks and Technology / Diego Piccini / Piccini da Todi G&D Studio