A VueJS hello world

Why vue.js? It is extremely lean and small! The file size is approx 16kb minified and gzipped without the router framework. It is also very fast at runtime.

In this example, we will use a CDN from and import the library to get access to the VueJS library. We will add a simple div that contains an input text and will display the text as a paragraph on input change event.

Let’s create a vue instance in the JavaScript section. The ‘el’ property is a reserved property for VueJS which takes a string value; with this string value we’re saying which part of our HTML code should be under control using this instance. ‘data’ and ‘methods’ are reserved properties and accept object values. The v-on:input in html section will call the changeTitle method created in the vue instance.

Hit Ctrl + Enter and voila… 🙂