Introduction to Vue.js

Introduction to Vue.js Comparing Vanilla JavaScript


This course has been updated! We now recommend you take the Introduction to Vue 3 course.

Check out a free preview of the full Introduction to Vue.js course:
The "Comparing Vanilla JavaScript" Lesson is part of the full, Introduction to Vue.js course featured in this preview video. Here's what you'd learn in this lesson:

Illustrating the benefits of the Vue.js framework, Sarah compares vanilla JavaScript against Vue for conditional rendering.

Get Unlimited Access Now

Transcript from the "Comparing Vanilla JavaScript" Lesson

>> Sarah: Okay, light comparison. Vanilla JavaScript versus Vue. We're gonna do a really simple thing to do, just to kind of look at how your workflow might change for something really small. So in Vanilla JavaScript, if I want to output a bunch of things on a list, let's say I have a manifest file someone gave me, and I need to just output it onto the page.

[00:00:21] I have const items, which is if you're not familiar with ES6, is like. And you have an array of values here, a bunch of stuff. Then, in order to output it onto the page, I might write a function that says list of stuff. I create a for loop, and I'm going through each one.

[00:00:40] And I'm plotting each one to these <li>s, and then I go into the dom, grab, with document query selector, I grab a container, and then I'm going to insert all of those <li>s into the container. Then I will call that function, and then in the HTML, I, I will say div id="container".

[00:00:59] So that yields this list of stuff. This is nothing special over here. So we've got this new Vue instance and we're establishing a relationship with that element with that ID of app. And then in data, I have a list that I'm calling items and I have that array.

[00:01:18] Then, in the HTML, I say div id app. I have a ul here, and then I say li v-for item in items, and output what the item is. And you can already see That that first of all, that's all I need in order to create this list. That yields all of this.

[00:01:38] But you can already see how much more declarative this is. I'm not having to write everything like steps in a recipe. I'm literally saying here is my list, and here's what I want you to do with it and the computer does the hard work for us, that's really great.

[00:01:52] So this is a really simple example. You can see how in a larger application with much more complex data, that this kind of abstraction really pays off. Okay so, the things that I love about it again are that it's clean, it's semantic. I really enjoy making apps that are semantic and that are good for blind people and things like that.

[00:02:14] With view im actually working with HTML elements a lot of the time so I can write clear semantic mark-up. It's really declarative, as you saw, it's super legible, and it's easy to maintain it's reactive which we will get into in another section.