Basic application with VUE.JS

Hello everyone, welcome to my blog, in this new post I will be talking a little about VUE.JS. With a practical example of a basic application in vue.js where I expect the PR of anyone!

http://github.com/lirrumscode/basic-application-on-vue.js

The idea with this basic application is to learn the basic concepts of VUE.JS.

Without further ado, I will explain a little the code of the application so that you understand a little the practice of it.

Firstly use bootstrap (web framework for web application design)
Secondly use VUE.JS (from official website) don’t use NPM or Nuxt.js or Vue.cli. And a stylesheet to “style” bootstrap components.

In the first part, the first thing I did was create the components and clearly the component with the ID of the application, which is where I am going to create my logic with the localstorage, remember that always the component where you will write the logic must have an ID.

Where App, is the identifier where we will add all the logic, something like the home.ts of a home.html view in angular.

The third and most important step is to add the methods, the variables and the arrangements where we will do the different functions.

Remember that the methods should always be declared as:

method_name: function () {
console.log ("hello world");
}

and the data goes on the following line as we normally declare an object in javascript:

data: {
title: "WORLD",
name: "Lirrums",
}

So basically the logic would look like this:

const app = new Vue ({
el: "#app",
data: {
title: "TASK",
task: [],
newtask: "",
},
methods: {
saveTask: function () {
this.tareas.push ({
name: this.newtask,
status: false
});
console.log(this.tareas);
this.newtask ="";
localStorage.setItem("task", JSON.stringify (this.task));
},
}

In conclusion and a personal opinion, vue is one of the most stable and easy frameworks I know, in addition to being too fast (I was doing a mini API request project with it) and really what it took me to learn in Angular, what I learned with vue in less than 4 days (it should be noted that I have experience developing applications with this framework)

According to the ID you use in vue to add the logic, I usually call it a class (although it really isn’t).
In Vue.js 2 when I use it with the vue.cli, I noticed it was using a bit of typescript which is pretty phenomenal, but I like its clean syntax better, no typescript.

but more than anything it is a personal opinion, I know that you will have yours and that is merely respectable.

On the other hand, do not forget to leave us all your comments and especially follow me on my social networks where I usually upload content such as podcast and others.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *