Javascript Frameworks: New Design freedom with Vue

Vue is one of the most popular Javascript libraries for the development of larger, Single-Page applications. Developers special free offers rooms in the design of the display logic. An Introduction.

 

Anyone who wants to implement larger applications, in one of the three Javascript libraries Angular, React or Vue. Each followed a fundamentally different strategy, although they are all designed high-performance Single-Page applications to implement. Vue is in comparison to the other two still very young – the first Commit in the Github Repository was in April 2016. Although its distribution is therefore, of course, still behind its competitors, but in the past few months, it became in the Community becoming more and more popular and has spread at an amazing speed. The reasons for this are: In the core Vue is a lightweight Framework that only takes care of the presentation of the content and the Databinding. The architecture is well designed, stable, and, in the meantime, tested in practice.

In contrast to Angular Vue is a specialized Framework. It focuses on the display logic, so the View-part of the MVVM Pattern. Therefore, the Framework makes developers more leeway and less strict requirements than other Frameworks. In larger applications, more libraries in addition to Vue, for example Vuex for State Management. In this way, developers can combine depending on the requirements of different libraries with each other, to find an optimal solution for a particular case. In addition to the flexibility of the Performance of Vue is another plus point. Similar to React Vue has a layer of abstraction to the DOM. In the case of display-intensive applications with a high frequency of Changes in which the many DOM modifications to a Performance Problem can be ensures Vue for optimized access.

Vue is driven by the Community. This means that companies are only as sponsors. The inventor and driving force behind the Framework Evan You, the developer community is also known as @youyuxi. Since the first Commit in the meantime, over 2,500 additional Commits are run in the Repository, and the nearly 200 contributors. The rest of the Github statistics of Vue can be seen: more than 90,000 Stars and more than 13,000 Forks. So Vue is the Version 2.5 and is, among other things, via the package Manager NPM to install. The Vue package regularly reaches over 300,000 Downloads per week, which is also quite impressive value. One of the reasons for the meteoric rise of the framework is the low barrier to entry is. Vue is to learn in comparison to other Frameworks, relatively easy to use. In addition, there is a very good documentation. More info on the official project website provides vuejs.org.

First, developers need to integrate Vue. To do this, as with any other Framework in several ways. It is recommended, however, Vue, either via NPM with the command
npm install vue or to install the Vue CLI. The CLI is intended to accelerate the initial development of an application by you to set up the basic structure and all of the dependencies installed. So the programmer can start directly with the development. Vue CLI is a separate project that will be developed in Vuejs Github organization. Install it using the command npm install -g vue-cli. Due to the global Installation of the CLI is available in the entire system. With the command vue init webpack my-project developers can then create a new project with the name “my-project”, based on the Webpack Template. In addition to Vue, then other libraries are placed, such as the “vue-router” or, optionally, a test infrastructure. After successful initialization, the developer can start the project with the command npm run dev in the development mode.

After developers have to initialize Vue successfully, you can start the project with the command “npm run dev” in the development mode. (Screenshot: Vue)

With Vue, you can develop applications and components based. This means that the application of numerous small blocks sets a, together with the components. Each component should take care of in the ideal case, only to a certain task. In this way, developers can use the components to be easily and testing. In addition, there should be a per-file only to a component. This means, however, that more extensive applications require very many files. To keep the Overview, developers should drop the component files in a directory hierarchy. They are grouped technically, they are relatively easy to locate. The following block of code contains a simple component.

<template>
  <div>
    <button v-on:click="handleClick">Say hello</button>
    <h1 v-if="buttonClicked">Hello {{ name }}</h1>
  </div>
</template>

<script>
export default {
 name: 'HelloWorld',
  created() {
    console.log('created');
  },
  data() {
    return {
      buttonClicked: false,
      name: 'Klaus',
    };
  },
  methods: {
    handleClick() {
      this.buttonClicked = true;
    },
  },
};
</script>

<style scoped>
h1 {
  color: red;
}
</style>

The CLI tool generates the initialization automatically the component HelloWorld. In the example, it is a variant of this component. It is in the src/components directory in a file with the name “HelloWorld.to find vue“. The file is divided into three parts: First, there is the Definition of the Template. This is the HTML structure, which renders the application in the Integration of the component. A Script Tag with the Javascript part of the component. At the end of the file, a Style Tag with the attribute scoped. This ensures that the CSS is valid only for this component.

This could also interest you

Ready to see us in action:

More To Explore

IWanta.tech
Logo
Enable registration in settings - general
Have any project in mind?

Contact us:

small_c_popup.png