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

→ 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 !

<template>
 <h1>Bonjour tout le monde !</h1>
</template>

<script setup>
import { ref } from 'vue'
</script>

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

<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>

<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>

<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>

<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>

<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>

<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>