/js-gui-vue

JavaScript is a great language for writing quick apps with user interaction. Vue.js is an easy addition for two-way data binding (immediate updates are easy and no more 'document.getElementById')

Primary LanguageHTMLMIT LicenseMIT

js-gui-vue

JavaScript is a great language for writing and testing quick apps with user interaction.

Vue.js is an easy addition that enables two-way data binding (immediate updates are easy and no more 'document.getElementById')

Links

Requirements

  • A browser (e.g., Chrome)
  • A text editor (e.g., VS Code or Notepad++, or Chrome)

Benefits

  • No downloads required - almost every computer already has a browser
  • Built-in features for user input
  • Easy-to-style with a CSS CDN link
  • Easy-to-use Vue components with a Vue.js CDN link

No Build Tools Required

  • This example does not require any build tools

Converting an App to use Vue

  1. Create a wrapper component and assign an id
  2. For each data element, duplicate the 'id' attribute as a 'v-model' attribute
  3. Remove any default values from the HTML input elements
  4. If you used a button to trigger an update event, you can delete it. Vue will automatically update results as inputs change.
  5. Covert output HTML elements to use {{identifier}} for the inner HTML. The 'id' attribute is not needed for updating the data and can be removed.

Adding Vue from CDN

Add Vue.js with a script element pointing to the CDN source.

  <!-- Before custom code, add Vue.js from https://cdnjs.com/libraries/vue -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>

Specifying Vue Compoents

Then, remove any calculational event handlers, and instead, specify your Vue components. For each new Vue component, define:

  1. el - short for HTML element for this component
  2. data - the inputs, defined in your HTML with the 'v-model' attribute
  3. computed - the outputs, placed in inner HTML with double curly braces

An example is shown below.

// testable function
const add = (x, y) => { return x + y }

// new Vue component
const adder = new Vue({
  el: '#adder',
  data: {
    guest: 'Emmett',
    firstNumber: 5,
    secondNumber: 3
  },
  computed: {
    result: function () {
      const i = parseInt(this.firstNumber)
      const j = parseInt(this.secondNumber)
      return `${this.guest}, your sum is ${add(i, j)}.`
    }
  }
})

Resources

See Also