Today’s topic is Variables And Functions in Vue Js. Vue.js is very rich when it comes to variables and data. It can handle integers, Boolean, lists, arrays, etc. basically anything that is JSON compatible. Also, we have standard JavaScript functions all available along with new functions that can be defined on a per Vue file scope. I am assuming you have some basic idea about Vue.js or you have read the previous article from the series.
Variables And Functions in Vue Js
Variables and Data
It is all about variables, all about data. Everything happening is centered around data. VueJs supports all data types supported by js, most importantly JSON. I will not be posting code, as I have often found people directly pasting it and pulling their hair when their code fails to compile due to formatting or encoding errors. Remember the Home File that is our front page? Home.vue. If you run your project it would look like this.
We will be working with this page for now. Firstly we will clear everything inside it and write the following code by typing from the screenshot below.
Script Tag
In the script tag, you can see that we have done a default export. All exports are basically JSON. Here we are just exporting one element called data. Data is a function in Vue. We also need to return some actual data. Hence you can see on line 10 that we have returned a JSON object with 2 keys, name and age.
Template Tag
In the Template Tag, we have used double curly braces {{ name }}. You could replace name with age. These curly braces are known as mustache tags. They are used to output data to HTML.
The Output
If you’ve written the code as I’ve said then you should see a similar output. The value of name key will be printed out. You can print others keys as well.
Beautiful isn’t it. It prints out my name. You could make it print out yours. Next, we want to do a small thing with functions, Let’s have a look.
Functions and Methods
We just learned about data and variables in Vue. Now we should focus on functions. We want to work with functions. Functions are the things that make stuff happen. So we will define some functions. You know the drill, look at the screenshot and copy the code. This might look complicated as we will discuss some data binding as well.
We have declared another element inside the JavaScript called methods, and we have created a function called increment. The data section has a variable called count that has been initialized at 0. The function called increment increments the count variable by 1.
Also, in the template tag, we have 2 new things.
- The Button tag has an action handler. It reads @click=increment, This simply tells vue, to run the function named increment when the button is clicked.
- There is an input element with an attribute v-model=count. This tells vue to bind the value of the input element with the count variable. This means you could also manually set the count variable from the input element.
Note – Vue Data is reactive, it means that whenever you change it from one place. The data change gets reflected in other places as well.
The Output
If all goes well, you should see similar output on your screen. Just like I do on mine.
Conclusion
Vue components and pages are basically JSON exports. They contain various elements. The data element houses all variables, the method element houses all functions. Data in Vue is reactive, When the value of a variable is changed from one place, it results in the same value being changed everywhere. I hope you have a basic idea of variables, data, and methods in vue. If you have any questions or suggestions, drop them in the comment section below.
