Wikipedia

Vue.js

This is an old revision of this page, as edited by Ajtruex (talk | contribs) at 14:42, 11 March 2017. The present address (URL) is a permanent link to this revision, which may differ significantly from the current revision.

Vue.js (commonly referred to as Vue; pronounced /vjuː/, like view) is an open-source progressive JavaScript framework for building user interfaces.[3] Integration into projects that use other JavaScript libraries is made easy with Vue because it is designed to be incrementally adoptable. Also, Vue is a capable web application framework that is able to power advanced single-page applications.

Vue.js
Original author(s)Evan You
Initial releaseFebruary 2014; 11 years ago (2014-02)[1]
Stable release
2.2.2 / March 9, 2017; 8 years ago (2017-03-09)[2]
Repository
Written inJavaScript
PlatformCross-platform
Size76 KB production
240 KB development
TypeJavaScript library
LicenseMIT License
Websitevuejs.org Edit this on Wikidata

According to a 2016 JavaScript survey, Vue has an 89% developer satisfaction rating. Vue accumulates around 80 Github stars per day,[4][5] and is the 14th most starred project on Github of all time.[6]

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.[7]

History

Vue was originally released in February 2014 by Evan You. The project was posted on Hacker News, Echo JS, and the /r/javascript subreddit. Within one day the project reached the frontpage of all three sites.[8]

Releases

1.0

2.0

The rendering layer has been rewritten using a lightweight Virtual DOM implementation forked from 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.

Features

Templates

Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data. All Vue templates are valid HTML that can be parsed by spec-compliant browsers and 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. In order to do so just replace the template option with a render function.[9] 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.[10]

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.[11]

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 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.[12]

Transitions

Vue provides a variety of ways to apply transition effects when items are inserted, updated, or removed from the DOM. This includes tools to:

  • automatically apply classes for CSS transitions and animations
  • integrate 3rd-party CSS animation libraries, such as Animate.css
  • use JavaScript to directly manipulate the DOM during transition hooks
  • integrate 3rd-party JavaScript animation libraries, such as Velocity.js

When an element wrapped in a transition component is inserted or removed, this is what happens:

  1. 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.
  2. If the transition component provided JavaScript hooks, these hooks will be called at appropriate timings.
  3. 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.[13][14]

Routing

Vue itself doesn’t come with routing. But there’s the vue-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.[15]

Comparison with Other Frameworks

Supporting Libraries

See Also

References

  1. ^ "First Week of Launching Vue.js". Evan You.
  2. ^ "Vue.js Releases". Github.
  3. ^ "Introduction — Vue.js". Retrieved 2017-03-11.
  4. ^ "State Of JavaScript Survey Results: Front-end Frameworks". Retrieved 2017-03-11.
  5. ^ "Trending JavaScript Frameworks". Retrieved 2017-03-11. {{cite web}}: Cite has empty unknown parameter: |dead-url= (help)
  6. ^ "Most Starred Repositories". GitHub. Retrieved 2017-03-11. {{cite web}}: Cite has empty unknown parameter: |dead-url= (help)
  7. ^ "Evan is creating Vue.js | Patreon". Patreon. Retrieved 2017-03-11.
  8. ^ "First Week of Launching Vue.js". Evan You. Retrieved 2017-03-11.
  9. ^ "Template Syntax — Vue.js". Retrieved 2017-03-11.
  10. ^ "Vue 2.0 is Here!". The Vue Point. 2016-09-30. Retrieved 2017-03-11. {{cite web}}: Cite has empty unknown parameter: |dead-url= (help)
  11. ^ "Reactivity in Depth — Vue.js". Retrieved 2017-03-11.
  12. ^ "Components — Vue.js". Retrieved 2017-03-11.
  13. ^ "Transition Effects — Vue.js". Retrieved 2017-03-11.
  14. ^ "Transitioning State — Vue.js". Retrieved 2017-03-11.
  15. ^ "Routing — Vue.js". Retrieved 2017-03-11.
  16. ^ "vue-router". router.vuejs.org. Retrieved 2017-03-11. {{cite web}}: Cite has empty unknown parameter: |dead-url= (help)
  17. ^ "vuex". vuex.vuejs.org. Retrieved 2017-03-11. {{cite web}}: Cite has empty unknown parameter: |dead-url= (help)
  18. ^ "vue-loader". vue-loader.vuejs.org. Retrieved 2017-03-11. {{cite web}}: Cite has empty unknown parameter: |dead-url= (help)
  19. ^ "vueify". GitHub. Retrieved 2017-03-11. {{cite web}}: Cite has empty unknown parameter: |dead-url= (help)
  20. ^ "vue-cli". GitHub. Retrieved 2017-03-11. {{cite web}}: Cite has empty unknown parameter: |dead-url= (help)

Further Reading

Retrieved from "https://en.wikipedia.org/w/index.php?title=Vue.js&oldid=769766200"