Vue Tutorial Project 3344

Stephanie Minnis and Tyler Swedberg

About Vue

What is Vue?

Vue is a modern front-end javascript framework for creating user interfaces and single-page applications. Mainly used to help make websites or web applications.

History of Vue

Vue was created by a former software developer for Google, Evan You. From using AngularJS in numerous projects, he created Vue. He wanted it so that he would be able to take in his favorite parts of Angular and build something that was lightweight for him to use in his projects. The first source code he published was in July of 2014 and released Vue in the following year of February 2014.

Importance of Vue

Developer-friendly; helps make modern development much easier. The learning curve is very user-friendly. Has Vue-Cli, VueGUI for tools to start on projects with useful assistance, as well as the Vue community.

Useful conventions; has a good amount of resources to help save time on big projects. (why waste time reinventing the wheel when you can just use Vue**)

Flexible and scalable; Can be used for huge, modular SPA (Single Page Apps). (With a library in your project, it can create any form of your product)

Performant and Size-Efficient; The size of Vue.js is smaller, making it faster to load and uses up less bandwidth. As Vue.js handles multiple optimization processes on its own, the developers do not have to worry about refining the applications as it grows.

Relevance of Vue to the class

All of the importance stated before applies to the relevancy to this class. Mainly, so that us students can learn and understand other modern frameworks. Knowing multiple frameworks can help us succeed in our future career. As the popularity of these frameworks can change over time, the less popular it is/becomes, the less useful it’ll be, the more popular a framework is/becomes, the better it will be for the us/worker and the community, as people will be able to develop and use codes to build other work-heavy projects at a faster rate.

Theory of Vue

The core of Vue is a system that allows us to render data of the DOM declaratively. A Vue app is created after instantiating the word “Vue” to a variable. For example, in Javascript we can type out:
var app = new Vue ({el: ‘#app’, data: { message: ‘Hello World!’}});

While in the html it will be typed in as:
‹div id="app"› {{message}} ‹/div›
The el refers to the id in the div of your html.
And the {{message}} is referenced to the message property on the Vue instance.
With Vue app attaching itself to the DOM element of the #app, it takes full control.

Usage of directives, event listeners and methods are important to Vue.
Directives are prefixed with v- to show that they are special attributes from Vue that react to the DOM.
Event listeners are attached to the directive (v-on) to invoke our methods created in our Vue instances,

Although we did not use components, it is a very essential part of Vue. (A Vue instance with predefined options).

Installation Process

1. Install VSCode
Link to install https://code.visualstudio.com/
2. Open VSCode
Open VScode > Explorer > No Folder Opened >
Click Open Folder > create a new folder and name it
3. Create an HTML File
Click the new file button > name your file and specify
the type of file you want it to be > enter
4. Start Writing your Code
Write html and then tab and press enter on html:5 >
with this you will get the basic setup for html
5. Import Vue Framework
Then import the Vue library framework to your html page in your script tag.
6. Import Bootstrap
Link for more info HERE
7. Import AJAX
So it can make a request and create it as JSON data
8. Done
Start coding your project!

Vue Tutorial


1. Create a Vue Instance
We first start off the project by creating a vue instance.
This is essential to DOM manipulation as well as creating properties.
2. Create an el property
el is used to give vue an existing html element to manipulate.
3. Properties we created in data
In the data property we created other properties
that can be accessed through data.
In this case, sittename, showProduct, a, states array,
order array, products, cart.
4. The methods property
This is where you store all of your event handlers that contain the logic to the web application.
All of these methods correspond to inputs that you made in the html
You then call which function you want to call in the html element
For example
5. The computed property
In the computed property, we create the function counts the items added
into the cart as well as sorting the products listed in alphabetical order.
6. Filter Property
This filtering property consists of the formatPrice function.
This checks to see whether the price is correctly formatted as an integer
We use calculations here so that we can also format the integer correctly into
USD Currency with two decimal places.
7. Using AJAX Request
By doing this we populate the products array with the
JSON result from the AJAX query that is connected uses an HTTP GET
to get all the Webcomics information from the database from the API.
The database
8. Completed Code
The code below is what you should end up with. This contains all of
the properties and functions we have created in the Vue instance.