Vue.js


From Wikipedia, the free encyclopedia

Jump to navigationJump to search

Vue.js
Vue.js Logo 2.svg
Original author(s) Evan You
Initial release February 2014; 5 years ago[1]
Stable release
2.6.10 / March 20, 2019; 31 days ago[2]
Repository

Edit this at Wikidata

Written in JavaScript
Size 30.67 KB production
279 KB development
Type JavaScript framework
License MIT License[3]
Website vuejs.org

Vue.js (commonly referred to as Vue; pronounced /vj/, like view) is an open-source JavaScript framework for building user interfaces and single-page applications.[4]

Overview[edit]

Vue.js features an incrementally adoptable architecture that focuses on declarative rendering and component composition. Advanced features required for complex applications such as routingstate management and build tooling are offered via officially maintained supporting libraries and packages.[5]

History[edit]

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.”[6] Vue was originally released in February 2014.

Features[edit]

Templates[edit]

Vue uses an HTML-based template syntax that allows binding 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 calculate the minimal number of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.

Vue users can use template syntax or choose to directly write render functions using JSX.[7] 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.[8]

Reactivity[edit]

Vue features a reactivity system that uses plain JavaScript objects and optimized re-rendering. 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.[9]

Components[edit]

Vue components extend basic HTML elements 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.[10] The code snippet below contains an example of a Vue component. The component presents a button and prints the number of times the button is clicked:

<div id="tuto">
	<button-clicked v-bind:initial-count="0"></button-clicked>
</div>

<script>
Vue.component('button-clicked', {
  props: [ "initialCount" ],
  data: () => ({
    count: 0,
  }),
  template: `<button v-on:click="onClick">Clicked {{ count }} times</button>`,
  computed: {
    countTimesTwo() {
      return this.count * 2;
    }
  }
  watch: {
    count(newValue, oldValue) {
      console.log(`The value of count is changed from ${oldValue} to ${newValue}.`);
    }
  }
  methods: {
    onClick() {
        this.count += 1;
    }
  },
  mounted() {
    this.count = this.initialCount;
  }
});

new Vue({
  el: '#tuto',
});
</script>

Transitions[edit]

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

Routing[edit]

A traditional disadvantage of single-page applications (SPAs) is 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/#!/. However, with HTML5 most modern browsers support routing without the use of a hashbang.

Vue provides an 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. 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.[13]

<div id="app">
  <router-view></router-view>
</div>
...

<script>
...
const User = {
  template: '
User {{ $route.params.id }}
'
} const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] }) ... </script>

The code above:

  1. Sets a front-end route at websitename.com/user/<id>.
  2. Which will render in the User component defined in (const User…)
  3. 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.
  4. This template (varying by the params passed into the router) will be rendered into <router-view></router-view> inside the DOM’s div#app.
  5. The finally generated HTML for someone typing in: websitename.com/user/1 will be:
<div id="app">
  <div>
    <div>User 1</div>
  </div>
</div>

[14]

See also[edit]

References[edit]

  1. ^ “First Week of Launching Vue.js”Evan You.
  2. ^ “Vue.js Releases”GitHub.
  3. ^ “vue/LICENSE”GitHub. Retrieved 17 April 2017.
  4. ^ “Introduction — Vue.js”. Retrieved 2017-03-11.
  5. ^ “Evan is creating Vue.js | Patreon”Patreon. Retrieved 2017-03-11.
  6. ^ “Between the Wires | Evan You”Between the Wires. 2016-11-03. Archived from the original on 2017-06-03. Retrieved 2017-08-26.
  7. ^ “Template Syntax — Vue.js”. Retrieved 2017-03-11.
  8. ^ “Vue 2.0 is Here!”The Vue Point. 2016-09-30. Retrieved 2017-03-11.
  9. ^ “Reactivity in Depth — Vue.js”. Retrieved 2017-03-11.
  10. ^ “Components — Vue.js”. Retrieved 2017-03-11.
  11. ^ “Transition Effects — Vue.js”. Retrieved 2017-03-11.
  12. ^ “Transitioning State — Vue.js”. Retrieved 2017-03-11.
  13. ^ “Routing — Vue.js”. Retrieved 2017-03-11.
  14. ^ You, Evan. “Vue Nested Routing (2)”Vue Home Page (subpage). Retrieved 10 May 2017.

External links[edit]

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s