Vue.js: Difference between revisions

Content deleted Content added
Ajtruex (talk | contribs)
No edit summary
Ajtruex (talk | contribs)
No edit summary
Line 17:
 
According to a 2016 [http://stateofjs.com/ JavaScript survey], Vue has an 89% developer satisfaction rating. Vue accumulates around 80 [[GitHub|Github]] stars per day,<ref>{{Cite news|url=http://stateofjs.com/2016/frontend/|title=State Of JavaScript Survey Results: Front-end Frameworks|access-date=2017-03-11|language=en}}</ref><ref>{{Cite web|url=http://bestof.js.org/tags/framework/trending/last-12-months|title=Trending JavaScript Frameworks|last=|first=|date=|website=|archive-url=|archive-date=|dead-url=|access-date=2017-03-11}}</ref> and is the 14th most starred project on Github of all time.<ref>{{Cite web|url=https://github.com/search?p=2&q=stars%3A%3E1&s=stars&type=Repositories|title=Most Starred Repositories|last=|first=|date=|website=GitHub|archive-url=|archive-date=|dead-url=|access-date=2017-03-11}}</ref>
 
== Overview ==
Vue.js is a front-end framework that is simple to use yet powerful in nature.
 
The project focuses on making some of the best ideas in web UI development (components, declarative UI, hot-reloading, time-travel debugging, etc.) more approachable, so that any developer can quickly pick it up and enjoy the productivity boost when working with modern, interactive web interfaces.
 
It is also designed to be progressively adoptable: Vue.js core is a drop-in library that can be used in existing pages, you can use it to add simple interactivity, or to replace [[jQuery]] entirely. On the other hand, the project also includes libraries and tools that supports building large and ambitious single page applications.<ref>{{Cite news|url=https://www.patreon.com/evanyou|title=Evan is creating Vue.js {{!}} Patreon|work=Patreon|access-date=2017-03-11|language=en}}</ref>
 
== History ==
Vue was originally released in February 2014 by Evan You. The project was posted on [[Hacker News]], Echo JS, and the ''/r/javascript'' [[Reddit|subreddit]]. Within one day the project reached the frontpage of all three sites.
 
=== Releases ===
 
==== 1.0 ====
 
==== 2.0 ====
The rendering layer has been rewritten using a lightweight Virtual DOM implementation forked from [https://github.com/snabbdom/snabbdom snabbdom]. On top of that, Vue’s template compiler is able to apply some smart optimizations during compilation, such as analyzing and hoisting static sub trees to avoid unnecessary diffing on re-render. The new rendering layer provides significant performance improvements compared to v1, and makes Vue 2.0 one of the fastest frameworks out there. In addition, it requires minimal effort in terms of optimization because Vue’s reactivity system is able to precisely determine components that need to be re-rendered in a large and complex component tree.
Vue has always focused on staying light and fast, but 2.0 pushes it even further. The rendering layer is now based on a lightweight virtual-DOM implementation that improves initial rendering speed and memory consumption by up to 2~4x in most scenarios. The template-to-virtual-DOM compiler and the runtime can be separated, so you can pre-compile templates and ship your app with only the runtime, which is less than 12kb min+gzip (as a reference, React 15 is 44kb min+gzip).<ref>{{Cite web|url=https://medium.com/the-vue-point/announcing-vue-js-2-0-8af1bde7ab9|title=Announcing Vue.js 2.0|date=2016-04-27|website=The Vue Point|access-date=2017-03-11}}</ref>
 
== Features ==
Line 30 ⟶ 40:
Vue uses an [[HTML]]-based template syntax that allows you to declaratively bind the rendered [[Document Object Model|DOM]] to the underlying Vue instance’s data. All Vue templates are valid HTML that can be parsed by spec-compliant browsers and [[HTML parser|HTML parsers]]. Under the hood, Vue compiles the templates into Virtual DOM render functions. Combined with the reactivity system, Vue is able to intelligently figure out the minimal amount of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.
 
In Vue, you can use the template syntax or choose to directly write render functions using [[JSX (JavaScript)|JSX]]. In order to do so just replace the template option with a render function.<ref>{{Cite news|url=https://vuejs.org/v2/guide/syntax.html|title=Template Syntax — Vue.js|access-date=2017-03-11|language=en}}</ref> Render functions open up possibilities for powerful component-based patterns — for example, the new transition system is now completely component-based, using render functions internally.<ref>{{Cite web|url=https://medium.com/the-vue-point/vue-2-0-is-here-ef1f26acf4b8#77d9|title=Vue 2.0 is Here!|last=|first=|date=2016-09-30|website=The Vue Point|archive-url=|archive-date=|dead-url=|access-date=2017-03-11}}</ref>
 
=== Reactivity ===
Line 52 ⟶ 62:
=== Routing ===
Vue itself doesn’t come with [[routing]]. But there’s the vue[https://github.com/vuejs/vue-router -]router package to help you out. It supports mapping nested routes to nested components and offers fine-grained transition control. Creating a Single-page Application with Vue + vue-router is dead simple. With Vue, we are already composing our application with components. When adding vue-router to the mix, all we need to do is map our components to the routes and let vue-router know where to render them.<ref>{{Cite news|url=https://vuejs.org/v2/guide/routing.html|title=Routing — Vue.js|access-date=2017-03-11|language=en}}</ref>
 
== Development ==
 
== Comparison with Other Frameworks ==
 
== Supporting Libraries ==
* vue-router<ref>{{Cite web|url=http://router.vuejs.org/en|title=vue-router|last=|first=|date=|website=router.vuejs.org|language=en|archive-url=|archive-date=|dead-url=|access-date=2017-03-11}}</ref>
* vuex<ref>{{Cite web|url=https://vuex.vuejs.org/en/|title=vuex|last=|first=|date=|website=vuex.vuejs.org|language=en|archive-url=|archive-date=|dead-url=|access-date=2017-03-11}}</ref>
* vue-loader<ref>{{Cite web|url=https://vue-loader.vuejs.org/en/|title=vue-loader|last=|first=|date=|website=vue-loader.vuejs.org|language=en|archive-url=|archive-date=|dead-url=|access-date=2017-03-11}}</ref>
* vueify <ref>{{Cite web|url=https://github.com/vuejs/vueify|title=vueify|last=|first=|date=|website=GitHub|language=en|archive-url=|archive-date=|dead-url=|access-date=2017-03-11}}</ref>
* vue-cli<ref>{{Cite web|url=https://github.com/vuejs/vue-cli|title=vue-cli|last=|first=|date=|website=GitHub|language=en|archive-url=|archive-date=|dead-url=|access-date=2017-03-11}}</ref>
 
== See Also ==