Beginner
Image

Vue.Js is an open source JavaScript framework allowing Apps. Single-page Web and user interfaces development.

Code Examples

→ Let's start with very simple codes. The more you progress, page after page, the more sophisticated the scripts will be. However, you must go over 30 to 40 pages per level, before moving on to the next step...

→ In order to evaluate your codes, click on the icon on the left at the bottom of the page (gears), then choose a compiler from the list that will be open in another tab. Finally, test your work.

NOW REPRODUCE AND IMMERSE YOURSELF!

C 0001 - Hello World !

Reproduce this code (please do not copy-paste!).
<template>
<h1>Hello World !</h1>
</template>

C 0002 - Declarative Rendering

Reproduce this code (please do not copy-paste!).
<script setup>
import { ref } from 'vue'
</script>

<template>
<h1>It's me again !</h1>
</template>

C 0003 - Declarative Rendering

Reproduce this code (please do not copy-paste!).
<script setup>
import { reactive, ref } from 'vue'

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

<template>
<h1>{{ message }}</h1>
<p>The count is : {{ counter.count }}</p>
</template>

C 0004 - Attribute Bindings

Reproduce this code (please do not copy-paste!).
<script setup>
import { ref } from 'vue'

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

<template>
<h1 :class="titleClass">I dream in blue</h1>
</template>

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

C 0005 - Attribute Bindings

Reproduce this code (please do not copy-paste!).
<script setup>
import { ref } from 'vue'

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

<template>
<h1 :class="titleClass">I see red !</h1>
</template>

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

C 0006 - Attribute Bindings

Reproduce this code (please do not copy-paste!).
<script setup>
import { ref } from 'vue'

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

<template>
<h1 :class="titleClass">I would like to eat a juicy orange...</h1>
</template>

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

C 0007 - Event Listeners

Reproduce this code (please do not copy-paste!).
<script setup>
import { ref } from 'vue'

const count = ref(0)

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

<template>
<button @click="increment">The count is : {{ count }}</button>
</template>

C 0008 - Event Listeners

Reproduce this code (please do not copy-paste!).
<script setup>
import { ref } from 'vue'

const count = ref(8544548)

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

<template>
<button @click="increment">The count is : {{ count }}</button>
</template>

Icon

CHOOSE YOUR COMPILER

Reproduce this code, choosing one of the compilers below (♦ see DEF) (don't copy-paste! It would be too easy). They have the same use, just pick up one according to your preferences.

When you copy your code, replace the existing code (by default) with your own.

Warning ! For some of these compilers, you might have to choose the programming language yourself, in a specific menu which is offered to you. Of course, don't forget to click on RUN !

Vue.Js Technical Specifications

Most Recent Versions

News

About Us...

About Us...
Reflex001

Web
Programming
Development

Company based in
Nice - FRANCE / Montreal - CANADA
Only by appointment...
© 2022 - All rights reserved.
ISSN Registration request in progress...

Main Topics

Main Topics

Legal/Support

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