Use Vue.js as a "simple external library" for exercises 1 to 8:
You will realize some small exercises to make the first steps in the Vue.js world... Enjoy!
You can use any html editor, Visual Studio Code or use https://codesandbox.io/ with the Static HTML Template (do not use Vue.js template as it uses SFC by default).
Examples are provided throughout the exercises to help you, but you are not required to arrive exactly at the same result.
To get you started here a sample index.html file.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
<!-- optional CSS framework -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>
/* optional your CSS */
</style>
</head>
<body>
<!-- Your HTML -->
<h1>My Site</h1>
<script type="module">
import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
/* Your code */
</script>
</body>
</html>Tutorial step 2. Declarative Rendering
Create an HTML page displaying a name:
Create an HTML page displaying a name and an input field that allows you to write or modify the name:
<input type="text" />Create an HTML page displaying a name, an email and two input fields that allow you to write or modify the name or email:
Tutorial step 4. Event Listener
Create an HTML page that allows you to enter en number, and two buttons: "Calculate the double" and "Divide by two". The buttons change the value of the number:
<input type="number" placeholder="Enter a number" />
<button>Calculate</button>Tutorial step 4. Event Listener
Create an HTML page with a simple calculator. The operands, operation and result are displayed:
Tutorial step 7. List Rendering
Create an HTML page that display a list of countries, stored in a javascript array:
countries: [
'Austria',
'France',
'Switzerland',
'Germany',
'Italy',
'Spain'
]Tutorial step 7. List Rendering - HTML select
Create an HTML page that displays a list of countries stored in a javascript array as a html-select-box.
Add a message "Select a country" if no one is selected or "You choice: selected-country" :
<select>
<option></option>
<option>A</option>
</select>Tutorial step 8. Computed Property
Create an HTML page that allows you to enter three grades. The page will display the grade number, the average grade and if you passed the module. Three differents messages are displayed, depending the average grade (>=4, >=3.5, ...):
