DEV Community

Marina Mosti
Marina Mosti

Posted on • Updated on

Hands-on Vue.js for Beginners (Part 1)

Learning a new framework can be a very daunting process for any developer, especially for one that is still learning the base language (in this case JavaScript). This is why I have decided to create this series in which I will attempt to make the learning of Vue.js as easy and digestible as possible ๐Ÿ™‚

I'm not a fan of making long drawn out introductions, so I will assume that if you're still reading:

  1. You have some basic HTML/CSS/JS knowledge. You don't need to be an experienced front-end developer to take on on Vue as a development framework, but at the very least you need to be able to write your own HTML markup, understand the basic of how CSS works and, yes, how to write javascript. In the end, this is what this is all about.

  2. That's it. No, really.

Vue as a library

There are several ways in which you can incorporate Vue into your web project. Let's start with the simplest one (which you will probably not end up using a lot).

Most tutorials/articles will assume that you have some understanding of how to set up a development environment in which you will use things like npm, webpack to set up your project - and while this is ideal because of what you get out of the box - we can start with a much simpler beginner-friendly approach. The reliable old <script> tag.

Go ahead and fire up your favorite code editor, and create a new file called index.html. (If you don't have one yet, VS Code is a popular free choice.

<html>
  <head>
    <title>Vue 101</title>
  </head>

  <body>
    <h1>Hello!</h1>
    <div id="app"></div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Nothing fancy, we're just setting the bones for a simple website. Now let's get the Vue library in there. Paste this script tag before your closing </body>.

[...]
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
Enter fullscreen mode Exit fullscreen mode

Now that Vue is being loaded into our page, we can start using it.
Let's go ahead and create a new Vue instance, by newing it up inside a <script> tag. We will give it a selector by passing #app to the el property of the options object, and that way Vue will know where our app should be rendered. (Remember that empty <div> with an ID of app?)

Place this code after our last script tag.

<script>
    const app = new Vue({
        el: '#app', // 1
        data: { // 2
            myLocalProperty: 'Im a local property value' // 3
        }
    });
</script>
Enter fullscreen mode Exit fullscreen mode

So what's happening here?
We created our new Vue instance, and pass it a configuration object. See the {} as a parameter?

  1. el: As I mentioned before, here we tell Vue where inside our HTML we want our app to be displayed. In this case, the div with the app id.
  2. data object. Every Vue instance has a local storage, like a box of variables and properties that it will hold for us and that we can use when coding our app. Data holds a JavaScript object, so we assign it one with the { } syntax. Inside, we place a property.
  3. myLocalProperty. This property is defined inside the data object for our instance, it's name is myLocalProperty and the value on the right-hand side is the value - in this case, a string.

Displaying properties on our app

Right now if you open up index.html in your browser, not much is happening.

Let's add some code to display our property inside the HTML. Your file should look like this:

<html>
    <head>
        <title>Vue 101</title>
    </head>

    <body>
        <h1>Hello!</h1>
        <div id="app">
          <p>My local property: {{ myLocalProperty }}</p>
        </div>

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

        <script>
          const app = new Vue({
            el: '#app',
            data: {
              myLocalProperty: 'Im a local property value'
            }
          });
        </script>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Pay close attention to this line:

<p>My local property: {{ myLocalProperty }}</p>
Enter fullscreen mode Exit fullscreen mode

What's happening here is called variable interpolation, which is a fancy term for "I'm going to display the content of my myLocalProperty variable in this placeholder where my {{ }} are now.

Reload the page, and you will now see the string updates to reflect our variable.

Go ahead and try to change the string inside myLocalProperty to some other text and reload the page, you should see the text update accordingly.

Reactivity

Finally, for this lesson, let's talk about reactivity. You may have heard that Vue is a reactive framework. But what exactly does this mean? Open up your console in the chrome developer tools, and with your index.html loaded type:

app.myLocalProperty = 'Vue is reactive';
Enter fullscreen mode Exit fullscreen mode

You will see the page react to this variable change!


Stay tuned for part two!

Discussion (32)

Collapse
andy profile image
Andy Zhao (he/him)

Great intro! Vue seems like a great first framework to learn.

Collapse
marinamosti profile image
Marina Mosti Author

Thanks Andy! Stay tuned for next part, will look at responding to events and methods :)

Collapse
akwetey profile image
Jonathan Akwetey

Lovely intro..i'm waiting for the part 2. But i love the cli approach.But this is great for beginners.. Thumbs up!!

Collapse
marinamosti profile image
Marina Mosti Author

Hey Jonathan, thanks. Yeah CLI is a great tool, and it will show up sometime in the series but it's a big overwhelming for beginners. Keep tuned for more :)

Collapse
akwetey profile image
Jonathan Akwetey

great..i will be looking forward to it.

Collapse
f15c0 profile image
f15c0

True Marina, i'am new to vue and this beginner's guide actually helps. thanks,

Collapse
dse profile image
d.s.e

Great, finally a framework tutorial without all that node/npm/webpack mess. Thanks a lot!

Collapse
marinamosti profile image
Marina Mosti Author

Oh, we'll get to that in due time, but not nose first. It can be very daunting! :D

Collapse
rodz profile image
Rodrigo Gomez • Edited on

Thanks for the tutorial. Distilling a topic to its essence is a great way to learn a subject. Even understanding what is happening once it is deployed to production is important: KISS. I'm still learning Vue but part of the strength of Vue seems to be its simplicity, i.e. do one thing and do it well.

Collapse
alam487 profile image
Alam487

Hi Marina. Recently I have started learning vue.js. So I am a beginner on vue and I am building a multistep form wizard in vue and I i am following your beginner guide but I was stuck at one approach. Like displaying a form based on category selection. So here we have a category field in html and whatever user enters in the category based on that enter category I want to prompt the next step. To achieve this i need some help

Collapse
ical10 profile image
Husni Rizal • Edited on

Hi Marina! Nice tutorial on Vue, really appreciate it. However, I can't seem to make the first part works. I followed exactly the code above, but myLocalProperty value was not shown! Is there something that I'm missing?

Collapse
muhammadhadi profile image
MuhammadHadi

I'm a bit late but the intro is cool I think it's going to be a great beginners guide for me

Collapse
marinamosti profile image
Marina Mosti Author

Hey Muhammad, hope you enjoy it!

Collapse
pravinkumar95 profile image
Pravin kumar

Very easy to follow! I am totally new to web development. Thanks a lot..:)

Collapse
marinamosti profile image
Marina Mosti Author

Glad you're enjoying the series Pravin. Thanks for reading!

Collapse
mixoglad profile image
๐ŸŒMixo ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿฅค

Hey Marina, can't wait for you to do some single page apps with Vue js๐Ÿ˜‰

Collapse
pwnchaurasia profile image
Pawan Chaurasia

nice intro.
In how many parts this tutorial would be ?

Collapse
marinamosti profile image
Marina Mosti Author

So far four and counting, and i dont have a set number in mind. I will keep going as long as it makes sense to, i dont want to break the natural flow by restricting this in advanced ;)

Collapse
pwnchaurasia profile image
Pawan Chaurasia

Okay nice to hear that. I will keep following it for better understanding of it. But i needed a crash course on vue if possible can you provide any ?

Thread Thread
marinamosti profile image
Marina Mosti Author

Sorry, I don't do that :)

Collapse
maen profile image
Stanley Ruheza

this is awesome

Collapse
manuelsayago15 profile image
Manuel Sayago

Awesome! I think I liked a lot Vue. I know a little of it but I feel that you explain part after part and that makes it very easy and enjoyable.

Please, keep posting!

Collapse
marinamosti profile image
Marina Mosti Author

Thanks Manuel, this series has 7 parts make sure you look for the next ones :)

Collapse
ad0791 profile image
Alexandro Disla

Well. I guess i will definitely stick with Vue. To build up my skills. It really seems to be easy to learn.

Collapse
rahamat profile image
rahamat

Iam a newbie to Vue. And this intro helped. ThanKU. In to part2 now ...

Collapse
enzo profile image
Enzo

Hi Marina, stupid question. How do you make the list of all the parts with markdown. Docs does not help for me. Thanks.

Collapse
mememe profile image
mememe

I just started learning VueJS. I find that VueJS's conventions are a mix of Angular and ReactJS concepts.

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
jenlooper profile image
Jen Looper

I don't think commenting on profile pics, either complimentary or not, is helpful. At all. Please refrain.

Collapse
asparallel profile image
AsParallel

I apologize, sometimes I don't give enough thought to how what I say might be perceived.

Collapse
lkopacz profile image
Lindsey Kopacz • Edited on

Are you serious? This is totally inappropriate. Women can code no matter how they look.

Collapse
asparallel profile image
AsParallel

I agree and apologize if my comment seemed to convey anything else. My intent was to speak to professionalism, that obvious fell flat. Please excuse my poor choice of words, and momentary lapse of professionalism.