vue.js training

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <style>
    .flex {
      
      display:flex;
     
      
    }
    
    
    .menu-items {
      
      padding:5px;
      background:#045600;
    color:white;
      font-family:arial;
      width:100%;
      text-align:center;
 
      
    }
    
    button {
      
     width:100%; 
    }
    
    
    
  </style>
</head>

<body>
 <div id="app">
   
   <div id="menu" class="flex">
     <div @click="menuClick(x)" class="menu-items" v-for="x in menu">{{x}}</div>
     
 
     
   </div>
       <h3>Some heading</h3>
   
      <div class="flex">
     <button @click="buttonClick(x)"  v-for="x in buttons">{{x}}</button>
     
 
     
   </div>

</div> 
  
  
  
  <script>
    
    
    var menu = ['a','b','c','d'];
        var buttons = ['a1','b2','c3','d4'];
var vm = new Vue({
  el: '#app',
  data: {
    menu:menu,
    buttons:buttons,
    menuItem:'a'
  
  
  },
  methods: {
  menuClick:function (f) {
    
    this.menuItem = f;
  }  ,
     buttonClick:function (f) {
    
   
  }  
    
    
  }
  
  
  
  
  
})

</script>
</body>

https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js