Beginner Intro to Vue.js

Seann Branchfield
Aug 30, 2019 · 2 min read

Unlike React and Angular, Vue can be used more incrementally. In other words, you can use as little or as much of it as you want. Having a framework that can be more lightweight is a great option if that is what you need.

Adding Vue

Adding Vue to a project is easy! Add a script tag in the HTML and use the cdn:

<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Vue without Components

While React and Angular use components as the main building block, you can use Vue without using components. Vue at its most basic can be used by making a new Vue instance and setting variables in the data object for use in the HTML.

The html file will look something like this:

We need to import our js file as a script into our HTML just like any other js file. The js file has our data which is very important. From there, imagine that there is a <h1> tag where we want to put the name of the app.

Because appTitle has a value in the data object of the Vue instance, the value can be read and the final result is:

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade