As a loyal user of Vue.js, I think it is necessary to write some articles to praise this beautiful language. My overall evaluation of it is "simple but elegant, small but not lacking in talented people". The following will introduce Vue.js to you around this sentence, hoping to stimulate your interest in Vue.js.
Introduction to Vue.js
The author of Vue.js is Evan You (You Yuxi), who works at Google Creative Lab. Although Vue is a personal project, I personally believe that it is 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 as introduced on its official website (http://cn.vuejs.org/):
(1) Concise (2) Lightweight (3) Fast (4) Data Driver (5) Module-friendly (6) Componentization
Simple
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>// jsvar myModule = angular.module('myApp', []);myModule.controller('myCtrl', ['$scopp', function($scope) { $scope.note = '';]);Then look at the code of Vue
// html<body> <div id="app"> <p>{{ note }}</p> <input type="text" v-model="note"> </div></body>// jsvar 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"></a>
It can be abbreviated as:
<a :href="url"></a>
(3) Convenient modifiers
<!-- Prevent click events from bubbles-->
<a @click.stop="doSomething"></a>
<!-- Events are triggered only when the Enter key is pressed-->
<input @keyup.enter="submit">
(4) Practical parameter characteristics
<!-- debounce Sets a minimum delay -->
<input v-model="note" debounce="500">
<!-- Update data in "change" instead of "input" event -->
<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.
If you don’t understand the functions of the ES6 module, please refer to: http://es6.ruanyifeng.com/#docs/module
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:
// App.vue<template> <div v-text="note"></div></template><script>export default { data () { return { note: 'This is a component's 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 a component's html template! ' } }}</script><style lang="styles">.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 of Vue.js, I will not give an in-depth introduction 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:
// 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 usage, please visit the official documentation provided by: http://vuejs.github.io/vue-router/zh-cn/index.html
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 it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.