mission VueJS

Installation

  • installer NodeJS (mission-nodejs)
  • ajouter le cmd et le bin de Git dans le Path
  • installer Bower
npm install -g bower
bower init
bower install vue

(on peut aussi utiliser le fichier vue.js ou le CDN directement)

  • tester le programme suivant
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Luc Frébourg">
<title>VueJS</title>
<!-- script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script -->
<script src="bower_components/vue/dist/vue.js"></script> 
</head>
<body>

<div id="app">
  {{ message }}
</div>

<script>
	var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>
</body>
</html>
  • ajouter l’addon du navigateur pour aider à debugger
  • relancer le navigateur et inspecter la page

Super tuto

https://www.grafikart.fr/formations/vuejs

Référence
https://vuejs.org/v2/examples/index.html
https://fr.vuejs.org/v2/guide/

Manipulation des données via le DOM

  • afficher « Bonjour »  dans la div app
  • grâce à l’exemple, modifier avec JS la valeur de app par « Coucou »
app.message="tigrou"
  • Réaliser une nouvelle div avec comme message votre nom

 

Capturer et lier les actions

 v-on: permet de capturer les évènements. On peut utiliser @ à la place. @click permet de capturer l’évènement click. ++n modifie la variable n de data.

  • tester le code suivant
<div id="tuto">
        <button class="button btn-primary" @click="++n">+</button> {{ n }}
</div>
<script>
    new Vue({
        el: '#tuto',
        data: { n: 0 }
    });

</script>
  • compter le nombre de survol de la souris sur un bouton

v-bind: permet de lier un attribut à une expression. Il peut être remplacer par : . :class permet ici de lier l’attribut class à type et de le modifier par la suite. On utilise bootstrap à installer si nécessaire.

bower install boostrap
<div id="tuto">
        <button type="button" :class="type" @mouseover="changeType">Primary</button> 
</div>
<script>
    new Vue({
        el: '#tuto', data: { type: 'btn btn-primary' }, methods: { changeType: function() { this.type = (this.type == 'btn btn-primary') ? 'btn btn-success' : 'btn btn-primary'; } }
    });

</script>
  • modifier le bouton en btn-warning lors du click de la souris

————————

v-if v-else v-show

v-for afficher les différents élements (exemeple avec une requete sql à faire)

v-modal liaison d’un champs et d’une variable vue ( data , insertiojn en ajax ?)

npm install axios




var axios = require('axios');
methods: {
    buttonClicked: function(){
        axios.post('/url', { data: this.data })
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                // Wu oh! Something went wrong
                console.log(error.message);
            });
    }
}

 

2019-01-28T11:52:44+01:00By |Tags: |

Leave A Comment