What is vue

Since then, it is continuously evolving. At the beginning of , Vue. Later, in September , Evan You decided to announce the release of Vue 3. The community will keep growing because it was built on the best features combination of Angular and React.

Here are some of the features that we find exciting and the root cause of its rapid growth and make it cool. The learning curve is effortless if we compare it with the react. JS and Angular. These components let you break a large application into discrete building blocks that can be created and managed separately, and transfer data between each other as required.

These small blocks can help you reason about and test your code. While some frameworks encourage you to separate your template, logic, and styling code into separate files, Vue takes the opposite approach.

Using Single File Components , Vue lets you group your templates, corresponding script, and CSS all together in a single file ending in. These files are processed by a JS build tool such as Webpack , which means you can take advantage of build-time tooling in your project.

As a bonus, projects created with the Vue CLI are configured to use. In fact, if you look inside the src folder in the project we created with the CLI, you'll see your first.

Open your App. All Single File Components share this same basic structure. Your template can contain any valid HTML, as well as some Vue-specific syntax that we'll cover later.

We'll stick to standard HTML through this tutorial, but it is worth knowing that this is possible. This object is where you locally register components, define component inputs props , handle local state, define methods, and more. Your build step will process this object and transform it with your template into a Vue component with a render function. In the case of App. When you register a component in this way, you're registering it locally.

Locally registered components can only be used inside the components that register them, so you need to import and register them in every component file that uses them. The Vue CLI comes with a built-in development server.

This allows you to run your app locally so you can test it easily without needing to configure a server yourself. In your terminal, try running npm run serve or yarn serve if you prefer yarn. Your terminal should output something like the following:. Right now, it should contain a welcome message, a link to the Vue documentation, links to the plugins you added when you initialized the app with your CLI, and some other useful links to the Vue community and ecosystem.

Open the App. If your server is still running, you should see the logo removed from the rendered site almost instantly. If you save your App. This example demonstrates that we can bind data to not only text and attributes, but also the structure of the DOM. You can change seen from true to false in the sandbox below to check the effect:. There are quite a few other directives, each with its own special functionality. For example, the v-for directive can be used to display a list of items using the data from an array:.

The component system is another important concept in Vue, because it's an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components. If we think about it, almost any type of application interface can be abstracted into a tree of components:. In Vue, a component is essentially an instance with pre-defined options. Registering a component in Vue is straightforward: we create a component object as we did with App objects and we define it in parent's components option:.

But this would render the same text for every todo, which is not super interesting. We should be able to pass data from the parent scope into child components.

Let's modify the component definition to make it accept a prop :. Having components greatly simplifies this task. An important aspect of any emerging technology is the ability to integrate with existing applications. With Vue. Between its components and lightweight nature, Vue can be used in nearly any project. During its 5 years of existence, Vue.

The upcoming release of Vue CLI 3 is a complete rewrite that will deliver heaps of new functions. Vue CLI 3 will support Babel and TypeScript out of the box, provide unit testing, end-to-end testing tools, and a plugin installation system. The most popular code editors like Sublime text , Visual Studio , and Atom support Vue, which makes trying it out easier.

Newcomers are widely supported by the community that actively answers questions on Discord chat and forum. Additionally, you will find countless guides and courses right on the starting page of Vue.

We should give credit to Vue. More importantly, there is also a section comparing Vue with other JS frameworks, and naming things that those have in common e. Because of that, community members are pretty active both in the Discord chat and forum. As evidence of community activities, just look at the number of Vue. The adoption of Vue across enterprises like Xiaomi and Alibaba helped popularize the framework and created demand in the labor market. The Chinese Great Firewall makes things a little different in that country, because lots of popular resources are currently unavailable there.

That makes learning and using React or Angular more difficult. Vue comes as a more preferable variant. So, when searching for Vue content, you will obviously face forum discussions, plugin descriptions, and instructions in Chinese. This may be a problem for English-speaking-only engineers. We have mentioned the two-way data binding implemented in Vue to manage DOM updates.

In plain language, the Vue. Each component has its watcher that rerenders the data each time a user triggers the component. The reactivity system rerenders only those chunks of data that were triggered. Its community and development team size is still incomparable with more mature Angular. Neither does it enjoy financial support from large enterprises. To be adopted in the large scale-projects, the technology should be stable and strongly supported, so that issues can be solved quickly.

We have mentioned flexibility, which is a controversial quality in terms of a big project. Giving your development team too many options might result in philosophically different programming approaches battling inside one team.