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>
    <style type="text/css">
    .active {
      color: red
    }
    .some {
      font-size: 24px;
    }
    </style>
</head>
<body>
<!-- элемент div c идентификатором app -->
<!-- v-for -->
<div id="app">
    <!-- .prevent -->
    <a href = "http://www.google.com" @click.prevent = "clickme('test')">Click Me</a>
    <div :style="styleobj" @mouseover = "changebgcolor" @mouseout = "originalcolor"></div>
    <!-- .once -->
    <button @click.once="buttonclicked">Click Once</button>

    <div :class="[activeClass,someClass]">trrrrrr</div>
</div>
</body>
<script type="text/javascript">
    // создаем объект Vue (экземпляр Vue)
    new Vue({
  el: "#app",
  data: {
    activeClass: 'active',
    someClass: 'some',
    styleobj : {
          width:"100px",
          height:"100px",
          backgroundColor:"red"
    },
    price: 10,
    products: [
      {name: "Product1", price: 100},
      {name: "Product2", price: 200}
    ]
  },
  computed:{
    bonus: function(){
      return this.price * 0.2;
    }
  },
  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";
      }
  }
})
</script>
</html>