What is Vue.js?
Vue.js is another JavaScript framework. However with that big difference that you can start very simply, but still have the opportunity to gradually add more tools and features. Thus it is possible for you to build simple widgets or else whole applications. Vue.js focuses on component-oriented development, as it is already the case with Angular or React. The developers describe their own open source framework as a very accessible, versatile and powerful web framework with which maintainable and testable applications can be written.
Entry into VueJS
Before you can start coding with Vue.js, you must have NodeJS installed. Once you have this, you can
You install the vue-cli
helper. This helps you to create and manage Vue.js applications.
|
|
When the installation is complete, you can switch to the folder within the terminal in which you want to create your Vue.js app. You can start the creation process as follows:
|
|
You then have to decide between features that you want to install. Either take that standard settings of Vue.js or choose yourself from a given list.
As soon as the creation of the project is complete, you can switch to the folder provided and the start local server.
|
|
As a result, you can access the application via the following IP address as standard:
http://localhost:8080/
As soon as you have created an application, you can use the command code .
to open your project folder directly in VS code.
Structure of a component
A component in Vue.js is usually divided into three parts.
The first section is formed by a <template>
area. The structure of the component is shown using
HTML tags.
|
|
The next area is identified by a <script>
field. The import statements can be found within it
instead, as does the export definition for the component itself.
|
|
The last part is for styling the component. As known from HTML, this area becomes
described by the <stlye>
tag.
|
|
Using a component
If you have created your own component, it must have at least the two parts <script>
and
<template>
included. In any case, you must determine the name of the component when exporting so that you can
import and use the component in another component. However, we will see in the next
steps how this export will be filled with further information.
|
|
If you now want to use this component in the standard App.vue
component, for example, you have to import the component MeineButtons.vue
and also specify it as a component in the export statement.
|
|
You can then use the newly imported components in the <template>
section above, as follows:
|
|
Event handling - v-on
If you want to react to different DOM events, you need the v-on:
directive. This is how you can run JavaScript code as soon as the event is triggered. After the colon, you must
first determine the desired event. The example below is a click
event. After this
you can either specify the desired JavaScript code directly or call a method using the equals sign. Instead of v-on:
there is the shorthand version with an @ sign.
|
|
In this example the first button uses the shorthand version @click
and JavaScript code directly behind it.
The second button uses the standard variant with v-on:
. The method minus1
is used here for this purpose.
Applying methods
As you can see in the previous example, both functions use a variable zaehler
.
You define the variable in the data()
part, but you have to define the method to subdivide it within the methods
area. If you have defined the method as shown below, you can now do so as in the above
example can be called.
|
|
Custom Events
You will certainly often have the case that you want to give values from a child component to a parent component.
To do this, you need the ability to react to an event and, in addition, the functionality
$emit()
.
In this example it is the button within the component MeineButtons.vue
. You still have a new @click
event, which calls the method meinCustomEvent
. The method takes
additionally the variable zaehler
as a parameter.
|
|
Now you can see the implementation of the previously mentioned method in the section methods
.
Here the special feature of the method is called with this.$emit()
. As the first parameter you have to enter the name via which
can be accessed from the parent class. The second parameter is the variable that you want to pass on “up”.
|
|
Now all you have to do is implement the application in the parent class (App.vue
). For this you use the
imported component named <MeineButtons>
. You can then use the event defined in the previous step
called callMeinCustomEvent
. As soon as this event is triggered, the method meinCustomEventAusfuehren
will be called.
|
|
Next, of course, you’ll also need to create the meinCustomEventAusfuehren
method. This needs
a parameter which you pass “up” in from the MeineButtons
component. In this case, it’s supposed to be
a message on the screen. In this example this is the zaheler
variable from
MeineButtons.vue
.
|
|
bindings
For example, would you like a button, a component or any other element to have a class or a style
added, which should change depending on the situation of an attribute. There is also the
v-bind:
directive. In other frameworks this is also known as 2-way data binding. Using the example, you can see that a class negativ
has been added to one of the buttons and a class positv
has been added to the other button.
Depending on whether the counter variable is greater than or less than zero, this is determined using true or
false. Here, too, there is a shorter notation, you can simply omit v-bind
and only
write :class
.
|
|
Now the classes should get a separate style, you can do this in the style section, create a class for both and determine the changes you want.
|
|
Other directives from VueJS are v-if
and v-for
.
If this blog post has piqued your interest, there is a tutorial with which helps you zo create a to-do list.
This text was automatically translated with our golang markdown translator.