Home > Developer > Web Develop
Vue.js IntroductionAs a loyal user of vue.js, I think it is necessary to write some articles to celebrate this beautiful language, I give it the overall evaluation is "simple but not yet elegant, small and no lack of large craftsmen", the following will be around this sentence to introduce vue.js, hope to inspire your interest in vue.js.
Note: This article describes the vue1.x, currently Vue has been upgraded to 2.x, features and syntax has certain upgrades and modifications, want to know 2.x of the please move: http://www.cnblogs.com/luozhihao/p/6014098.html
Vue.js's author is Evan you (Yu Yuxi), who worked for Google Creative Lab, although Vue is a personal project, but in the development of the future, personally think that the ANGULARJS is not lost in Google, Below I will make a few simple comparisons between Vue and Angular (Angular 1.0+ version).
The main features of Vue are as described in its official website (http://cn.vuejs.org/):
(1) Simple (2) light weight (3) Fast (4) data -driven (5) modular-friendly (6) component
SimpleThe following is a angular implementation of two-way binding code
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 = ';]);And then look at the Vue code.
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 Vue's code writing style is more concise and understandable.
Yet elegantVue is a relatively lightweight framework, simple and lightweight, but also very user-friendly, its API is very easy to understand, but also provides some very convenient instructions and properties.
For example:
(1) Bind Click event
<a v-on:click= "DoSomething" ></a>
can be abbreviated as:
<a @click = "DoSomething" ></a>
(2) Binding dynamic properties
<a v-bind:href= "url" ></a>
can be abbreviated as:
<a:href= "url" ></a>
(3) Convenient modifier
<!--block Click event Bubbling--><a @click. stop= "DoSomething" ></a><!--only triggers the event when the ENTER key is pressed--><input @ Keyup.enter= "Submit" >
(4) Practical parameter characteristics
<!--debounce set a minimum delay--><input v-model= "note" debounce= "$" ><!--update data in "change" instead of "input" event-- <input v-model= "MSG" lazy>
How is it that the feeling is very graceful.
SmallSpeaking of small, that should be the first to pay attention to the source size Vue, Vue production version (that is, min version) source only 72.9kb, the official website said gzip compression only 25.11kb, compared to angular 144kb reduced by half.
One of the benefits of being small is that it gives users more freedom to choose the right solution, giving them more room to work with other libraries.
As the core of Vue does not include routing and AJAX features, but if you need routing and Ajax in your project, you can use the official library Vue-router and third-party plug-ins Vue-resource provided by Vue, and you can use other libraries or plugins that you want to use. such as jquery Ajax and so on.
is not feeling very flexible.
No shortage of big craftsmenVue is small, but "perfectly formed" is handy when it comes to building large applications.
(1) Modular
Combining some third-party module building tools, such as COMMONJS, Requirejs, or SEAJS, makes it easy to modularize your code.
However, it is not recommended to use the above building tools, directly using the ES6 modular function, combined with Webpack for the corresponding packaging is currently the most popular solution.
Do not understand the ES6 module function can be described in: http://es6.ruanyifeng.com/#docs/module
In future articles, I will also introduce them, including the configuration of Webpack.
Modular Elaboration (https://www.jb51.net/article/124618.htm, https://www.cnblogs.com/huyinxuan/p/6647545.html)
(2) component
Vue's component-based functionality is one of its highlights, and it can greatly improve the maintainability of your code by putting the HTML, CSS, and JS code of a component on a page into a. vue file.
For example:
app.vue<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:
App.vue<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 do this by webpack, we recommend using Webpack + Vue-loader, and using ES6 syntax, you need to install Babel to convert. Because the article is about Vue.js, so here does not do in-depth introduction.
(3) Routing
Like angular, Vue has its own routing capabilities. With the routing feature, we can implement on-demand loading of individual components to easily build a single page application. The following 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 specific routing configuration and usage, visit the official documentation: http://vuejs.github.io/vue-router/zh-cn/index.html
SummarizePersonally think that the front-end of some of the technology is a mastery, learning a language or framework itself is not to learn its technology, the most important thing is to learn its thinking, only the level of thinking has been extended, learning other techniques will find handy. Vue brings us to the front-end a new way of thinking about solving problems.
Reprint please specify from--public number: Front hula hoop (love-fed)
Go Vue.js Features
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
