Variables dans vue.js
Variable input
{{variable}}La variable dans le input prends la valeur du champ input.
<input v-model="variable">Si je veux donc afficher la variable. voici un exemple de code.
<!DOCTYPE html>
<html>
<head>
<title>titre</title>
<head/>
<body>
<div id="montage">
<!-- Ma variable vue.js -->
{{variable}}
<input v-model="variable">
</div>
<!-- Intègre le vue.js -->
<script src="https://unpkg.com/vue@next"></script>
<script>
// Créer l'application
let app = Vue.createApp({
data: function() {
return {
// mes variables
variable: 'Hello world !'
//, autre_variable: 'valeur'
}
}
})
// Monte l'application en fonction de l'id
app.mount('#montage')
</script>
</body>
</html>Le bloc entier a son importance.
-> La partie div "montage" : nous donne ce que l'application doit utiliser comme élément à "monter" pour que vue puisse être interprété correctement.
-> La pariie "v-model" : donne au champ input la valeur de "variable" au sein du champ.
-> script "src"..."" : intègre vue.js directement.
-> La partie "let app ..": Créer mon application vue.js.
-> dans le "data" : je retourne la valeur de mes variables séparé d'une virgule.
-> Le "app.mount(#montage)" : Monte l'application sur base de notre id ici "montage".
Pour la suite de mes explications, je ne reprendrai que la partie du code essentiel afin de ne pas surcharger les informations.