Comparison With Vanilla Javascript

  • 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.I might write a function that says list of stuff. I create a for loop, and I’m going through each one.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 will say div id=”container”.this yields the list of stuffs.

  • In Vue instance 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.Then,In Html i call div id-“app” and then <ul> and <li v-for=”items in items”> and output the items and that”s all we need to do to get the items in output

    ../../_images/117.png
    ../../_images/214.png

Vue.js is:-

../../_images/314.png