Collection of Vue.js reference examples for teaching and learning Vue. These examples assume NO experience of front end by the reader. I myself had more experience as a backend engineer and found most front end examples required too much familiarity of HTML, Javascript and the front end stack. I journaled these examples to help myself and others.
The early examples 1-15, are intentionally simple while the remainder start using VUE cli and NUXT which are more sophisticated patterns (they generate complex starting projects) that it is helpful to build up to. VUE cli is what an experienced front end developer may use if they are unfamiliar with Vue and Nuxt would be used by an intermediate Vue Front End engineer as it provides more benefits as well as more complexity.
These examples can be accessed by opening the index.html file within your browser. The related javascript and css files are referenced by this file when appropriate. This is a good way to test javascript and Vue snippets found on the web.
- Hello World
- Instance
- Vbind
- Computed
- Watcher
- Class
- Events
- Vmodel
- Component
- ComponentMessage
- ComponentDynamic
- Async
These are interesting if you wish to jumpstart into data visualization.
These examples start with the VUE cli and represent the beginnings of the single page app pattern. This pattern differs from the index.html file in that javascript files are separated out into .vue files which is easier to maintain in larger projects.
The Nuxt project is an attempt to improve on the Vue cli by providing some common settings as defaults in the generated project.
If any of this is helpful to you or you wish to improve upon these examples, pull requests are absolutely welcome!