Vue.js sans build step

https://www.smashingmagazine.com/2018/02/jquery-vue-javascript/

by Anton

HTML

<div id="app">
  <label for="name">Name:</label>
  <input id="name" type="text" v-model="name" /> <!-- v-model.lazy to update on Enter -->
  <p>Name: {{ name }}</p>
  
  <button @click="active = !active" :aria-pressed="active ? 'true' : 'false'">Toggle class</button>
  <p :class="{ red: active }">Change style</p>
  
  <button @click="show = !show">Show/Hide</button>
  <p v-if="show">Hello</p>
  
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>

CSS

.red {
  color: red;
}

JavaScript

new Vue({
  //this targets the div id app
  el: '#app',
  data: {
    name: '', //this stores data values for ‘name’
    active: false,
    show: true
  }
});