Video
Interactive Prototypes with VueJS
I recorded a short video to show the core principles of VueJS that make it a powerful prototyping tool that requires no setup.
What’s included:
- Dynamically render data to HTML using the simple template syntax
- Use v-model to keep user input and data in sync
- Using simple functions, like “length” in your markup
- Rendering lists using v-for (characters of a string, Array, Object, …)
- Adding user interaction with v-on (click, keyup, …) to call a method
- Using v-bind:class to conditionally apply classes to an element
What’s not included:
- entertaining music or sexy visuals
- Flux, SSR, Routing, Babel, Webpack, Functional Programming, Immutables, CSS-in-JS, … this isn’t necessary to create an interactive throw-away protoype. Save all of that for later and then use vue-cli or -nuxt-js when you want to go develop something for real 👾
With those concepts, you can already achieve a lot without writing a lot of JavaScript.
You can learn more by reading the great documentation with many more examples at vuejs.org
Enjoy and share this with your designer friends who are eager to add HTML prototypes to their toolbox but are afraid it would take them too long to learn 😎