Content deleted Content added
mNo edit summary |
No edit summary |
||
Line 16:
'''Vue.js''' (commonly referred to as '''Vue'''; pronounced {{IPA|{{IPAc-en|v|j|uː}}}}, like '''view''') is an [[Open-source software|open-source]] progressive [[JavaScript framework]] for building [[user interfaces]].<ref>{{Cite news|url=https://vuejs.org/v2/guide/#What-is-Vue-js|title=Introduction — Vue.js|access-date=2017-03-11|language=en}}</ref> Integration into projects that use other [[JavaScript library|JavaScript libraries]] is made easy with Vue because it is designed to be incrementally adoptable. Also, Vue is a capable [[Web application frameworks|web application framework]] that is able to power advanced [[Single-page application|single-page applications]].
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>
== History ==
=== Releases ===
==== 2.0 ====
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 ==
=== Templates ===
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>
=== Reactivity ===
One of Vue’s most distinct features is the unobtrusive reactivity system. Models are just plain [[JavaScript]] objects. When you modify them, the view updates. It makes state management very simple and intuitive. Vue provides optimized re-rendering out of the box without you having to do anything. Each component keeps track of its reactive dependencies during its render, so the system knows precisely when to re-render, and which components to re-render.<ref>{{Cite news|url=https://vuejs.org/v2/guide/reactivity.html|title=Reactivity in Depth — Vue.js|access-date=2017-03-11|language=en}}</ref>
=== Components ===
Components are one of the most powerful features of Vue. In a large application, it is necessary to divide the whole app into small, self-contained, and often reusable components to make development manageable. Components extend basic [[HTML element|HTML elements]] to encapsulate reusable code. At a high level, components are custom elements that Vue’s compiler attaches behavior to. In Vue, a component is essentially a Vue instance with pre-defined options.<ref>{{Cite news|url=https://vuejs.org/v2/guide/components.html|title=Components — Vue.js|access-date=2017-03-11|language=en}}</ref>
=== Transitions ===
Vue provides a variety of ways to apply transition effects when items are inserted, updated, or removed from the [[Document Object Model|DOM]]. This includes tools to:
* automatically apply classes for [[Cascading Style Sheets|CSS]] transitions and animations
* integrate 3rd-party CSS animation libraries, such as [https://daneden.github.io/animate.css/ Animate.css]
* use JavaScript to directly manipulate the DOM during transition hooks
* integrate 3rd-party JavaScript animation libraries, such as [[Velocity (JavaScript library)|Velocity.js]]
When an element wrapped in a transition component is inserted or removed, this is what happens:
# Vue will automatically sniff whether the target element has CSS transitions or animations applied. If it does, CSS transition classes will be added/removed at appropriate timings.
# If the transition component provided JavaScript hooks, these hooks will be called at appropriate timings.
# If no CSS transitions/animations are detected and no JavaScript hooks are provided, the DOM operations for insertion and/or removal will be executed immediately on next frame.<ref>{{Cite news|url=https://vuejs.org/v2/guide/transitions.html|title=Transition Effects — Vue.js|access-date=2017-03-11|language=en}}</ref><ref>{{Cite news|url=https://vuejs.org/v2/guide/transitioning-state.html|title=Transitioning State — Vue.js|access-date=2017-03-11|language=en}}</ref>
=== 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 ==
| |||