Script vue1 : Introduction à Vue.js

Edition 2 | Chapitre 24 : Bibliothèques et frameworks / Page 351

Edition 3 | Chapitre 24 : Bibliothèques et frameworks / Page 351

<html>
<head><title>Premiers exemples avec Vue.js</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<h1>Notre première page avec Vue.js</h1> 
<h2 id="divSalut">{{ salutation }} !</h2>
<div id="divHeure">Votre navigateur indique qu'il est exactement : <b>{{ horloge }}</b>
</div>
<h3 id="divAppetit" v-if="midi">Bon appétit</h3>
<h2>Liste de crypto-monnaies</h2>
<div id="divCoin"><button v-on:click="inverser">Inverser l'ordre</button><ol><li v-for="crypto in cryptos"><b>{{ crypto.code }}</b> {{ crypto.name }} </li></ol> 
</div>
<script type="text/javascript">var dt=new Date();/* Retourne l'heure au format HH:MM:SS */function getHorloge(dt) {var h=dt.getHours(), m=dt.getMinutes(), s=dt.getSeconds();h = (h<10?"0":"") + h;m = (m<10?"0":"") + m;s = (s<10?"0":"") + s; return h+":"+m+":"+s;} /* Retourne la bonne salutation selon l'heure de la journée */function getSalutation(dt) {var h=dt.getHours()if (h<5) return "Bonne nuit"; if (h<14) return "Bonjour"; if (h<19) return "Bon après-midi"; return "Bonsoir"; }/* Liste de monnaies */var coins = [{name: "Bitcoin", code: "BTC"},{name: "Ethereum Classic", code: "ETC"},{name: "Ethereum", code: "ETH"},{name: "Monero", code: "XMR"},];console.log(coins);/* Création des objets Vue */ var salut = new Vue({el: "#divSalut",data: {salutation: getSalutation(dt)}});var heure = new Vue({el: "#divHeure",data: {horloge: getHorloge(dt)} });var appetit = new Vue({el: "#divAppetit",data: {midi: dt.getHours()==12}});var liste = new Vue({el: "#divCoin",data: {cryptos: coins},methods: {inverser: function() {this.cryptos.reverse();} }});/* Mise à jour régulière de la variable horloge */setInterval(function() {dt = new Date(); heure.horloge = getHorloge(dt);}, 500);
</script>
</body>

Exécution du script

Emulation de la console

Code source

<html><head>    <title>Premiers exemples avec Vue.js</title>    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body>    <h1>Notre première page avec Vue.js</h1>        <h2 id="divSalut">{{ salutation }} !</h2><div id="divHeure">  Votre navigateur indique qu'il est exactement :   <b>{{ horloge }}</b></div><h3 id="divAppetit" v-if="midi">Bon appétit</h3><h2>Liste de crypto-monnaies</h2><div id="divCoin">  <button v-on:click="inverser">Inverser l'ordre</button>  <ol>    <li v-for="crypto in cryptos">     <b>{{ crypto.code }}</b> {{ crypto.name }}     </li>  </ol> </div><script type="text/javascript">  var dt=new Date();  /*  Retourne l'heure au format HH:MM:SS */  function getHorloge(dt) {    var h=dt.getHours(), m=dt.getMinutes(), s=dt.getSeconds();    h = (h<10?"0":"") + h;    m = (m<10?"0":"") + m;    s = (s<10?"0":"") + s;        return h+":"+m+":"+s;  }    /* Retourne la bonne salutation selon l'heure de la journée */  function getSalutation(dt) {    var h=dt.getHours()    if (h<5)  return "Bonne nuit";      if (h<14) return "Bonjour";      if (h<19) return "Bon après-midi";      return "Bonsoir";       }      /* Liste de monnaies */  var coins = [    {name: "Bitcoin",  code: "BTC"},    {name: "Ethereum Classic", code: "ETC"},    {name: "Ethereum", code: "ETH"},    {name: "Monero",   code: "XMR"},  ];  console.log(coins);        /* Création des objets Vue */   var salut = new Vue({    el: "#divSalut",    data: {      salutation: getSalutation(dt)    }  });    var heure = new Vue({    el: "#divHeure",    data: {      horloge: getHorloge(dt)    }    });    var appetit = new Vue({    el: "#divAppetit",    data: {      midi: dt.getHours()==12    }  });    var liste = new Vue({    el: "#divCoin",    data: {      cryptos: coins    },    methods: {      inverser: function() {        this.cryptos.reverse();      }     }  });      /* Mise à jour régulière de la variable horloge */  setInterval(function() {    dt = new Date();      heure.horloge = getHorloge(dt);  }, 500);              </script></body>

Troisième édition Tout JavaScript chez Dunod

En savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Dunod Fnac Amazon

Le graph des objets JavaScript

Chargement
en cours...