<div id="app">
  <div class="container">
    <h1>Input examples <small>Vue.js</small> </h1>  
    <br>       
    <form v-on:submit.prevent="submitForm">
    
      <!-- text input -->
      <div class="form-group">
        <label for="username" class="form-label">Username:</label> (input:text)
        <input type="text" class="form-control" id="formData.username" v-model="formData.username" />            
      </div>         
      <div class="text-right"><span class="badge badge-info">field value: "{{ formData.username }}"</span></div>
      <hr>    

      <!-- password input -->
      <div class="form-group">
        <label for="password" class="form-label">Password:</label> (input:password)
        <input type="password" class="form-control" id="password" v-model="formData.password" />            
      </div>         
      <div class="text-right"><span class="badge badge-info">field value: "{{ formData.password }}"</span></div>
      <hr>    

      <!-- radio -->
      <div class="form-group">
        <label class="form-label">Gender:</label> (radio)
        <div v-for="g in genders">
          <input type="radio" v-model="formData.gender" :value="g.value" />                      
          <label class="custom-control-label" for="customRadio1"> {{ g.label }}</label>                   
        </template>
      </div>         
      <div class="text-right"><span class="badge badge-info">field value: "{{ formData.gender }}"</span></div>
      <hr>   

      <!-- checkbox -->
      <div class="form-group">
        <label class="form-label">Interests:</label> (checkbox)
        <div v-for="i in setOfInterests">
          <input type="checkbox" v-model="formData.interests" :value="i.value" />                      
          <label class="custom-control-label" for="customRadio1"> {{ i.label }}</label>                   
        </template>
      </div>         
      <div class="text-right"><span class="badge badge-info">field value: "{{ formData.interests }}"</span></div>
      <hr>   

      <!-- select -->
      <div class="form-group">
        <label class="form-label">Favourite IDE:</label> (input:select)    
        <select v-model="formData.favouriteIDE" class="form-control">
          <option v-for="ide in setOfIDEs" :value="ide.value">{{ ide.label }}</option>        
        </select>
      </div>         
      <div class="text-right"><span class="badge badge-info">field value: "{{ formData.favouriteIDE }}"</span></div>
      <hr>    

      <!-- multiple select -->
      <div class="form-group">
        <label class="form-label">Software you are using</label> (input:multi-select)    
        <select v-model="formData.softwares" class="form-control" multiple>
          <option v-for="ide in setOfSoftwares" :value="ide.value">{{ ide.label }}</option>        
        </select>
      </div>         
      <div class="text-right"><span class="badge badge-info">field value: "{{ formData.softwares }}"</span></div>
      <hr> 

      <!-- textarea -->    
      <div class="form-group">
        <label for="aboutYou" class="form-label">About You:</label> (textarea)
        <textarea type="text" class="form-control" id="aboutYou" v-model="formData.aboutYou"></textarea>
      </div>         
      <div class="text-right"><span class="badge badge-info">field value: "{{ formData.aboutYou }}"</span></div>
      <hr>       

      <!-- button -->
      <label for="subscribe" class="form-label">Subscribe newsletter:</label> (Button)<br />
      <button type="button" id="subscribe" :class="{btn: true, 'btn-primary': formData.subscribe, 'btn-default': !formData.subscribe}" @click="formData.subscribe=!formData.subscribe">
        {{ formData.subscribe?'Yes':'No' }}
      </button>
      <div class="text-right"><span class="badge badge-info">field value: "{{ formData.subscribe }}"</span></div>
      <hr>             
      
      <!-- submit -->
      <div class="form-group">
        <label for="send" class="form-label">Submit form:</label> (input:submit)<br />
        <input type="submit" id="send" value="Send" class="form-control btn btn-primary"/>
      </div>
      
      <div class="text-right"><span class="badge badge-info badge-multiline">form data: "{{ JSON.stringify(formData) }}"</span></div>
      <hr>                  
</div>
    
<div class="container-fluid footer text-center">    
  <p>A teljes cikket elolvashatod az ITHub-on. Klikkelj a logóra alább!</p>
  <p><em>You can read the Hungarian full article on the ITHub. Click the logo below!</em></p>
  <a href="https://ithub.hu/blog/post/Ismerkedes-a-Vuejs-keretrendszerrel---2-resz---Urlapok-komponensek/" target="ithub">
    <img src="https://ithub.hu/images/ithub-logo-dark.png" alt="ithub logo" style="width: 85px; height: auto;">    
  </a>  
</div>
h1 {
  color: #4fc08d;
}

h1 small {
  color: darkgray;
}

.form-label {
  font-weight: bold; 
  text-align: right;
}

.badge.badge-info {
  background-color: #4fc08d;
  font-size: 1.1em;
  font-weight: normal;    
}

hr {
  margin-top: 5px;
  margin-bottom: 10px;
  border-color: #4fc08d;
  border-style: dashed;
}

.btn.btn-primary {
    background-color: #4fc08d;
}

.badge-multiline {
  word-wrap: break-word;
  white-space:normal;
  text-align: left;
  width: 40%;
}

/** footer ***/

.container-fluid {  
  width: 100%;
  margin: 10px 0;
  clear: both;   
}

.footer {
  background-color: #1B1C1D;
  padding: 10px 10px;;
  color: white;
  font-size: 20px;
  font-family: arial;
  text-height: 40px;
  
  em {
    color: #aaa;  
  }
  
  a {
    display: inline-block;
    border: 1px solid #aaa;
    border-radius: 10px;
    padding: 10px;    
    color: #ddd;
    text-decoration: none;    
  }
}
new Vue({
  el: '#app',
  data: {
    formData: {
      username: 'John',
      password: 'Wick',
      gender: 'male',  
      interests: ['cola', 'coffee'],
      favouriteIDE: 'sublime',
      softwares: ['win10', 'phpstorm', 'sublime'],
      aboutYou: "",   
      subscribe: true
    },
    genders: [
      {value: '-', label: 'not set'},
      {value: 'M', label: 'male'},
      {value: 'F', label: 'femaile'},
    ],
    
    setOfInterests: [      
      {value: 'pizza', label: 'Pizza'},
      {value: 'cola', label: 'Cola'},
      {value: 'chips', label: 'Chips'},
      {value: 'cup of Tea', label: 'Cup of Tea'},
      {value: 'coffee', label: 'Coffee'},
    ],    
    setOfIDEs : [
      {value: 'codepen', label: 'codepen.io'},
      {value: 'webstorm', label: 'WebStorm'},
      {value: 'phpstorm', label: 'PHPStorm'},
      {value: 'sublime', label: 'Sublime Text'},
      {value: 'notepadpp', label: 'NotePad++'},
    ],    
    setOfSoftwares : [
      {value: 'win10', label: 'Microsoft Windows 10'},
      {value: 'debian', label: 'Debian Linux'},
      {value: 'phpstorm', label: 'PHPStorm'},
      {value: 'sublime', label: 'Sublime Text'},
      {value: 'ubuntu', label: 'Ubuntu Linux'},
    ],        
  },
  methods: {
    submitForm: function() {
      alert('Submit button is clicked.')      
    }
  }
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js