BrocolliHome

Vue.js Introduction

Vue is a Progressive JavaScript Frontend Framework used in JavaScript and TypeScript for building website user interfaces (UI).

What does “Progressive Framework” even mean? It’s a term coined by the co-founder of Vue, Evan You, to explain what Vue is. “Progressive framework” means that it’s a framework that can be gradually adopted into your project where you can use as little of Vue or as much of Vue to suit the needs of your project.

Depending on your application, Vue should be able to handle most browser related cases. You can create a basic page that displays some rudimentary text like your name – you can extend this further by having multiple pages and creating something like a blog site. You can go even further and look at “Single-Page Applications” (SPA) so that you don’t reload the page, you can have a look at “Server-Side Rendering” (SSR) so that your Vue application is rendered before being showing up on the page. There are more different applications that what has been described here.

Single-File Components

When you’re dealing with displaying your HTML code, trying to integrate your JavaScript, and styling your page with CSS, you can have that all in the same file known as Single-File Components (SFC) which their file extension ends in *.vue.

Below is a brief demonstration of what your typical SFC looks like:

<script setup>
import { ref } from 'vue';

const count = ref(0);

const increment = () => {
	count.value++;
};
</script>

<template>
	<button @click="increment" />
	<div class="display">{{ count }}</div>
</template>

<style scoped>
.display {
  background-color: blue;
}
</style>

You can see it’s composed of three different sections, <script>, <template>, and <style>.

<script> tags is where we house the JavaScript code. We’re creating a variable called count which will house a numeric value, then we will create a function called increment so that the variable can be incremented. The ref keyword gives the variable reactivity which means that when the value changes, the page will also display the new value.

Next is the <template> tag, this is where the HTML code that’s displayed on the page is placed. You can see that we have a <button @click="increment" /> element on the page with, this will execute the increment function that was defined back in the <script>. You also have the <div class="display">{{ count }}</div> which displays the count variable defined back in the <script>.

Finally we have the <style> tags where our CSS code is defined. We have a class called display which contains background-color: blue; to give it a blue color. The display class was used for showing the count back in the <template>.

Demonstrated by the Single-File Component above, you can have HTML, CSS, and JavaScript all in the same file.

Why use Vue.js over the other frameworks?

There are a sea of frameworks out there for designing UIs with JavaScript and TypeScript, so why would you choose Vue over the other frameworks?

Learning Curve

The syntax of *.vue files implement pre-existing HTML, CSS, JavaScript and TypeScript. These are all common languages that are popular and well known. Most web developers will already have experience in these languages and so picking up the Vue framework on top of that should be no issue.

The emphasis again on Vue is progressive frameworks, so you can adopt as little or as much of it as you need to into your project!

Declarative Rendering

In your vanilla JavaScript, you would be using a library such as JQuery where you would target elements in the DOM and change them via the code.

In Vue however, you have a two-way data binding when you bind the JavaScript variables to the template. An example below:

<template>
   <input v-model="fruit">
   <div>My fruit is: {{ fruit }}</div>
</template>

If this example, we have the fruit variable which is bound to <input> and also having it displayed inside the <div>. The fruit variable can be changed via <input>, but can also be changed via any underlying JavaScript code as well where the changed will be reflected inside the <div>.

This would obviously be wouldn’t be straight forward if this was trying to be implemented with vanilla JavaScript.

Component Re-usability

When you go about designing the UI, you need to be able to code in a way that the UI components are modular and all separated into separate sections of code. We don’t want a scenario where you design the entire website in one file.

Vue offers a component based structure when designing your website. You can design the different elements of the page separately in different “components” then bring them all together.

Virtual DOM

When you are rendering your Vue application on the screen, when your components on the screen rely on some JavaScript value, it will need to “re-render” those components to be updated with your changes.

If you were to go through the actual DOM on the screen, it would consume more significant resources so instead there is a concept called “Virtual DOM” instead. The changes are done to this Virtual DOM which will then be synchronized with the real DOM in your browser.

This isn’t something that we are concerned too much with in the development process, but it’s good to be aware of and you might need to look into this eventually if you have an issue rendering a component on the screen.