I’ve created a very simple Vue.js sample app you can run immediately to see different Vue concepts in action.
Get the code at: https://github.com/jsnelders/vuejs-sample
Simply download the 2 files and run vueapp.html in a browser (it should even run from your hard drive). No compiling or tools required.
See in action at https://jsnelders.com/vuejs_sample/.
The app is a simple way to see the most common elements of Vue in action:
- Setting up a simple in-page “app”.
- Setting the “data” model.
- Creating methods (for example for handling click events.
- Using if statements.
- Using for loops.
- Creating “hash” routes which map to different “views” in the app that you can switch between (think of them as pages within a page).
- Creating components
- With templates in the HTML page.
- Attaching them to routes.
- Stand-alone components you can use in your app, and allow you to pass data in from the app, and get data back from the component via events.
These simple concepts should cover 95% of your Vue.js needs.