A savoir javascript : react

Une des propriétés phares des frameworks javascript est le coté réactif : faire en sorte de recalculer des variables en fonction des variations d'autres variables.

vue a une façon de faire à lui.

py4web amène la V2 de vue. pas essayé avec la v3. A savoir la syntaxe est différente entre les 2 version.

 exemple illustré avec py4web/ex_component/lecture_load_images_ajax

vue index.html

on fait calculer des champs en fonction les uns de autres.

On fait appel à une fonction backend via axios (le client d'api basé sur les promesses). Equivalent d'ajax en fait.

L'objet Promise (pour « promesse ») est utilisé pour réaliser des traitements de façon asynchrone. Une promesse représente une valeur qui peut être disponible maintenant, dans le futur voire jamais.

 

un point fondamental pour que ca marche :

- evident :pas d'erreur de syntaxe. faire attention aux }, entre les membres d'une lsite par ex

1/ déclarer les variables à suivre. On les appelle avec this.variable

(en rouge)

2/ utiliser le mot clé computed

(en bleu)

3/ donner le nom de la variable calculée à la methode

(en vert)

var vm = new Vue({
  el: '#example',
  data: {
    message: 'HellO',
    jo: '',
    doub: 0
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    },

    CapitalizedMessage: function () {
      // `this` points to the vm instance
      return this.message.toUpperCase()
    },


      LengthofMessage: function () {
      // `this` points to the vm instance
      return this.message.length


  },


    DoubleLengthofMessage: function () {
      // `this` points to the vm instance
      let callback_url = "[[=XML(getdouble_url)]]";
      x=axios.get(
                    callback_url,
                    {params: {"entier": this.LengthofMessage}}).then((result) => {

                                        this.doub=result.data.valeur;
                                        //alert('enfin '+this.jo.toString())

                    });


     return this.doub;
    },


    MiniMessage: function () {
      // `this` points to the vm instance
      let callback_url = "[[=XML(getmini_url)]]";
      x=axios.get(
                    callback_url,
                    {params: {"mot": this.message}}).then((result) => {

                                        this.jo=result.data.valeur;
                                        //alert('enfin '+this.jo.toString())

                    });


     return this.jo;
    }

 Pour py4web, ca donne une alternative sympa à ajax.

- on passe à la vue le callback ( l'url de la fonction backend à appeler)

- on utilise axios pour l'appeler

- en paramètre : le nom utilisé est repris dans la fonction appelée

- on finit par "return this.variabledéclaréedanslasectiondata"

 

synoptique du cycle de vie

 

 

 

 

REM :

sur les différents types de variables

 https://medium.com/@mariethielens/es2015-es6-les-diff%C3%A9rences-bb00418148ba