Among other Javascript Frameworks Vue.js is one of the most popular Javascript libraries for developing larger single-page applications. It offers developers special freedom in the design of the display logic. An introduction.

If you want to implement larger applications, you can quickly access one of the three Javascript libraries Angular, React or Vue. Each has a fundamentally different strategy, though they are all designed to deliver powerful single-page applications. Vue is still very young compared to the other two – the first commit to the GitHub repository was in April 2016. Of course, its penetration is still behind its competitors, but in recent months it has become more popular in the community and has spread surprisingly fast. There are good reasons for this: At its core, Vue is a streamlined framework that only cares about content presentation and data binding. The architecture is well thought out, stable and in the meantime field-tested.

Unlike Angular, Vue is a specialized framework. It focuses on the display logic, ie the view part of the MVVM pattern. Therefore, the framework also leaves a designer more creative freedom and less strict guidelines than other Javascript Frameworks . Especially in larger applications, additional libraries are used in addition to Vue, such as Vuex for state management. This allows developers to combine very different libraries as needed to find the optimal solution for a specific case. In addition to the flexibility, the performance of Vue is another plus. Like React, Vue has an abstraction layer to the DOM. For highly loaded applications with high frequency changes – where the many DOM modifications can be a performance issue – Vue ensures optimized access.

Vue is community driven as are most of the Javascript Frameworks. This means that companies can only act as sponsors. The inventor and driving force behind the framework is Evan You, also known in the developer community as @youyuxi. Since the first commit, more than 2,500 more commits have now gone into the repository, almost 200 contributors.

The other GitHub statistics of Vue are also impressive: over 90,000 stars and more than 13,000 Forks. So Vue has now reached the version 2.5 and can be installed, inter alia, via the package manager NPM. There, the Vue package regularly reaches over 300,000 downloads per week, which is also quite impressive. One of the reasons for the meteoric rise of the framework is the low entry hurdle. Vue is relatively easy to learn compared to other frameworks. There is also a very good documentation. More information can be found at the official project website at vuejs.org.

First, developers must integrate Vue. This is possible, as with any other framework, in several ways. However, it is recommended to install Vue either via NPM with the command npm install vue or via the Vue CLI. The CLI should speed up the initial development of an application by setting up the basic structure and installing all dependencies. This allows programmers to start development right away. Vue CLI is a separate project, but developed in the Vuejs GitHub organization. You can install it with the command npm install -g vue-cli. The global installation makes CLI system-wide available. 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. Next to Vue itself, other libraries are set up, such as the “vue-router” or optionally a test infrastructure. After successful initialization, developers can start the project with the command npm run dev in development mode.

With Vue and other Javascript Frameworks you can develop applications based on components. This means that the application consists of numerous small components – the components. Each component should ideally only take care of a specific task. In this way, developers can easily reuse and test the components. In addition, there should only be one component per file. However, this means that larger applications require a large number of files. To keep track, developers should put the component files in a directory hierarchy. If they are grouped by subject, they can be located relatively easily. The following code block 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 {return

 buttonClicked: false,

 name: 'Klaus',

 };

 },

 methods: {

 handleClick () {

 this.buttonClicked = true;

 },

 },

 };

 </ Script>



 <style scoped>

 h1 {

    color: red;

 }

 </ Style>

The CLI tool automatically generates the HelloWorld component during initialization. The example is a variant of this component. It can be found in the src / components directory in a file called HelloWorld.vue. The file is divided into three parts: First, there is the definition of the template. This is the HTML structure that the application renders when it integrates the component. This is followed by a script tag with the Javascript part of the component. At the end of the file there is a style tag with the attribute scoped. This ensures that the CSS only applies to this component.

Source: https://t3n.de/magazin/javascript-frameworks-neue-gestaltungsfreiraeume-vue-246468/

Share This:

The post Javascript Frameworks: New design freedom with Vue appeared first on FrontNet Blog.