Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Hello Vue</title>
    <meta charset="utf-8">
    <!-- https://unpkg.com/vue@2.6.11/dist/vue.min.js -->
    <!-- подключение фреймворка vue.js -->
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <style type="text/css">
    .active {
      color: red
    }
    .some {
      font-size: 24px;
    }
    </style>
</head>
<body>
<!-- элемент div c идентификатором app -->
<!-- v-for -->
<div id="app">
     <input type="number" v-model="price" />
     <div ref="myid">TESTsdfsdsdsdgsd</div>

     <br>
     USERID: {{serverData.userId}}
     TITLE: {{serverData.title}}
</div>
</body>
<script type="text/javascript">
    // создаем объект Vue (экземпляр Vue)

  Vue.filter('capitalize2', function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
  })


    new Vue({
  el: "#app",
  data: {
    result: '',
    price: 10.0777,
    bonus2: 2,
    message: 'some message',
    products: [
      {name: "Product1", price: 100},
      {name: "Product2", price: 200}
    ],
    serverData: {}
  },
  methods : {
      buttonclicked : function() {
        console.log('buttonclicked');
      },
      clickme : function(param){
        console.log('clickme=' + param);
      },
      changebgcolor : function() {
          this.styleobj.backgroundColor = "green";
      },
      originalcolor : function() {
          this.styleobj.backgroundColor = "red";
      }
  },
  filters: {
      capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      },
      addWord: function (value) {
        value = value.toString()
        return value + ' HELLO!';
      },
      toFixed: function(value, limit) {
        return value.toFixed(limit);
      }
  },
  mounted: function() {

      console.log("mounted!");

      /*
      var sURL = "http://localhost:8080/users.json";
      //var sURL = "https://www.cbr-xml-daily.ru/daily_json.js"
      axios.get(sURL)
      .then((response) => {
        console.log("mounted.setdata!!!");
        console.log(response.data);
        //
        console.log(JSON.stringify(response.data));

        this.serverData = response.data;

      }).catch((e) => {console.log("axios.error while get data"); })
      .then(()=>{console.log("OK")});
      */
     /*var sURL = "https://httpbin.org/get?answer=42";
     axios.get(sURL)
      .then((response) => {
        console.log("mounted.setdata!!!");
        console.log(response.data);
        //
        console.log(JSON.stringify(response.data));

        //this.serverData = response.data;

      }).catch((e) => {console.log("axios.error while get data"); })
      .then(()=>{console.log("OK")});
      */

      var answerId = 49;
      var qParam = { params: { answer: answerId}};
      var sURL = "https://httpbin.org/get";
      axios.get(sURL, qParam)
      .then((response) => {
        console.log("mounted.setdata!!!");
        console.log(response.data);
        //
        console.log(JSON.stringify(response.data));

        //this.serverData = response.data;

      }).catch((e) => {console.log("axios.error while get data"); })
      .then(()=>{console.log("OK")});

  }
})
</script>
</html>