mission VueJS

Installation

  • installer NodeJS (mission-nodejs)
  • ajouter le cmd et le bin de Git dans le Path
  • installer Bower

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

  • tester le programme suivant

  • 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 »

  • 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

  • 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.

  • 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 ?)

 

2018-07-02T21:55:12+00:00By |Tags: |

Leave A Comment