Examine individual changes

'{{Infobox software | name = Vue.js | logo = [[File:Vue.png|215px|Vue.js logo]] | author = Evan You | released = {{Start date and age|2014|2}}<ref>{{Cite web |url = http://blog.evanyou.me/2014/02/11/first-week-of-launching-an-oss-project/ |title = First Week of Launching Vue.js |website = Evan You }}</ref> | latest release version = 2.5.2 | latest release date = {{Start date and age|2017|10|14}}<ref>{{cite web |url = https://github.com/vuejs/vue/releases |title = Vue.js Releases |website = GitHub }}</ref> | status = Active | programming language = [[JavaScript]] | platform = [[Cross-platform]] | size = 76 KB production<br />240 KB development | genre = [[JavaScript library]] | license = [[MIT License]]<ref name="license">{{cite web |title = vue/LICENSE |url = https://github.com/vuejs/vue/blob/dev/LICENSE |website = GitHub |accessdate = 17 April 2017 }}</ref> }}{{Advert||date=November 2017}} '''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 interface]]s.<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. Vue can also function as a [[Web framework|web application framework]] capable of powering advanced [[single-page application]]s. == Overview == Vue.js is a popular [[JavaScript]] front-end framework that was built to organize and simplify web development. The project focuses on making ideas in web UI development (components, declarative UI, hot-reloading, time-travel debugging, etc.) more approachable. It attempts to be less opinionated and thus easier for developers to pick up. It features an incrementally adoptable architecture. The core library focuses on declarative rendering and component composition, and can be embedded into existing pages. Advanced features required for complex applications such as routing, state management and build tooling are offered via officially maintained supporting libraries and packages.<ref>{{Cite web|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 created by Evan You after working for [[Google]] using [[AngularJS]] in a number of projects. He 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/2016/11/03/evan-you/|title=Between the Wires {{!}} Evan You|date=2016-11-03|work=Between the Wires|access-date=2017-08-26}}</ref> Vue was originally released in February 2014. 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 front page 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> More recently Vue has been rising rapidly in terms of GitHub star count, which makes it among the most popular open source projects on GitHub in general and the second most popular JavaScript framework/library (after [[React_(JavaScript_library)|React]]). It has recently surpassed other older and more established libraries such as [[Backbone.js]] (26,178) or even as of 2017: jQuery (44,104)<ref>{{cite web |title = jQuery GitHub Page |url = https://github.com/jquery/jquery |website = GitHub |accessdate = 29 March 2017 }}</ref> and Angular 1.x (56,230). <ref>{{cite web |title = Angular GitHub Page |url = https://github.com/angular/angular.js |website = GitHub |accessdate = 27 June 2017 }}</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 [[Parsing|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 number of components to re-render and apply the minimal amount of DOM manipulation when the app state changes. In Vue, you can use the template syntax or choose to directly write render functions using [[React (JavaScript library)#JSX|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> === 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 web |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]]s to encapsulate reusable code. At a high level, components are custom elements to which the Vue’s compiler attaches behavior. 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: {{syntaxhighlight|lang=javascript|code=Vue.component('buttonclicked', { props: ["initial_count"], data: function() {var q = {"count": 0}; return q;} , template: '<button v-on:click="onclick">Clicked <nowiki>{{ count }}</nowiki> times</button>' , methods: { "onclick": function() { this.count = this.count + 1; } }, mounted: function() { this.count = this.initial_count; } }); }} === 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 third-party CSS animation libraries, such as Animate.css * use JavaScript to directly manipulate the DOM during transition hooks * integrate third-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 === In a [[single-page application]] (SPA) one initial disadvantage was the inability to share links to the exact "sub" page within a specific web page. Because SPAs serve their users only one URL-based response from the server (it typically serves index.html or index.vue), saving bookmarks, or sharing links to a specific article would be impossible. To solve this problem front end routers provide artificial hash-based URLs originally split by a hashbang (#!) ''page.com/#!/'' with HTML5 most modern browsers support routing without the use of a hashbang. JavaScript Libraries like Vue provide an easy Interface to change what is displayed on the page based on the current URL path -- regardless of how it was changed (whether by emailed link, refresh, or in-page links). Additionally, using a front-end router allows for the intentional transition of the browser path when certain browser events (i.e. clicks) occur on buttons or links. Vue itself doesn’t come with front-end hashed [[routing]]. But the open source "vue-router" package provides an API to change browser URL, use the back button (hash history), and email password resets or email verification links with authentication parameters provided in the URL. It supports mapping nested routes to nested components and offers fine-grained transition control. Creating a front end routed Single-Page Application with Vue + vue-router is made simple. With Vue, developers are already composing applications with small building blocks building larger components. With vue-router, added to the mix, components must merely be mapped to the routes they belong to, and parent/root routes must indicate where children should render.<ref>{{Cite web |url = https://vuejs.org/v2/guide/routing.html |title = Routing — Vue.js |access-date = 2017-03-11 |language = en }}</ref> {{syntaxhighlight|lang=javascript|code= <div id="app"> <router-view></router-view> </div> const User = { template: '<div>User <nowiki>{{ $route.params.id }}</nowiki></div>' } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] }) }} The code above: # Sets a front-end route at `websitename.com/user/__insert an id here__`. # Which will render in the User component defined in (const User...) # Allows the User component to pass in the particular id of the user which was typed into the URL using the $route object's params key: `$route.params.id`. # This template (varying by the params passed into the router) will be rendered into `<router-view></router-view>` inside the DOM's div#app. # The finally generated HTML for someone typing in: `websitename.com/user/1` will be: {{syntaxhighlight|lang=html|code= <div id="app"> <div> <div>User 1</div> </div> </div> }} <ref>{{cite web |last1 = You |first1 = Evan |title = Vue Nested Routing (2) |url = https://router.vuejs.org/en/essentials/nested-routes.html |website = Vue Home Page (subpage) |accessdate = 10 May 2017 }}</ref> == 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 == * [[Comparison of JavaScript frameworks]] * [[React (JavaScript library)|React]] * [[AngularJS]] * [[JavaScript framework]] * [[JavaScript library]] == References == {{Reflist}} __FORCETOC__ [[Category:JavaScript web frameworks]] [[Category:Web applications|Frameworks]] [[Category:Web development]] [[Category:Software frameworks]]'