The quickest way to start using Vue2

In the last decade, a lot of the tools for web development have moved to the web, so let's go with the flow and start a new pen on http://codepen.io/.

Once you navigate your browser to https://codepen.io, you'll be greeted with the following screen:

Click on the Create dropdown (in the main navigation, in the top-right area of the screen), and then click New Pen. Once you do, you will see the default editor setup:

Next, click the Settings button in the top right of the screen, and in the popup that appears choose JavaScript:

Next, in the Quick-add drop-down field, select the Vue option. Once you do, the first input will be filled out with the current minified version of Vue which is served from the Cloudflare CDN, or, more specifically, from this link: https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js.

That's it! We're ready to start using Vue2 in our Codepen project.

One thing to understand about Vue is that it makes our HTML dynamic. This is achieved by adding mustache syntax. This syntax is very easy to understand. We simply insert it inside an HTML element. For example, we can add mustache syntax to an h1 tag like this:

<h1>{{ heading1 }}</h1>

So, let's go over how this works in detail. Feel free to work on your own pen or see the example here: https://codepen.io/AjdinImsirovic/pen/rKYyvE.