Of Stack

Talking about Vue. js

  • 2021-07-26 06:14:08
  • OfStack

The overall evaluation of vue. js is "simple but elegant, small and without lack of great craftsmen"

Introduction to Vue. js

The author of Vue. js is Evan You (You Yuxi), who works for Google Creative Lab. Although Vue is a personal project, I personally think that AngularJs will never lose to Google in terms of development prospects. Below, I will make some simple comparisons between Vue and Angular (Angular version 1.0 +).

The main features of Vue are as introduced in its official website (http://cn.vuejs.org/):

(1) Simple (2) Lightweight (3) Fast (4) Data Driven (5) Module Friendly (6) Component

Let's look at the code of 1 section Angular to realize bidirectional binding 


// html
<body ng-app="myApp">
    <div ng-controller="myCtrl">
    <p>{{ note }}</p>
    <input type="text" ng-model="note">
  </div>
</body>

// js
var myModule = angular.module('myApp', []);
myModule.controller('myCtrl', ['$scopp', function($scope) {
  $scope.note = '';
]);

Then look at the code of Vue for 1 time 


// html
<body>
  <div id="app">
    <p>{{ note }}</p>
    <input type="text" v-model="note">
  </div>
</body>

// js
var vm = new Vue({
  el: '#app',
  data: {
    note: ''
  }
})

Comparatively speaking, I personally think Vue's code writing style is more concise and easy to understand.

Without losing elegance

Although Vue is a relatively lightweight framework, it is simple and lightweight, and it is also very humanized. The API provided by Vue is also very easy to understand, and it also provides some very convenient instructions and attributes.

For example:

(1) Bind click Events

<a v-on:click="doSomething"></a>

It can be abbreviated as:

<a @click="doSomething"></a>

(2) Binding dynamic attributes

<a v-bind:href="url" rel="external nofollow" rel="external nofollow" ></a>

It can be abbreviated as:

<a :href="url" rel="external nofollow" rel="external nofollow" ></a>

(3) Convenient modifiers 


<!--  Prevent click event bubbling  -->
<a @click.stop="doSomething"></a>

<!--  Triggers events only when the Enter key is pressed  -->
<input @keyup.enter="submit">

(4) Practical parameter characteristics 


<!-- debounce  Settings 1 Minimum delay  -->
<input v-model="note" debounce="500">

<!--  In  "change"  Instead of  "input"  Update data in the event  -->
<input v-model="msg" lazy>

How, does it feel elegant?

Compact

Speaking of compactness, we should first pay attention to the source code size of Vue. The source code of Vue production version (that is, min version) is only 72.9 kb, and official website said that gzip is only 25.11 kb after compression, which is one and a half smaller than Angular's 144kb.

One of the benefits of being small is that it allows users to choose the corresponding solutions more freely, and it gives users more space to cooperate with other libraries.

For example, the core of Vue does not include routing and Ajax functions by default, but if routing and AJAX are needed in the project, you can directly use the official library Vue-router provided by Vue and the third-party plug-in vue-resource, and you can also use other libraries or plug-ins you want to use, such as AJAX of jQuery.

Does it feel very flexible?

There is no shortage of great craftsmen

Although Vue is small, "sparrows are small and dirty", and it is also handy when building large-scale applications.

(1) Modularization

Modularization of code can be easily achieved with a few third-party module building tools, such as CommonJS, RequireJS, or SeaJs.

However, this site is not recommended to use the above-mentioned building tools. It is the most popular scheme to directly use the modular function of ES6 and combine it with Webpack for corresponding packaging.

In future articles, I will also introduce it, including the configuration of Webpack.

(2) Componentization

The component function of Vue can be described as one of its highlights. By putting html, CSS and js codes of a component on the page into a file of vue for management, the maintainability of the codes can be greatly improved.

For example: 


// App.vue
<template>
  <div class="box" v-text="note"></div>
</template>
<script>
export default {
  data () {
    return {
      note: ' This is 1 Component of html Template! '
    }
  }
}
</script>
<style scoped>
.box {
  color: #000;
  }
</style>

We can also write some preprocessing languages in the component: 


// App.vue
<template lang='jade'>
  div(class="box" v-text="text")
</template>
<script>
export default {
  data () {
    return {
      note: ' This is 1 Component of html Template! '
    }
  }
}
</script>
<style lang="stylus">
.box color: #000
</style>

Of course, we need to package it through webpack. It is recommended to use Webpack + vue-loader, and use ES6 syntax at the same time. babel needs to be installed for conversion. Because this article is a brief introduction to Vue. js, it will not be introduced in depth here.

(3) Routing

Like Angular1, Vue also has its routing function. Through the routing function, we can realize the on-demand loading of various components and easily build a single-page application. Here is a simple routing profile: 


// router.js
'use strict'
export default function(router) {
  router.map({
     '/': {
       component: function (resolve) {
         require(['./components/Foo.vue'], resolve)
       }
     },
     '/foo': {
       component: function (resolve) {
         require(['./components/Foo.vue'], resolve)
       }
     },
     '/bar': {
       component: function (resolve) {
         require(['./components/Bar.vue'], resolve)
       }
     }
  })
}

To view the specific routing configuration and use, please refer to the official document: http://vuejs.github.io/vue-router/zh-cn/index.html

Summarize

Personally, I think that all the front-end technologies are integrated. Learning a language or framework itself is not to learn its technology, but the most important thing is to learn its thinking. Only the thinking level has been extended, and you will find it handy when learning other technologies. What Vue brings us is a new thinking of solving problems at the front end.

Related articles: