Introduction à Vue.js


#1

Bonjour à tous,

Le défi final est publié. Pour vous aider, voici le code en Vue.js d’une DApp simplifiée. Elle reprend la fonction connectMetamask() que nous avons vu dans la partie interface, et quelques fonctionnalités de la librairie.
Pour résumer :

  • les {{ variable }} permettent d’indiquer où sera affiché une variable
  • v-on:click donne la méthode de l’objet vue à déclencher lors de l’événement ‘click’
  • v-if controle l’affichage d’un élément, v-show se contente de masquer l’élément
  • v-for=“a in tableau” fait une boucle sur un tableau. On peut alors afficher l’élément a, et ses membres {{a.info}} {{a.date}} …
  • Ne pas oublier, this.variable pour faire une référence à une variable dans l’objet vue, de même pour les méthodes qui sont listées.
  • Pour le retour d’une promesse, comme ici réseau, le v-if permet d’éviter une erreur tant qu’on attend la réponse
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> Dapp Basique  </title>
</head>
<body>

<div id="app">
  <h5>Bienvenue {{ nom }}</h5>
  <button v-on:click="connectMetamask()">Connect</button> 

  <section  v-show="connecte">
    <p v-if="reseau">Réseau actuel : {{reseau.name}} (n° {{reseau.chainId}})</sup></p>

    <h5>List élèves</h5>
    <ol>
        <li v-for="eleve in elevesAlyra">
          {{ eleve }}
        </li>
    </ol>
  </section>
</div>

  
  <script>

var app = new Vue({
  el: '#app',
  data: {
    nom: 'inconnu',
    provider: {},
    adresses: [],
    reseau:"",
    connecte: false,
    elevesAlyra: ["Fatima","Dominique","Sidy", "Paul", "..."]
  },
  methods:{
    connectMetamask: async function() {
      this.addresses = await ethereum.enable()
      this.provider = await new ethers.providers.Web3Provider(ethereum)
      this.nom = this.addresses[0]
      this.connecte = true
      this.getNetwork();
    },
    getNetwork: async function() {
      this.reseau = await this.provider.getNetwork()   
    }
  }
})
  </script>

  <script src="https://cdn.ethers.io/scripts/ethers-v4.min.js"></script>

</body>
</html>

Utiliser des librairies accélère le développement mais demande aussi des adaptations supplémentaires. Pour un tutoriel complet :