A partir du fichier html suivant :
<html>
<head>
<meta charset="ISO">
<title>Requete http avec vue js3 et axios</title>
</head>
<body>
<div id='app'>
<select v-model='id'>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
<button > Voir le proverbe</button>
<br/>
<ol>
<div >
<span ></span>
</div>
</ol>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js></script> <!-- pour utiliser vue js -->
<script src="./app.js"></script> <!-- notre application vue js -->
<script src="https://unpkg.com/axios/dist/axios.min.js" ></script> <!-- pour utiliser axios (facilite les requetes http) -->
</body>
</html>
Et du fichier app.js :
const API = "./proverbes.json"
const app = Vue.createApp({
data() {
return {
}
},
methods : {
async fetchAPI() {
await axios.get(API)
.then((response)=>{
})
.catch((error)=>{
console.log(error)
})
}
}
});
const vm = app.mount('#app'); // mount spécifie que l'application Vue s'affichera dans la div avec id="app"
produisant l'affichage ci-dessous :
On voudrait, à l'aide de vue js, obtenir, à partir du clic sur le bouton <Voir le proverbe>, l'affichage suivant :
Vous ferez 2 versions, une en utilisant le fichier proverbes.json et une 2nde en utilisant proverbes.xml.
Le fichier html, le fichier js de départ et les ressources proverbes.xml et proverbes.json sont fournis en ressources dans \\prof\vue js\tp1\ressources.