Vue Tutorial Page

What is Vue?

Vue is a growing frontend framework that is used for building websites and user interfaces. It is generally used to build single page apps on the client side. Vue works with HTML, CSS, and Javascript and has a declarative and component based model to work with. One part of Vue is declarative rendering which means that Vue extends the HTML with a template syntax which gives us the ability to describe the HTML output based on the Javascript. Another part of Vue is the reactivity which means that it automatically tracks the changes made with Javascript and updates the DOM when those changes are made.

History

In 2013, when Evan You was working at Google, he was creating lots of projects using Angular. He needed to quickly prototype a huge user interface and to his surprise, at the time, there was no library or tool for that. So, he came up with the idea of creating a library that helps with fast prototyping by having lots of easy and reactive data binding and reusable components. He then decided to take the part that he liked about Angular and make a lightweight version of it and called it Vue. The first source code of Vue was released in 2013 and then Vue.js was released in 2014.

Importance and Relevance to this class

Vue is important because it is progressive framework that works with Javascript and is used to build single page applications and interfaces for the web. There are many benefits to using Vue which makes it important to use. First, it is very easy to learn and adapt to because all you need to do is download node.js and use the terminal and type a few prompts and some knowledge of HTML, CSS and Javascript in order to use it. Secondly, it is fast and lightweight so that means it is fast when working with the dom and reactivity. Thirdly, it uses the virtual DOM so this means that it kind of has a copy of the original DOM and then when updating and changing elements in the DOM, it figures out which elements to do that without using the whole tree which can save time. In addition to that, it is the 6th most popular framework and it is growing everyday. Vue is relevant to this class because it is a frontend framework that can be used with javascript and html which we learned in this class. Additionally, it relates to this class because it can be used to create single page applications which we have also learned in this class. It is easy to learn and another great framework to know that can help when creating applications for the web.

Theory

In Vue, applications are started by creating a new Vue Instance using the Vue Function. Every Vue Application consists of a Vue Instance which is the root of the application and under that root, you can have nested components. When you call a Vue instance, it adds all its properties in the data object to the reactivity system so it can alter the DOM dynamically. Additionally, Vue uses HTML syntax to bind the instance data to the rendering DOM. Then Vue just compiles the templates into Virtual DOM rendering functions. The Last Part of Vue is the Directives which is used to apply the reactivity effect to the DOM when its value changes. All directives start with v- and there are many of them such as v-if, v-for, and v-bind.

Setting up Vue

Demonstration

In this simple demonstration, we will be creating a little clothing store that has a list of items and the user can press a button to add items to their like list. So essentially, the page will be divided so on one side, you will see all the items and the other side will show the user’s liked items. This demonstration is split up into part to help you follow along.

Part 1: Creating the products and adding them to an array

Step 1: In the script tag of App.Vue component, you are going to create a class. This class will be used to create each clothing item. This is the same way that we create classes in Javascript. You are also going to create the array that will store all the items.

Step 2: Then you are going to create the products using the class that you just created. After you do that, you are going to push them into the array

Part 2: You are going to code with Vue in the template part of your App.Vue component and in this area, you are going to use a for loop to show all the products in the page.

Step 3: First create a div and then give it an id (id= “allside”). Then you are going to create another div and then within that div, you are going to create another div. In the outer div, you are going to type ( v-for: “item in clothing”). What this does is that it acts like a for loop and for every item in clothing, it will do whatever actions you specify within this div. In the inner div, give it an id named “itemprofile” so that way each clothing item has its own div and that acts as a profile. Then inside this div, you are going to have an image tag, 5 paragraph tags, and 1 button.

Step 4: For each field of the class, in order to call it/get it, you do {{}} and inside the double curly braces, you type item.____ (item.name, item.brand, and etc). This is how you call/get things from an object with Vue. In the image tag, you need to use v-bind (another directive) to the src for the image. Additionally, you will create a button and attach a function to this which we will create in the next step. For the button, you will type @click= “” and this is just a shorthand way of writing the directives. This function will take in the item id so that when the button is clicked, it will figure out which product to move to the cart. After completing this step, your page should look like the picture below.

Part 3: Create the liked item side div and also create a function for what should happen when you like an item

Step 5: You are going to make another div separate from the previous one and give it an id to identify it as the liked item side. Now you are going to create the function that is going to add it to the liked side div in the script tag. First, you need to create another array to keep track of all the items that the user has liked.

Step 6: Next you are going to create a function and what this function does is that when the user clicks on the button, it will get the div that will show the liked items. Then you are going to create a div and essentially do the same steps as above so you will create paragraph tags to put the item's name, price, and description. Lastly, you will just push these paragraph tags in the div and push that div into the div that shows the liked items. This function will be written the same way that you do it in pure Javascript.

Part 4: The css for the page to style it

Step 7: The last part of this is adding css to style the page to however you feel. Make sure you make the divs (the like side and the all items side) float so that way they are side to side on the page. You will be doing this in the style tags in your App.Vue component.

Step 8: After you have completed this, your page should look like the pictures below and when the user pressed the add to like button, it should show on the right side of the page.

Summary of the tutorial and topic

Overall, Vue is easy to learn and use because it works directly with Javascript. In the tutorial, we learned how to use vue directives like v-for and v-bind which are some of the most commonly used directives. These directives make it easy to work with Vue and do certain things. The tutorial also covers how to work with functions and click events and it is much easier in Vue because you can use the click directive and use the shorthand method to attach it to a function. This tutorial gives you a simple glance into the different feature of Vue and how they are used with Javascript. In general, Vue is a great language to learn for beginners and those who just learned Javascript because there is only a little syntax difference so there is an easy learning curve.

Sources

Intro to Vue Introduction History of Vue Pros and Conns of Vue Vue for Beginners Vue Crash Course

Links used to learn more about Vue

Vue.js W3 Schools about Vue.js Vue API Vue Crash Course Video