Introduction to Vue

If you're new to frameworks or haven't used one ever, this should give you a good overview of how frameworks make web dev easier.

Introduction

Vue is a progressive Javascript Framework and is very easy to learn. You can compare it with Angular or React. We write all the code for a component in a single file like react, without JSX. This makes it cleaner.

File Structure

A Vue file typically consists of three sections.

Template, where you write your HTML.
Style, where you write your CSS.
Script, where you put all your logic.

Vue uses Declarative Rendering, and you can use interpolations inside your template part. declrative rendering

You can use anything inside the '{{ }}', as far as it resolves to a string, number.

You can even use ternary.

{{}}

Let's look at each of the sections in a little detail ->

Template

In your template part, you can use a few directives provided by Vue to have conditional rendering, loops, etc. It's as easy as it looks ->

It makes two-way binding very easy, we have a directive named v-model for it. Type in the input and see it change just below it. binding

You can bind to the attributes of a normal HTML tag, with v-bind or just ':'. Let's see it in action -> Binding

Style

The Style part is similar to what you do in a CSS file. Just a style tag similar to what we see of template and script. And you can write the way you write your CSS inside that.

Script

The script part is where you can play a lot and write your logic. You can see a function named data in the above screenshots, it is used to store the properties.

There are lifecycle hooks as in any other framework, like created, mounted, etc. The image below should give you an application of created hook and an overview of how we write hooks. Just like functions. created

The other main things you find in the script are:

methods
computed
watch

As the name suggests, you define all your functions in the methods part. You can call the methods at any place, even in the template. methods

Computed Properties:

These are the properties, which are written as functions.

A computed property is cached, which means if the dependencies of the properties don't change, it won't recompute.

An application would be, you wanna recompute the employees. computed

Watcher

A watcher is used to perform any operation on the change of a particular property.

The two more important things used with the Vue are:
Vuex and vue-router.

Vuex is the store like we have redux for react's state management and vue-router is the router to help us handle the front-end routing.

Frameworks built on top of Vue

Vue has some good frameworks built on it.

Nextjs Developers can see Nuxtjs , which is similar.

Gridsome is Awesome.

There is a very powerful framework Quasar Framework . Has everything you want from UI to plugins to extensions.

This was a quick intro to Vue.

Thank you so much for reading, I hope you liked it.

If you have any questions or suggestions, please leave a comment below or feel free to reach out.

Chakit's Blog