Vue.js and how to understand it
In my work, I recently had to deal with the framework Vue.js, because Before that, I was mainly engaged in backend development, I had to deal with many things and it was difficult to understand a lot, especially when I used only jQuery before. In this article, I want to help my reader deal with the problems in understanding that I faced. Of course, problems at the stage of learning something new all have different, but not a few of those who will have similarities, this article will be directed to this.
I will not compare this framework with others, I think that there is enough information on this subject on the Internet, we will try to deal with Vue.js and with “what do they eat it with ?!”. In this context, examples will be considered for assembly using a webpack or similar systems. Examples of component interactions will be on the example of single-file components, since they are a bit easier to understand. However, the principles of interaction between single-file and multi-file components are not much different.
So, the first thing that newbies have to face and experience certain difficulties is not jQuery, and it works differently. Vue provides reactive bundles of its variables within components and when interacting with other components, which opens up significant new opportunities. Yes, on jQuery it can all be organized too, but with more “thick” code and a bunch of handlers in which you can get confused. If you deal with Vue, it all makes it much easier.
Immediately I will give a little advice: “No need to try to draw analogies written with jQuery!”, The more attempts there are to draw an analogy, the greater will be confusion and misunderstanding.
')
In the official documentation, of course there is all the necessary information, but it’s quite difficult to figure it out until you try and figure it out yourself. I will try to facilitate this process.
In any component of Vue there is a set of data called “props”. This object contains the data that can be defined when the component is called or has a default value.
Example of declaring component properties:
In this example, we indicate that there is a certain uuid in our component, which is a string and by default it is an empty string.
In addition, the component contains the data {} object, which performs the interaction of our component with any others that we can use in ours. In Vue, it is normal practice when one component can combine several others in itself to combine them. data, often declared as a function, you will find this practice most often in forums and communities discussing implementation on Vue
As you can see, the data object does not specify the types of variables, but values ​​are immediately assigned. In our application, we can change this value for certain events, and in turn other components caused in ours will track the change of these variables and react to them in a certain way. This will be a reactive bunch of components with certain variables.
In addition, in the general object of the component, methods (functions) are set for working with these variables and events inside the component. Depending on where they are called, they should be located in certain objects. In more detail, about them, you can read the official documentation, there seems to be no questions there. We are talking about the scope. Therefore, consider an example:
In this example, we create a template in our component, in which we call the component Vuetify dialog
To work with it, you will need an alert model, which will indicate whether the window is open now or closed (true or false, respectively), as well as the alertMessage variable - which will carry an error or warning message. For each property, for example, color or max-width, we can set variables that should be in the data () {} object and change them using our methods. But for simplicity, we limit ourselves to two. So, to control these properties, we need to properly distribute the objects inside the component script.
This example shows that we have a certain deleteObject () method specified in the methods object, which makes a request to delete something on example.com, somehow processes the answer, and in the case of a failure it throws an exception, in which we already call our dialog component, assigning the alert variable the value true and assign the message to be displayed in the template. Now notice that in the template, we access the variables in the date directly, simply by specifying their name, and in the methods, through the this object. All methods, wherever they are specified, if they work with data , they use these variables through this . If one method should call some other method defined in the methods object, it is also called via this.methodName ().
Also note the click event handler in the template:
Here you can change the value of the alert variable in data without a method, and since it is reactively connected to the model, the component will immediately respond to its change.
In this case, those who are accustomed to working with classic objects can get confused, because the connection looks a little illogical. But in fact, there is no magic here. When we call an instance of the Vue class and connect the components there, it interprets them through its own objects inside the js framework, which is why it forms some sort of own area of ​​view.
Often from our component, we have to manage the state of other components that are caused inside ours. As I wrote above, for this purpose there is an object `props`, and the transfer is done by assigning this value, either using our variable in data or immediately assigning a value to this property.
In our example, which I used above, it is already there, for convenience, I will duplicate it again and try to explain:
Take, for example, the component embedded in our template.
In which the color property is declared. This property should be set inside the scripts of the <v-toolbar> component. In this example, we assigned it a specific value. But we can change it. If we need to change it dynamically, we can bind tracking this property to our variable, then the template will change a bit:
In the data object, we have to declare this variable, then we will be able to change it with the methods of our component specified in the methods object:
Now we can declare a method, and change the variable toolbarColor inside it, using the construction this.toolbarColor = “Value”, and the <v-toolbar> component will react to it.
Thus, we can transfer values ​​to child components.
For feedback, i.e. from the child component to get data to the parent, other, slightly more complex constructions are used. Vue has built-in methods; for this, they are well described in the official Vue documentation, by reference ,
therefore I will not dwell on them in detail. The problem is that this is not always a convenient way, and when you study it in detail, then see for yourself. It is, so to speak, applicable not in all cases.
There is another good way to use the Vuex library, which creates some kind of storage for shared variables, for managing the state of an application. I will not dwell on it either, because if you understand the logic of the interaction of variables within the component methods and other components, it’s easy to figure out Vuex. In addition, they have good Russian documentation .
To work with Vuex, I ask you to pay special attention to how it is properly installed, and that to access the data, you at least need to use Mutations and Getters. I advise you to read about them in more detail. I first tried to fluently understand the essence and start programming, but I ran into a lot of problems that I did not understand at that time. Therefore, pay special attention to these sections.
I will draw your attention to the very system of interaction. It is slightly different from the standard interaction inside Vue. This is exactly what I missed first, and then spent a lot of time to figure it out. Take an example from the official documentation:
Here, we declare the store itself and getters methods for it. Please note that the method inside getters is not completely standard, but its use in its component is even more non-standard. In our component, if we want to use a variable from the store , we must call it with the help of new variables, and we will call the method not as a method, but as a property of the store object
And no brackets, since this is the method that returns the finished object, it is called as just a property of the getters object inside $ store .
With mutations a little bit easier, it immediately says that you need to use comit ('methodName', TRANSFERABLE_B_METHOD_VARIABLE).
More on mutations here .
We got acquainted with the scope of variables inside the components, we learned how to exchange data between components, and from here we should have a general understanding of the interaction of components with each other in Vue.js. From myself I will say that the system is quite flexible, and there are already many ready-made components and libraries that extend the Vue feature. Anyone can join the development of this system and make life easier for other developers. The component system makes it easier to maintain the code, connect the finished components inside others, and not duplicate the code, which brings us closer to the “beautiful” way of development. For beginners, I wish you patience and success in learning new areas.
Below I have added links from which I used materials for writing articles and examples. For the Vuetify library, I will write two links, to English-language and Russian-language documentation, because the Russian-language at the time of this writing is not fully translated, and there may not be something in it. But in English, you can find everything you need to know about this library. On working with this library, I can write in more detail if there are questions about it or something becomes unclear.
Russian documentation on Vue.js framework
Russian documentation for Vuex library
Vuetify English Documentation
Russian documentation on Vuetify
I will not compare this framework with others, I think that there is enough information on this subject on the Internet, we will try to deal with Vue.js and with “what do they eat it with ?!”. In this context, examples will be considered for assembly using a webpack or similar systems. Examples of component interactions will be on the example of single-file components, since they are a bit easier to understand. However, the principles of interaction between single-file and multi-file components are not much different.
Considered aspects
- We will understand the areas of visibility of variables inside one and several components.
- Consider the possibility of transferring variables between components.
- Let us deal with the general interaction of components with each other.
So, the first thing that newbies have to face and experience certain difficulties is not jQuery, and it works differently. Vue provides reactive bundles of its variables within components and when interacting with other components, which opens up significant new opportunities. Yes, on jQuery it can all be organized too, but with more “thick” code and a bunch of handlers in which you can get confused. If you deal with Vue, it all makes it much easier.
Immediately I will give a little advice: “No need to try to draw analogies written with jQuery!”, The more attempts there are to draw an analogy, the greater will be confusion and misunderstanding.
')
Variable scope
In the official documentation, of course there is all the necessary information, but it’s quite difficult to figure it out until you try and figure it out yourself. I will try to facilitate this process.
In any component of Vue there is a set of data called “props”. This object contains the data that can be defined when the component is called or has a default value.
Example of declaring component properties:
/**------**/ props: { uuid: { type: String, default: '', }, }, /**------**/ In this example, we indicate that there is a certain uuid in our component, which is a string and by default it is an empty string.
In addition, the component contains the data {} object, which performs the interaction of our component with any others that we can use in ours. In Vue, it is normal practice when one component can combine several others in itself to combine them. data, often declared as a function, you will find this practice most often in forums and communities discussing implementation on Vue
/**------**/ data() { return { dialog: false, indeterminate: false, loading: false, notifications: false, sound: true, widgets: false, } }, /**------**/ As you can see, the data object does not specify the types of variables, but values ​​are immediately assigned. In our application, we can change this value for certain events, and in turn other components caused in ours will track the change of these variables and react to them in a certain way. This will be a reactive bunch of components with certain variables.
In addition, in the general object of the component, methods (functions) are set for working with these variables and events inside the component. Depending on where they are called, they should be located in certain objects. In more detail, about them, you can read the official documentation, there seems to be no questions there. We are talking about the scope. Therefore, consider an example:
<template> <div id="inspire"> <v-dialog v-model="alert" max-width="290"> <v-toolbar color="primary" > <v-toolbar-title></v-toolbar-title> <v-spacer></v-spacer> <div class="dialog-close-button" @click="alert=false"> <i class="fas fa-times"></i> </div> </v-toolbar> <v-card> <v-card-text>{{ alertMessage }}</v-card-text> </v-card> </v-dialog> </div> </template> In this example, we create a template in our component, in which we call the component Vuetify dialog
To work with it, you will need an alert model, which will indicate whether the window is open now or closed (true or false, respectively), as well as the alertMessage variable - which will carry an error or warning message. For each property, for example, color or max-width, we can set variables that should be in the data () {} object and change them using our methods. But for simplicity, we limit ourselves to two. So, to control these properties, we need to properly distribute the objects inside the component script.
<script> export default { data() { return { /**------------**/ alert: false, alertMessage: ' ', } }, methods: { deleteObject() { axios.delete('http: //example.com/') .then(response => { /** ------- **/ }) .catch(error => { this.alert = true; this.alertMessage = “ - ”; }); }, }, /**----------**/ </script> This example shows that we have a certain deleteObject () method specified in the methods object, which makes a request to delete something on example.com, somehow processes the answer, and in the case of a failure it throws an exception, in which we already call our dialog component, assigning the alert variable the value true and assign the message to be displayed in the template. Now notice that in the template, we access the variables in the date directly, simply by specifying their name, and in the methods, through the this object. All methods, wherever they are specified, if they work with data , they use these variables through this . If one method should call some other method defined in the methods object, it is also called via this.methodName ().
Also note the click event handler in the template:
<div class="dialog-close-button" @click="alert=false"><!--/**------**/ !--></div> Here you can change the value of the alert variable in data without a method, and since it is reactively connected to the model, the component will immediately respond to its change.
In this case, those who are accustomed to working with classic objects can get confused, because the connection looks a little illogical. But in fact, there is no magic here. When we call an instance of the Vue class and connect the components there, it interprets them through its own objects inside the js framework, which is why it forms some sort of own area of ​​view.
Data transfer between components
Often from our component, we have to manage the state of other components that are caused inside ours. As I wrote above, for this purpose there is an object `props`, and the transfer is done by assigning this value, either using our variable in data or immediately assigning a value to this property.
In our example, which I used above, it is already there, for convenience, I will duplicate it again and try to explain:
<template> <div id="inspire"> <v-dialog v-model="alert" max-width="290"> <v-toolbar color="primary" > <v-toolbar-title></v-toolbar-title> <v-spacer></v-spacer> <div class="dialog-close-button" @click="alert=false"> <i class="fas fa-times"></i> </div> </v-toolbar> <v-card> <v-card-text>{{ alertMessage }}</v-card-text> </v-card> </v-dialog> </div> </template> Take, for example, the component embedded in our template.
<v-toolbar color="primary" >, <!-- /**------**/ !--> In which the color property is declared. This property should be set inside the scripts of the <v-toolbar> component. In this example, we assigned it a specific value. But we can change it. If we need to change it dynamically, we can bind tracking this property to our variable, then the template will change a bit:
<v-toolbar :color="toolbarColor" >,<!-- /**------**/ !--> In the data object, we have to declare this variable, then we will be able to change it with the methods of our component specified in the methods object:
<script> export default { data() { return { /*------*/ toolbarColor: 'primary', } }, /** --- **/ </script> Now we can declare a method, and change the variable toolbarColor inside it, using the construction this.toolbarColor = “Value”, and the <v-toolbar> component will react to it.
Thus, we can transfer values ​​to child components.
For feedback, i.e. from the child component to get data to the parent, other, slightly more complex constructions are used. Vue has built-in methods; for this, they are well described in the official Vue documentation, by reference ,
therefore I will not dwell on them in detail. The problem is that this is not always a convenient way, and when you study it in detail, then see for yourself. It is, so to speak, applicable not in all cases.
There is another good way to use the Vuex library, which creates some kind of storage for shared variables, for managing the state of an application. I will not dwell on it either, because if you understand the logic of the interaction of variables within the component methods and other components, it’s easy to figure out Vuex. In addition, they have good Russian documentation .
To work with Vuex, I ask you to pay special attention to how it is properly installed, and that to access the data, you at least need to use Mutations and Getters. I advise you to read about them in more detail. I first tried to fluently understand the essence and start programming, but I ran into a lot of problems that I did not understand at that time. Therefore, pay special attention to these sections.
I will draw your attention to the very system of interaction. It is slightly different from the standard interaction inside Vue. This is exactly what I missed first, and then spent a lot of time to figure it out. Take an example from the official documentation:
const store = new Vuex.Store({ state: { todos: [ { id: 1, text: '...', done: true }, { id: 2, text: '...', done: false } ] }, getters: { doneTodos: state => { return state.todos.filter(todo => todo.done) } } }) Here, we declare the store itself and getters methods for it. Please note that the method inside getters is not completely standard, but its use in its component is even more non-standard. In our component, if we want to use a variable from the store , we must call it with the help of new variables, and we will call the method not as a method, but as a property of the store object
this.$store.getters.doneTodos; And no brackets, since this is the method that returns the finished object, it is called as just a property of the getters object inside $ store .
With mutations a little bit easier, it immediately says that you need to use comit ('methodName', TRANSFERABLE_B_METHOD_VARIABLE).
More on mutations here .
Conclusion
We got acquainted with the scope of variables inside the components, we learned how to exchange data between components, and from here we should have a general understanding of the interaction of components with each other in Vue.js. From myself I will say that the system is quite flexible, and there are already many ready-made components and libraries that extend the Vue feature. Anyone can join the development of this system and make life easier for other developers. The component system makes it easier to maintain the code, connect the finished components inside others, and not duplicate the code, which brings us closer to the “beautiful” way of development. For beginners, I wish you patience and success in learning new areas.
PS
Below I have added links from which I used materials for writing articles and examples. For the Vuetify library, I will write two links, to English-language and Russian-language documentation, because the Russian-language at the time of this writing is not fully translated, and there may not be something in it. But in English, you can find everything you need to know about this library. On working with this library, I can write in more detail if there are questions about it or something becomes unclear.
References:
Russian documentation on Vue.js framework
Russian documentation for Vuex library
Vuetify English Documentation
Russian documentation on Vuetify
Source: https://habr.com/ru/post/351882/
All Articles