Address
12 Rue de Cléry, 75002 Paris
Work Hours
Jeudi et Vendredi: de 9H à 18H
VueJS
2. zone de saisir avec coordination
1. Hello World !
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mon interface</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="app">
{{ user }}
</div>
<script>
var app = new Vue({
el: "#app",
data: {
user: "Hello World !"
}
})
</script>
</body>
</html>
2. zone de saisir avec coordination
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mon interface</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<p class="jumbotron">Login : <input type="text" v-model="user"/> Vous êtes connecté en tant que {{ user }}</p>
</div>
</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
user: "Bertran"
}
})
</script>
</body>
</html>
3. v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mon interface</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="app">
<div class="container">
<h1 v-bind:class="affichage">Produit disponible</h1>
<div class="row">
<div class="col-3" v-for="produit in produits">
<p class="jumbotron">
{{ produit }}<br/>
<button v-on:click="commander(produit)">Commander !</button>
</p>
</div>
</div>
</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
produits: ["Pizza", "Hamburger", "Cheeseburger", "Tacos"]
}
})
</script>
</body>
</html>
4. v-for + button
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mon interface</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="app">
<div class="container">
<h1 class="display-4" v-if="commandes.length > 0">Produits commandés</h1>
<div class="row">
<ul>
<li v-for="commande in commandes">{{ commande }}</li>
</ul>
</div>
<h1 v-bind:class="affichage">Produit disponible</h1>
<div class="row">
<div class="col-3" v-for="produit in produits">
<p class="jumbotron">
{{ produit }}<br/>
<button v-on:click="commander(produit)">Commander !</button>
</p>
</div>
</div>
</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
produits: ["Pizza", "Hamburger", "Cheeseburger", "Tacos"],
commandes: [],
affichage: "display-4"
},
methods: {
commander: function(produit){
this.commandes.push(produit);
}
}
})
</script>
</body>
</html>
5. Regroupement
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mon interface</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="app">
<div class="container">
<h1 class="display-4" v-if="commandes.length > 0">Produits commandés</h1>
<div class="row">
<fiche-produit v-for="commande in commandes" v-bind:nom="commande" role="recap"></fiche-produit>
</div>
<h1 v-bind:class="affichage">Produit disponible</h1>
<div class="row">
<fiche-produit v-for="produit in produits" v-bind:nom="produit" v-on:commande-passee="commander" role="commande"></fiche-produit>
<!--<div class="col-3" v-for="produit in produits">
<p class="jumbotron">
{{ produit }}<br/>
<button v-on:click="commander(produit)">Commander !</button>
</p>
</div>-->
</div>
</div>
</div>
<script>
Vue.component('fiche-produit',{
template: `
<div class="col-3">
<p class="jumbotron"> {{ nom }} <br/>
<button v-on:click="passer_commande(nom)" v-if="role == 'commande'">Commander !</button>
</p>
</div>
`,
props: ['nom', 'role'],
methods: {
passer_commande: function(produit){
this.$emit('commande-passee', produit)
}
}
})
var app = new Vue({
el:"#app",
data:{
produits: ["Pizza", "Hamburger", "Cheeseburger", "Tacos"],
commandes: [],
affichage: "display-4"
},
methods: {
commander: function(produit){
this.commandes.push(produit);
}
}
})
</script>
</body>
</html>
6. v-model + calcul
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mon interface</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="el">
Quantité : <input v-model="form.quantity">
Cout/M2 : <input v-model="form.cout">
Coût total : <input :value="form.quantity*form.cout" >
</div>
<script>
new Vue({
el: "#el",
data() {
return {
form: {
quantity: 0,
cout: 0,
total: 0
}
}
}
})
</script>
</body>
</html>