Look at that Vue

So you may have heard of several different front end frameworks, and that is probably because there are a few that deserve your attention! Front end frameworks help your site feel more interactive, and they handle the interactions with the back end to make the user experience super buttery smooth! Most of them use Javascript to some extent so that you can modify the DOM on the fly. React is certainly super popular right now, it was made by Facebook and is very widely used. Angular is also widely used and it was made by Google. But there is an outlier that is popular, that hasn’t been made by a tech giant. It is called Vue.

Photo by Paul Skorupskas on Unsplash

Vue was made by Evan You, and it was originally just a small project he made in his free time, that has blown up to compete with the Big guys at Google and Facebook! I think it is a pretty awesome story honestly.

So what is the deal with Vue? It works pretty similarly to the other front end frameworks, but it is praised for its simplicity and for how easy it is to learn. Let’s get a quick run down of Vue.

Vue files normally have three sections in them, the template, the script, and the style.

<template>
   <div>
       <h1>This is the page for {{name}}</h1>
       <h3>He is a {{occupation}}</h3>
   </div>
</template>
<script>
    export default {
    name: 'myFirstVue'
    data() {
         name: 'Ben',
         occupation: 'coder'
       }
    }
</script>
<style scoped>
    h1 {
       text-color: red;
    }
</style>

Alright, so I just threw a good chunk of info at you, but I bet it makes a good amount of sense already. The template portion of the file, looks just like HTML, and that is what will be rendered when this component is called. Then we have the script section. The script is where we handle all of the logic and exporting the file, storing data, and all of that other jazz. Finally we have the style, and you guessed it, that is where we can have CSS and style for our component. But there is a really nice added feature here, that little thing that says “scoped” means that only this file will be affected by the styling in that style block.

You can also see in the above template section how I was able to use the data from the script section by using double curly braces. I don’t want to get too deep into everything that can be done with vue here, but let me give you an example of how we would iterate through a list, and how we would respond to an event!

<template>
<div>
   <h1>Check out my list of Cookies!</h1>
   <ul>
     <li v-for="cookie in cookies" v-bind:key="cookies.indexOf(cookie)">
      {{cookie}}
    </li>
   </ul>
   <button v-on:click="logCookies">I like Cookies!</button>
   </div>
</template>
<script>
export default {
   name: 'example',
   data() {
      cookies: ['snickerdoodle', "chocolate chip", "oatmeal raisin"]
   },
   methods: {
      logCookies() {
         console.log("I LIKE COOKIES")
      }
   }
}
</script>
<style scoped>
</style>

So first let’s check out how we make an event, in the tag of the element associated with the event we simply put

v-on:click="ourMethodName"

Seems pretty and simple and readable to me! There are also plenty of other events besides click that you can listen for. Also, we should mention how we got our method. In the export section of the script, we add a new object to the exported object with the key of methods. In the methods object, we can put any methods that we would want to use in our file!

Awesome, now let’s look at iteration. I am gonna pull this one apart a little more.

<li v-for="cookie in cookies" v-bind:key="cookies.indexOf(cookie)">
   {{cookie}}
</li>

So we can see the line that says “v-for=”cookie in cookies”, this syntax might feel kind of familiar, but we are saying that we are going to iterate over each item in the cookies array, and call each item cookie. This way, we can make an li for each element! Cool stuff, right? We still have those double curly braces in the li to display the data in the li. The final thing to mention is the “v-bind:key”. When you iterate in Vue, it requires each element to have a unique key. In this case, I just used the index of the element in the array (this isn’t the best practice, but it works here). So what is v-bind? v-bind is how you dynamically bind some data to an attribute in Vue, another common use of this is binding classes.

There are countless ways to utilize the handful of things I have mentioned above, and there are countless things I never even mentioned!! Another great benefit of Vue is it’s AMAZING documentation. You can easily learn everything you need from checking it out here. I hope you spend some time checking out Vue, I have found it to be a lot easier to work with than React and I think it is a boat load of fun!

Happy Coding! Let me know what you create!