Script vue : Exemple complet Vue.js avec les outils Vue CLI et Vue UI

<script type="text/javascript">window.location="/demo/vue/index.html";</script>

<template>  <div id="app">    <img alt="Vue logo" src="./assets/logo-vue.png" class="logo">    <img alt="TJS logo" src="./assets/logo-tjs.png" class="logo">    <HelloWorld       titre  = "Application Vue.js du livre Tout JavaScript"      titre2 = "Exemple complet utilisant <i><b>Vue CLI</b></i>"    ></HelloWorld>    <Horloge top="true" right="true"></Horloge>    <Coins sort="alpha"></Coins>  </div></template><script>import HelloWorld from './components/HelloWorld.vue'import Horloge    from './components/Horloge.vue'import Coins      from './components/Coins.vue'var coins = [  {code: "BTC", img: "media/btc.png", name: "Bitcoin", cours: 0},  {code: "XMR", img: "media/xmr.png", name: "Monero", cours: 0},  {code: "ETC", img: "media/etc.png", name: "Ethereum Classic", cours: 0},  {code: "ETH", img: "media/eth.png", name: "Ethereum", cours: 0},];export default {  name: 'App',  data: function() {    return {      coins: coins    }  },  components: {    HelloWorld,    Coins,    Horloge  }}<style>#app {  font-family: Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;}img.logo {  width:100px;  margin:25px;}</style>

<template>  <div class="hello">    <h1>{{ titre }}</h1>    <h2 v-html="titre2"></h2>  </div></template><script>export default {  name: 'HelloWorld',  props: ["titre", "titre2"]}<style scoped>h1 {  font-size: 28px;      }    h2 {  font-size: 22px;  font-weight: normal; }    </style>

<template>  <div class="horloge">    <div id="heure"          v-bind:class="{posT: top, posB: bottom, posR: right, posL: left, active: mouseOn}"         v-on:mouseover="onMouseOver"         v-on:mouseout ="onMouseOut"    >      {{ horloge }}     </div>  </div></template><script>export default {  name: 'Horloge',  /* Définition des propriétés pour le positionnement CSS */  props: ["top", "bottom", "right", "left"],  data: function () {     return {      dt: new Date(),   /* Heure du jour */      mouseOn: false    /* La souris survole le composant */    }  },  computed: {    /* Propriété calculée contenant l'heure au format HH:MM:SS */      horloge: function() {      var h=this.dt.getHours(), m=this.dt.getMinutes(), s=this.dt.getSeconds();      h = (h<10?"0":"") + h;      m = (m<10?"0":"") + m;      s = (s<10?"0":"") + s;          return h+":"+m+":"+s;    }  },  methods: {    onMouseOver: function() {      this.mouseOn = true;   /* Activation de la donnée mouseOn */    },    onMouseOut: function() {      this.mouseOn = false;  /* Désctivation de la donnée mouseOn */    },    tick: function() {      this.dt=new Date();    /* Mise à jour de l'heure */      }  },  /* Lancement du timer quand le composant est prêt */  mounted: function () {     var component = this; /* component est passé dans setInterval */    setInterval(function() {      component.tick();    }, 500);  }}<style scoped>div#heure {  position: absolute;  font-size:25px;  font-weight: bold;  padding: 3px;  border:5px solid #000;  border-radius:9px;  cursor: pointer;  background: #fff;}.active {  background:#000 !important;  color:#fff;}.posT { top: 10px;    }.posB { bottom: 10px; }.posR { right: 10px;  }.posL { left: 10px;   }</style>

<template><li id="coin">  <div       v-on:mouseover= "onMouseOver"       v-on:mouseout = "onMouseOut"       v-on:click    = "click"       v-bind:class  = "{active: mouseOn}"    >      <img  v-bind:src="'https://www.toutjavascript.com/livre/' + img" >       <span class="bold">{{ code }}</span>      <span class="name">{{ name}}</span>      <span class="cours" v-html="euro"></span>  </div></li></template><script>    import axios from 'axios'    export default {  name: 'Coin',  props: ["code", "name", "img", "callAsk"],  data: function () {    return {      cours: -1,      mouseOn: false,    }  },  computed: {    euro: function() {      if (this.cours<0) {return "";}      return this.cours.toFixed(2)+"  &euro;";    }  },  methods: {    onMouseOver: function() {      this.mouseOn = true;    },    onMouseOut: function() {      this.mouseOn = false;    },    /* Appel AJAX pour determiner le cours */    click: function() {      axios.get("https://min-api.cryptocompare.com/data/price?fsym="+this.code+"&tsyms=USD,EUR")           .then(response => {             /* Le promise est tenue : on utilise la réponse du service */               console.log(response.data); /* Retour du type {USD: 9195.55, EUR: 8155.18} */             this.cours=response.data.EUR;             /* Envoi de l'event newCall avec le code crypto et son cours */             this.$emit("newCall", {code: this.code, cours: this.cours});           })           .catch(e => { /* Erreur lors de l'appel, l'erreur est ajouté à la pile */             this.errors.push(e);           })    },  },  watch: {    /* Surveille la variable callAsk et lance l'appel AJAX si elle vaut true */      "callAsk": function() {      if (this.callAsk) {        this.click()      }    }  }  }<style scoped>img {  width: 16px;  height: 16px;}.bold {  font-weight: bold;   margin-left: 8px;}.name {  margin-left: 8px;}.cours {  float: right;}.active {  background:#000;  color:#fff;}li {  cursor: pointer;  margin-bottom:2px;}li div {  padding:3px;  }</style>