Getting started with Vue.js

04.02.2021 Ricky Elfner
Mobile vuejs foss javascript frontend framework handson tutorial howto

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.

  npm install -g @vue/cli

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:

  vue create meine-vue-app

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.

  npm run serve

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.

    <template>
        <div>
    
        </div>
    </template>

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.

    <script>
    import { } from " ";
    
    export default {
    
    }
    </script>

The last part is for styling the component. As known from HTML, this area becomes described by the <stlye> tag.

    <style>
    
    </style>

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.

export default {
  name: 'MeineButtons'
}

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.

    <script>
        import MeineButtons from "./components/MeineButtons";
        
        export default {
          name: 'App',
          components: {
            MeineButtons
          },
          data() {
          }
        }
    </script>

You can then use the newly imported components in the <template> section above, as follows:

    <template>
      <div id="app">
          <MeineButtons />
      </div>
    </template>

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.

    <button @click="zaehler += 1" >+ 1</button>
        <p>{{ zaehler }}</p>
    <button v-on:click="minusEins">- 1</button>

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.

export default {
  name: 'MeineButtons',
  components: {
  },
  data() {
    return {
        zaehler: 0,
    }
  },
  methods: {
    minusEins(){
      this.counter -= 1;
    }
  }
}

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.

    <button @click="minusEins" @click="meinCustomEvent(zaehler)">- 1</button>

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".

    methods: {
        meinCustomEvent(zaehler) {
          this.$emit('callMeinCustomEvent', zaehler);
        }
      }

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.

    <MeineButtons @callMeinCustomEvent="meinCustomEventAusfuehren"/>

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.

    methods: {
        meinCustomEventAusfuehren(meineNachricht) {
          alert(meineNachricht)
        }   
      }

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.

    <button @click="zaehler += 1"  v-bind:class="{'positiv' :  zaehler > 0} ">+ 1</button>
        <p>{{ zaehler }}</p>
    <button v-on:click="minusEins"  :class="{'negativ' :  zaehler < 0}">- 1</button>

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.

<style>
    .positiv {
    background-color: green;
}
    .negativ {
    background-color: red;
}
</style>

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.

Ricky Elfner - thinker, survivor, gadget collector. He is always on the lookout for new innovational potentials, as well as tech news, so that he can always write about current topics.