The overall evaluation of "simple but not lacks elegance, small but not lacks great craftsman"
Introduction
The author is Evan You (You Yuxi), who works at Google Creative Lab. Although Vue is a personal project, I personally believe that it is definitely not inferior to Google's AngularJs in terms of development prospects. I will make some simple comparisons with Vue (Angular 1.0+ version).
The main features of Vue are its official website (/) as described:
(1) Concise (2) Lightweight (3) Fast (4) Data-driven (5) Module-friendly (6) Component-based
Here is a piece of Angular's code to implement two-way binding
// html
<body ng-app="myApp">
<div ng-controller="myCtrl">
<p>{{ note }}</p>
<input type="text" ng-model="note">
</div>
</body>
// js
var myModule = ('myApp', []);
('myCtrl', ['$scopp', function($scope) {
$ = '';
]);
Then look at the code of Vue
// html
<body>
<div >
<p>{{ note }}</p>
<input type="text" v-model="note">
</div>
</body>
// js
var vm = new Vue({
el: '#app',
data: {
note: ''
}
})
In comparison, I personally think that Vue's code writing style is more concise and easy to understand.
Not without elegance
Although Vue is a relatively lightweight framework, it is simple and lightweight and very user-friendly. The API it provides is also very easy to understand, and it also provides some very convenient instructions and attributes.
For example:
(1) Bind click event
<a v-on:click="doSomething"></a>
It can be abbreviated as:
<a @click="doSomething"></a>
(2) Bind 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 events from bubbles --> <a @="doSomething"></a> <!-- Events are triggered only when the Enter key is pressed --> <input @="submit">
(4) Practical parameter characteristics
<!-- debounce Set a minimum delay --> <input v-model="note" debounce="500"> <!-- exist "change" Instead "input" Update data in events --> <input v-model="msg" lazy>
How about it, does it feel so elegant?
Small
Speaking of smallness, we should first pay attention to the source code size of Vue. The source code of Vue's production version (i.e., min version) is only 72.9kb. The official website says that gzip is only 25.11kb after compression, which is half smaller than Angular's 144kb.
One advantage of compactness is that it allows users to choose corresponding solutions more freely, and it gives users more room in terms of matching other libraries.
For example, the core of Vue does not include routing and Ajax functions by default, but if you need routing and AJAX in your project, you can directly use the official library Vue-router and third-party plug-in vue-resource provided by Vue. At the same time, you can also use other libraries or plug-ins you want to use, such as jQuery's AJAX, etc.
Doesn't it feel very flexible?
There are many great masters
Although Vue is small, it is "sparrow is small and has all the internal organs", and it is also easy to build large-scale applications.
(1) Modular
Combined with some third-party module building tools, such as CommonJS, RequireJS or SeaJs, the code modularity can be easily achieved.
However, here I do not recommend using the above-mentioned construction tools. It is currently the most popular solution to directly use the modular function of ES6 and then package it accordingly with Webpack.
In future articles, I will also introduce it, including the configuration of Webpack.
(2) Componentization
Vue's componentization function is a highlight of it. By putting the html, CSS, and js code of a certain component on the page into a .vue file for management, the maintenance of the code can be greatly improved.
For example:
//
<template>
<div class="box" v-text="note"></div>
</template>
<script>
export default {
data () {
return {
note: 'This is an html template for a component! '
}
}
}
</script>
<style scoped>
.box {
color: #000;
}
</style>
We can also write some preprocessing languages in the component:
//
<template lang='jade'>
div(class="box" v-text="text")
</template>
<script>
export default {
data () {
return {
note: 'This is an html template for a component! '
}
}
}
</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 the article is a brief discussion, I will not introduce it in depth here.
(3) Routing
Like Angular, Vue has its routing capabilities. Through the routing function, we can realize on-demand loading of each component and easily build a single-page application. Here is a simple routing configuration file:
//
'use strict'
export default function(router) {
({
'/': {
component: function (resolve) {
require(['./components/'], resolve)
}
},
'/foo': {
component: function (resolve) {
require(['./components/'], resolve)
}
},
'/bar': {
component: function (resolve) {
require(['./components/'], resolve)
}
}
})
}
To view the specific routing configuration and usage, please follow the official documentation:/vue-router/zh-cn/
Summarize
I personally believe that some front-end technologies are integrated. Learning a language or framework itself is not to learn its technology. The most important thing is to learn its thinking. Only the thinking level is extended, and you will find it easy to learn other technologies. What Vue brings us is a new thinking on the front-end to solve problems.
The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!