Vue.js (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. It's designed based on standard HTML, CSS and JavaScript and is a declarative, component-based programming model, facilitating an effective user interface development for both simple and sophisticated builds.
Vue is based on the idea of
virtual DOM.DOM (abbreviated Document Object Model) is the interface for designing a
structural document using objects. It's a platform- and
language-neutral agreement for constructing and deconstructing
data in HTML, XML and etc.
The main issue with DOM is it was never designed for creating dynamic
user interface (UI). We can work with it, using JavaScript and libraries similar to jQuery,
but its use doesn't solve issue with performance.
Instead of interacting with DOM directly, we are working with its lightweight copy. We can modify the copy based on our requirements,
and then apply the changes to the actual DOM.
This excludes the direct interaction with the interface nodes. Original work is performed with a virtual copy (virtual DOM) and the changes are applied afterwards to the actual interface nodes. Simultaneously, actual DOM tree and its virtual copy are compared, differences pinpointed and only updated sections are re-written. This means that all changes are accumulated for a brief period of time and then these changes are applied to actual interface nodes via a single patch. Due to this, a much higher execution speed is achieved.
Vue is convenient when data is used in several components. In this case, such data is transferred to a dedicated library.
Advantages of Vue:
Simple entry, no need to configure environment, available detailed documentation;
Combines all React and Angular perks;
Framework has grown beyond nascent stages;
Popular among developers.
Vue implements all the modern approaches to the development of user interfaces and is a framework that is easy to learn, flexible and highly integrated with third-party technologies.
The Vue library is included in the Bitrix24 On premise products which allows the use and customization of Vue components, integrated in the Bitrix Framework core. The Vue library versioning issue is resolved as well: the Vue version is always the same within current Bitrix Framework.
This section of the course covers the best (and easier) ways to integrate Vue in Bitrix Framework (CoreJS, localizations, events, inheriting).
Note: Such solution won't by suitable for projects, employing SSR (Server side rendering) and server compiling (for example, for single-file components).
You can find more details on the framework (including examples of use) at the
official website.
If you are an experienced frontend developer, and you want to know, how Vue differs from other libraries or frameworks, please take a look at the comparisons with the other frameworks.
We have included the framework into the Bitrix24 products and created BitrixVue for a convenient interaction between Vue and Bitrix Framework.
BitrixVue is an extension for standard Vue library. It adds new features, without altering standard Vue.js behavior.
What are BitrixVue advantages?
First: by using BitrixVue, you can integrate into the Bitrix Framework system and work effectively with other components and internal systems (such as localizations and component dynamic load).
Second: resolves issue of versioning, when two developers (for example, two applications from Bitrix24.Market) are using Vue of different versions, causing conflicts. Principally BitrixVue was created to avoid such issues.
Third: Bitrix24 Partner developers gain an opportunity to customize and clone components in Bitrix Framework modules (where it's possible) without changing the product source code.
And finally: Vue framework, that is main part of BitrixVue, is not exported to a global visibility scope. This avoids any issues with third-party applications. Such apps can continue securely using standard Vue connection, including its use in Webpack, without danger of conflicts with library inside Bitrix Framework.
Vue framework versions
Vue 2 ha deprecated and is no longer supported. Please use BitrixVue 3 in your projects (based on Vue 3).