DOCSEARCHbyAlgolia
Submit Docs

Vue.js 2 Documentation

website·Indexed 19 days ago

https://es.vuejs.org/

Official documentation for Vue 2, featuring guides on components, render functions, and Single File Components (SFC). Includes a cookbook with practical examples for form validation, serverless blogs, Dockerization, and Axios API consumption, as well as migration paths from Vue 1.x and Vuex 0.6.x.

Tokens
72.5K
Snippets
410
Records
543
Agent score
99%

What's inside Vue.js 2

  1. Overview of Vue.js 2.x

    v2
    Vue.js (pronounced /vjuː/, as in 'view') is a progressive framework for building user interfaces. It is designed to be adopted incrementally, focusing primarily on the view layer, making it easy to integrate into existing projects or use to power complex Single-Page Applications (SPAs) when combined with modern build tools and supporting libraries.

  2. Introduction to Vue Single File Components (SFCs)

    v2
    Single File Components (SFCs) use the .vue extension to encapsulate a component's template, logic, and styles in a single file. This approach solves several limitations of global component definitions and text-based templates, such as the lack of syntax highlighting, the need for unique global names, and the absence of modular CSS. SFCs require a build step using tools like Webpack or Browserify and the vue-loader plugin.

  3. Overview of the Vue.js 2 Cookbook

    v2

    The Vue.js 2 Cookbook is a collection of self-contained 'recipes' designed to provide deeper technical insights than the standard Guide. While the Guide focuses on a progressive learning path with simple examples, the Cookbook offers:

    • Specific Focus: Each recipe addresses a particular aspect of Vue independently.
    • Greater Depth: Includes complex examples and combinations of features.
    • JavaScript Integration: Explains essential JavaScript (ES5/ES6+) functions within the context of Vue development.
    • Ecosystem Exploration: Provides deeper dives into ecosystem libraries and tools (e.g., Webpack configuration for SFCs).

  4. Choose between Vuex 1.0 and 2.0 for Vue 2.0 projects

    v2

    Both Vuex 1.0 and 2.0 are compatible with Vue 1.0 and 2.0.

    • Vuex 2.0: A radical redesign and simplification of the API. Recommended for new projects or those wanting the latest client-side state management approach.
    • Vuex 1.0: Mostly backward compatible with 0.6.x. Recommended for projects with large existing codebases that require a smooth, incremental migration.

  5. Recommended IDEs for Vue 2 and TypeScript

    v2

    For the best development experience with Vue 2 and TypeScript, the following tools are recommended:

    • Visual Studio Code: Provides strong native TypeScript support. When using Single File Components (SFCs), install the Vetur extension for TypeScript inference within .vue files.
    • WebStorm: Offers built-in support for both TypeScript and Vue.

  6. Adopt Flux architecture with Vuex for advanced state management

    v2
    For complex applications, follow the Flux architecture convention where components do not mutate store state directly. Instead, components dispatch events (actions) to notify the store to perform mutations. This pattern enables advanced debugging tools such as mutation logs, state snapshots, and time-travel debugging. The official implementation of this pattern for Vue is Vuex.

  7. Understand Vue 2 reactivity mechanism

    v2
    Vue 2 achieves reactivity by converting all properties in the data object into getters and setters using Object.defineProperty. This allows Vue to track dependencies and notify watchers when a property is accessed or modified, triggering a component re-render. Because this relies on ES5 features, Vue 2 does not support IE8 or lower.

  8. Understand Vue's automatic dependency tracking for performance

    v2
    Unlike React, which may require manual optimizations like PureComponent or shouldComponentUpdate to prevent unnecessary re-renders of child component subtrees, Vue automatically tracks component dependencies during render. This means Vue knows exactly which components need to re-render when state changes, effectively providing the benefits of shouldComponentUpdate automatically without requiring manual implementation or immutable data structures.

  9. Handle DOM template parsing restrictions with the is attribute

    v2

    Certain HTML elements (like <table>, <ul>, <ol>, <select>) have strict requirements about their children. If a custom component is placed directly inside these elements, it may be treated as invalid content. To solve this, use the is attribute on a valid child element (e.g., <tr> inside <table>) to render the component.

    Note: This limitation does not apply when using string templates, Single File Components (.vue), or <script type="text/x-template">.

    <!-- Invalid: <blog-post-row> is not a valid child of <table> -->
<table>
  <blog-post-row></blog-post-row>
</table>

<!-- Valid: Use the 'is' attribute on a valid <tr> element -->
<table>
  <tr is="blog-post-row"></tr>
</table>

  10. Manage state and routing in large-scale Vue applications

    v2

    For large-scale applications, Vue provides officially supported and maintained libraries for routing and state management, ensuring deep integration and consistent updates with the core library.

    • State Management: Vuex is the official state management library inspired by Elm. However, other patterns like Redux can also be integrated into Vue applications.
    • Routing: Vue provides a robust, officially supported routing solution.

  11. Understand the Virtual DOM and VNodes in Vue 2

    v2
    Vue uses a Virtual DOM to track changes before updating the real DOM. Instead of creating real DOM elements, the createElement function returns a Virtual Node (VNode). A VNode is a JavaScript object that describes the type of node to be rendered on the page, including its children. The entire tree of VNodes is referred to as the Virtual DOM.

  12. Use Vuex for complex state management in Vue 2

    v2
    For large applications with complex state interactions across many components, Vue provides Vuex, a state management library inspired by Elm. Vuex is specifically designed for Vue, offering a more intuitive API and better integration than view-agnostic libraries like Redux. It also integrates with vue-devtools to provide time-travel debugging.