VUE, also known as Vue.js, is an open-source JavaScript framework for developing user interfaces and web applications.
BEGINNER
⇒ Code Examples
→ You must be bilingual (Fr/En). The code examples are in English.
→ Let's start with very simple codes. The more you progress, page after page, the more the scripts will be sophisticated. However, you will have to go through 30 to 40 pages per level, before moving on to the next step…
→ To evaluate your codes, click on the icon at the bottom left of the page (cogwheels), then choose a compiler from the list which will open in another tab. Be careful with certain formats. Finally, test your work.
→ Don't try to understand everything the first time, just practice. Some code examples will seem similar to you, yet the differences remain and you must find them.
→ The pagination is located below the compiler and below the comments area. The order of these pages is of little importance to beginners.
IT'S UP TO YOU TO COPY AND IMMERSE YOURSELF!
C 0001 - Hello World !
Reproduce this code (do not copy and paste!).
<!DOCTYPE html>
<html>
<head>
<title>Hello World page</title>
<style>
#app {
display: inline-block;
padding: 10px;
font-size: x-large;
background-color: lightgreen;
}
</style>
</head>
<body>
<h1>Hello World !</h1>
<p>The message is taken from 'data' inside the Vue instance by writing {{ message }} inside the div with id="app".</p>
<div id="app">
{{ message }}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello World!"
}
}
})
app.mount('#app')
</script>
</body>
</html>
CHOISISSEZ VOTRE COMPILATEUR
Reproduisez ce code, en choisissant l'un des compilateurs 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 !
Responsibility
Some of the external links presented below, are not under the direct responsibility of Fond of Code. We cannot therefore be held responsible for the quality/Viability, or the temporary nor permanent interruption of some of them.
All about Vue
Code
Most important versions
Tools/Methodologies
Info+
» Creation date: 2014
* Created by Evan You and his team
News
The comments you leave us are systematically subject to rigorous moderation. Incivility and slander, threats, intimidation of all kinds, more generally all gratuitous verbal violence, or the dissemination of unverified information... are not tolerated. We also reserve the right to publish only comments which effectively advance the debate and allow a better understanding of the subject covered by the article presented on this page (as well as all its ramifications) and this, whatever its overall content.
Fond of Code TM © ®
All rights reserved - Protected Trademark/Logo (INPI)
Legal structures based in
Nice - FRANCE
Montreal - Canada
By appointment
SIRET: 41138921600028 (France)
Inc. : 661515-5 (Canada, Qc.)
Official resumption in France : March 2025
Beta version of the website : May 2024
Implementation : July 2024
Launch of initial activity : 1996 (Europe and North America)
New version of the website : April 2025
Fond of Code official launch : May 2025
Menu
Shop
Contact Us
Legal
