Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Marina Mosti
Marina Mosti

Posted on • Edited 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 incorporateVue 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 likenpm,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 calledindex.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><divid="app"></div></body></html>
Enter fullscreen modeExit fullscreen mode

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

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

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

Place this code after our last script tag.

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

So what's happening here?
We created ournew 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 theapp id.
  2. data object. Every Vueinstance 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 JavaScriptobject, so we assign it one with the{ } syntax. Inside, we place a property.
  3. myLocalProperty. This property is defined inside thedata 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 upindex.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><divid="app"><p>My local property: {{ myLocalProperty }}</p></div><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>constapp=newVue({el:'#app',data:{myLocalProperty:'Im a local property value'}});</script></body></html>
Enter fullscreen modeExit fullscreen mode

Pay close attention to this line:

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

What's happening here is calledvariable interpolation, which is a fancy term for "I'm going to display the content of mymyLocalProperty 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 insidemyLocalProperty to some other text and reload the page, you should see the text update accordingly.

Reactivity

Finally, for this lesson, let's talk aboutreactivity. You may have heard thatVue is areactive 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 modeExit fullscreen mode

You will see the pagereact to this variable change!


Stay tuned for part two!

Top comments(29)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
jenlooper profile image
Jen Looper
As an educator, author and technologist, Jen Looper has over 24 years' experience as a web and mobile developer, specializing in creating cross-platform web & mobile apps.
  • Location
    Boston, MA
  • Education
    PhD, French Literature, U. C. Berkeley
  • Pronouns
    she/her
  • Work
    Director of Developer Relations at Cloudinary
  • Joined

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

CollapseExpand
 
andy profile image
Andy Zhao (he/him)
uh oh where'd my bio go!
  • Education
    Actualize Coding Bootcamp
  • Joined

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

CollapseExpand
 
marinamosti profile image
Marina Mosti
Marina Mosti is a full-stack web developer with over 14 years of experience in the field. She enjoys mentoring other women on JavaScript and her favorite framework, Vue.
  • Joined

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

CollapseExpand
 
lkopacz profile image
Lindsey Kopacz
I'm a self-taught Front End & JS Dev and professional learner with accessibility expertise. I'm passionate about breaking down concepts into relatable concepts, making it more approachable.
  • Joined
• Edited on• Edited

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

CollapseExpand
 
rodz profile image
Rodrigo Gomez
  • Joined
• Edited on• Edited

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.

CollapseExpand
 
dse profile image
d.s.e
Fullstack Developer currently using Django, Flask, Python and Vue at work, but has also experience in Embedded Linux things with YoctoProject and programming microcontrollers.
  • Location
    Munich, Germany
  • Work
    Fullstack Developer
  • Joined

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

CollapseExpand
 
marinamosti profile image
Marina Mosti
Marina Mosti is a full-stack web developer with over 14 years of experience in the field. She enjoys mentoring other women on JavaScript and her favorite framework, Vue.
  • Joined

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

CollapseExpand
 
akwetey profile image
Jonathan Akwetey
I'm a passionate developer
  • Location
    Accra
  • Work
    Fullstack developer at Fundihub
  • Joined

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

CollapseExpand
 
marinamosti profile image
Marina Mosti
Marina Mosti is a full-stack web developer with over 14 years of experience in the field. She enjoys mentoring other women on JavaScript and her favorite framework, Vue.
  • Joined

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 :)

CollapseExpand
 
akwetey profile image
Jonathan Akwetey
I'm a passionate developer
  • Location
    Accra
  • Work
    Fullstack developer at Fundihub
  • Joined

great..i will be looking forward to it.

CollapseExpand
 
f15c0 profile image
f15c0
shares a lot of interests learning and understanding other ways of coding...
  • Education
    B.Sc Computer Science
  • Work
    Developer at Pillar Inc.
  • Joined

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

CollapseExpand
 
ical10 profile image
Husni Rizal
Love to create things. Curious about tech and science. Into yoga and meditation.
  • Location
    Jakarta
  • Education
    Université de Paris - Master of Earth Science
  • Work
    Full-stack JavaScript Developer
  • Joined
• Edited on• Edited

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?

CollapseExpand
 
alam487 profile image
Alam487
My name is md aalam and i am working as a junior software engineer

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

CollapseExpand
 
pwnchaurasia profile image
Pawan Chaurasia
Not your regular fullstack developer next door.
  • Location
    Bengaluru
  • Education
    bachelors of technology
  • Work
    FullStack Python Django developer at Anlyz
  • Joined

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

CollapseExpand
 
marinamosti profile image
Marina Mosti
Marina Mosti is a full-stack web developer with over 14 years of experience in the field. She enjoys mentoring other women on JavaScript and her favorite framework, Vue.
  • Joined

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 ;)

CollapseExpand
 
pwnchaurasia profile image
Pawan Chaurasia
Not your regular fullstack developer next door.
  • Location
    Bengaluru
  • Education
    bachelors of technology
  • Work
    FullStack Python Django developer at Anlyz
  • Joined

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
Marina Mosti is a full-stack web developer with over 14 years of experience in the field. She enjoys mentoring other women on JavaScript and her favorite framework, Vue.
  • Joined

Sorry, I don't do that :)

CollapseExpand
 
pravinkumar95 profile image
Pravin kumar
I am a web dev with passion for building things. Always learning and enjoying🤪
  • Location
    Bangalore
  • Education
    PSG college of technology
  • Work
    Software developer at Accenture
  • Joined

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

CollapseExpand
 
marinamosti profile image
Marina Mosti
Marina Mosti is a full-stack web developer with over 14 years of experience in the field. She enjoys mentoring other women on JavaScript and her favorite framework, Vue.
  • Joined

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

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Marina Mosti is a full-stack web developer with over 14 years of experience in the field. She enjoys mentoring other women on JavaScript and her favorite framework, Vue.
  • Joined

More fromMarina Mosti

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp