Vue.js: Difference between revisions

Revision as of 02:56, 13 March 2017

Revision as of 21:44, 14 March 2017

Line 1:

{{Multiple issues|

{{COI|date=March 2017}}

{{copy edit|date=March 2017}}

}}

{{Infobox software

| name = Vue.js

Line 16 ⟶ 19:

}}

'''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 web|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 [[Singlesingle-page application|single-page applications]]s.

According to a 2016 JavaScript survey, Vue has an 89% developer satisfaction rating. Vue accumulates around 80 [[GitHub|Github]] stars per day,<ref>{{Cite web|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>

Line 28 ⟶ 31:

== History ==

Vue was created by Evan You after working for [[Google]] on [[AngularJS]]. You later summed up his thought process, "I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight without all the extra concepts involved?"<ref>{{Cite news|url=https://betweenthewires.org/between-the-wires-evan-you-cb56660bc8a4#.yeez3vpy1|title=Between the Wires {{!}} Evan You|date=2016-11-03|work=Between the Wires|access-date=2017-03-11}}</ref>

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]] the day of its initial release. Within one day the project reached the frontpage of all three sites.<ref>{{Cite web|url=http://blog.evanyou.me/2014/02/11/first-week-of-launching-an-oss-project/index.html|title=First Week of Launching Vue.js|website=Evan You|access-date=2017-03-11}}</ref>

Line 35 ⟶ 38:

=== 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]]s. 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 web|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>

Line 43 ⟶ 46:

=== 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]]s 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 web|url=https://vuejs.org/v2/guide/components.html|title=Components — Vue.js|access-date=2017-03-11|language=en}}</ref>

The code snippet below contains an example of a Vue component. The component presents a button and prints of the number of times the button is clicked :

<pre>

Line 69 ⟶ 72:

* 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 web|url=https://vuejs.org/v2/guide/transitions.html|title=Transition Effects — Vue.js|access-date=2017-03-11|language=en}}</ref><ref>{{Cite web|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-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 web|url=https://vuejs.org/v2/guide/routing.html|title=Routing — Vue.js|access-date=2017-03-11|language=en}}</ref>

== Comparison with Other Frameworks ==

Line 86 ⟶ 89:

When compared to React development, Vue can be integrated to an existing web application much more easily. Normally, a web application can

start using Vue immediately by simply including the Vue.js Javascript library. Usage with [[Webpack | Webpack]] or Browserify,

are not strictly necessarily. This is in stark contrast to React development where Usage with [[Webpack | Webpack]] and Babel is

unavoidable, therefore making converting existing web application much more difficult.

=== Angular ===

Some of Vue’s syntax will look very similar to Angular (e.g.  <code>v-if</code>  vs  <code>ng-if</code>). This is because there were a lot of things that Angular got right and these were an inspiration for Vue very early in its development. There are also many pains that come with Angular however, where Vue has attempted to offer a significant improvement.

=== Ember ===

Ember is a full-featured framework that is designed to be highly opinionated. It provides a lot of established conventions and once you are familiar enough with them, it can make you very productive. However, it also means the learning curve is high and flexibility suffers. It’s a trade-off when you try to pick between an opinionated framework and a library with a loosely coupled set of tools that work together. The latter gives you more freedom but also requires you to make more architectural decisions.

That said, it would probably make a better comparison between Vue core and Ember’s  templating  and  object model  layers:

* Vue provides unobtrusive reactivity on plain JavaScript objects and fully automatic computed properties. In Ember, you need to wrap everything in Ember Objects and manually declare dependencies for computed properties.

* Vue’s template syntax harnesses the full power of JavaScript expressions, while Handlebars’ expression and helper syntax is intentionally quite limited in comparison.

Line 132 ⟶ 135:

== 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>

Line 138 ⟶ 140:

* 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 Alsoalso ==

* [[Comparison of JavaScript frameworks]]

* [[React (JavaScript library)]]

Line 148 ⟶ 150:

{{Reflist}}

[[Category:JavaScript web frameworks]]

__FORCETOC__

[[Category:JavaScript web frameworks]]