Vue.js is a javascript framework, which is being developed and maintained by Evan You, a former Google employee. To date, three versions of the Vue.js are being rolled out in the market, and in this Vue.js series, we are going to learn Vue.js 3.
Usually, when you learn React.js or Angular.js, there is the only way to code in it is to create a project using their own CLI, which creates a boilerplate code for you. But, Vue.js does it differently. It also has a CLI version but also has a CDN version. Vue doesn't want us to create the whole project in vue, instead, they also give us the freedom to use vue at a specific place on the website. And, in this article, we will check the Vue using CDN.
Vue does many things differently to organize the making things simple for the developers. Vue is a simple JS framework to learn, as compared to the other two, but equally powerful.
What are we developing?
In this tutorial, we are developing a very basic todo app, in which you can only add the todo and display it after addition.
We are gonna write the HTML and CSS in a regular manner, but the javascript is going to be totally being written in Vue, instead of vanilla javascript.
But, Before that, you should have to write the HTML and CSS code, given below, to be able to code in Vue.
The above code is just a boilerplate HTML code, but you can notice 2 things in it. At first, you have to create a style.css & app.js file for styling and JS and connect it to the HTML code. And in line 13, you may notice one more script tag, which is the CDN link for connecting Vue.js to this project. This CDN link will give you all the power to write Vue-based JS in the local JS file, connected to this HTML code, which is app.js. You can read more about it here.
Inside the body tag, we write a code, to display our end result. We create a div with the id “app”, which is wrapping the overall code that we need for this project. Inside it, we put input and label for it, to able to write our task and a button to display the written input or todo. As we don't have any way to read the input and to use the button click event, we use the list tag to display how our todo will look like, when being added, for styling purposes.
Now, it's the right time to add the styling to this project.
There is nothing much to talk about CSS in this series. So I will not discuss this CSS in this article.
When it comes to writing Vue code, we always have to do two things first, to let Vue work. At first, we have to create the Vue app and then we have to mount it to a specific part of the HTML code, instead of the whole HTML, using either id or class of that HTML tag.
The above code is the syntax of the vue, to create the Vue app and to mount this to the HTML tag with the id of “#app”.
NOTE: You should always mount the Vue app to the parent HTML tag because Vue will be applied to their children directly.
Now, there is some jargon in the Vue, that you have to know.
data(): If you know what is variable, then you are easily able to understand the use of data property in Vue. It’s a function, which usually stores variables.
methods: It’s a type of function in the vue app, as we used to store every function inside the method property.
As we move forward with the development of this to-do app, things will get more clear.
To create this todo app, we need two things, first, something that can read the entered value of the input, and second, a click event that will use that entered value to display as a todo.
For saving every value entered in the input section, we are using an empty string, enteredValue, and to store all the todos entered after for displaying it after click event, we are using an array named, goals because it’s easy to iterate through arrays to display todos.
As I already said, that data is generally being used to store variables in the Vue app, so we are storing the goals & enteredValue variables into it. But, you always have to return the data property.
NOTE: data. methods and many others are the specific names given by Vue, which you cant change.
Now, let's check that how to connect our input section to our variables under data property, and to do it, we use a property given us by vue, for this specific thing. “v-model”.
v-model is the two way binding for the input section. It helps in taking the final entered value in the input section and storing in the variable, we mentioned in v-model attribute. In the above input, we allowed v-model to save the entered value in the variable, enteredValue.
Now, lets see how to create the click event for the button to use the value save in the enteredValue variable.
As you can see, we introduced a method property in the above code, which is being used to add functions. And we are adding a function named. addGoal(), to push todos from enteredValue varialble to the goals array, which will be used to display the data.
Now, the question is, how to use this function after the click event, and how to use the click event using Vue.js.
For adding a click event to a button or to any html tag, we use @ symbol, which is shorthand of v-on, and then we define the function that is goint to run after the click. As the function is being defined inside the method (there are other properties too, where we add functions. we will discuss about it in later articles), we can either call the function in the event (addGoal), or we can directly execute the function (addGoal()). Both works in the same manner, until you have an argument in your function, inside method.
In this, we are able to take the value from input, and able to push it into the array using button click. But now, we have to display it too.
For this, we are gonna use the list elements inside the ul tag in html. So, before displaying it, we have to remove the dummy list items that we added earlier and have to use the vue.
But, the problem is that if we are gonna use the regular method to keep on writing the list items manually, then its too much time consuming. So we need a method, that can loop through the arrays and whenever any data is being pushed inside the array, the loop will run and it will display the data.
There is a property in vue, named as v-for, which will be added to the html tags to loop through the avaialble data and accoridng to the length of the available data, the loop will run.
v-for is same as the other for loops in other programming languages, where we have to use the data or array to iterate through, and in the above code, we are using the goals array to iterate through it and we use a varialbe goal to display the looping data.
To display anything that is coming from the Vue into HTML, we use the interpolation method, in which we add the data inside the double curly brackets. So, as we have to display the goal varialble in every loop, we use the interpolation method to add it between the list item to display it.
Final code: https://github.com/manasux/vue-series
This is just the first part of the vue series. There will be more articles that are coming under this vue series.
