Explain Vue to Me

This is how a Vue component looks like:

<template>
    <div>{{msg}}</div>
</template>
<script>
export default{
    data(){
        return {
            msg: 'Hi I came from JavaScript'
        }
    },
    mounted(){
        setTimeout(() => this.msg = 'I came 3seconds after the component mounted', 3000)
    }
}
</script>
<style scoped>
/* I will only be applied over HTML above, since I have optional 'scoped' attribute */
div{color:red}
</style>

So every component can have its own template styling and scripts.

Just like mounted there are other lifecycle hooks like beforeCreate,created, beforeMount, mounted , and some more.

Vue took best of the things from Angular and React.

(I've wrote this considering Vue 2, I haven't used vue 3 yet)

One advantage I see is, for someone who has only used plain html, css, javascript before, Vue doesn't throw any extra things for him to learn (there are things to learn though but he can still read Vue code without any prior knowledge)

Vue allows you to break your web application down into small, reusable components using syntax you already know - HTML to write component templates, JavaScript for state management and event handling, and CSS for styling. No need to learn JSX or CSS in JS.

Like other frameworks such as React, Vue automatically updates the DOM for you as state changes - no need for manual DOM updates. Just change the component state and the correct parts of the DOM will update.

Vue is designed to be progressively adopted. You can get started very quickly from a script tag with no need for a build step, and only knowing the basics. If your application needs it, there are a number of advanced features that you can learn as you need them - things like animations and render functions, and using Vuex for more advanced stage management. Vue therefore does a great job at scaling up to support large enterprise applications.

Vue is like a cameleon. Whatever the environment, it adapts. Forest, mountain, plain desert, etc... It evolves and scales accordingly. You can use a simple script to include it in a static website and create a Vue component for only the login button for instance (send a login/password to the server, receive a token, store it in localstorage). Or create a full Vue application involving a router (VueRouter), a more complex data exchange system (VueX), with reusable components just like React. You can do 15%, 50% a whole application in Vue due to its incredibly simple integration. It uses concepts that are known to Web developers, no new syntax for writing Virtual DOM: it is just HTML that is cleverly converted to JavaScript. It just feels like writing yet another HTML page, with some JavaScript and CSS. But it was a Vue component! Haha you just got pranked...

If I were to explain Vue to my past self the conversation would something like this.

Old me - Do you know those Jquery widgets that you see everywhere? Those datepickers and autocomplete thingies?

Young(er) me - Yeah, I've seen it.

OM - Well... Vue is a widget factory.

YM - Say what?

OM - It works like this. You give Vue a description of a widget looks by writing a "html" in a template tag and css in a style tag, then you describe how it should behave using a plain js object, Vue will take all of that and show it to the user.

YM - And how is that any better than Jquery?

OM - If you do use Vue you don't have to be a wizard to build your own input with autocomplete. You can make one just by writing regular html, css and js.

"Explain VUE to Me" Is a google search that plays out an infinite loop of recursion in seo indexing by showing this very same post first on the google.com search engine when googled.

google.com/search?q=Explain+Vue+to...

As a fairly brand new hobbyist coder, Vue helps me by putting guide rails and structure around coding. HTML is in its own place. Even within the Javascript section, things are neatly organized into computed properties vs methods vs life cycle hooks. It helps me, the novice, read the code much more quickly and easily.

I tried React for a while and while there were things that seemed more open and less hand holding, I found myself struggling more with how to organize my code than actual coding. While that might be better for a full time developer, I'm just a hobbyist and I love the more standardized approach Vue uses.

The first party router and state management is also helpful. Vue is more of a "here we took the annoying stuff and just built it for you so you can focus on just making a product".

Suitable for progressive web apps or single page applications, Vue is based on the MVVM pattern to let you built fast user experiences. One of the key aspects that interest the most is the 2 way data binding that open the possibilities to offer great real time capability while keeping the user engaged and not disturbing its navigation.

Here is for me what distinguish Vue from its concurrents:

• makes 2 way data binding very easy to use
• first class add-ons (VueRouter, Vuex, Chrome VueDevTools...)
• low barrier entry (usable using a simple CDN link, makes easy to switch to advanced concepts)
• easy to scale with (reusable components, SFC if you use a bundle like Webpack)
• very active community (Vuei18n, Vuetify, Vue Native, ...)

Review totally not biased by the fact that this is my go to tool for building front end web app 🙄

Vue is "jQuery of the modern web"

The way it speeds up development and is easy to learn even for newbies to web development appeals to me - no real complicated syntax needs to be learned.
I wrote an article on the very basics: dev.to/lucashogie/getting-started-...

Vue makes it very easy to connect the DOM (HTML tags) to data, which enables developers to quickly build interactive interfaces.

Vue makes it easy to get started, because it utilizes a set of custom attributes for the html tags which add functionality such as looping, conditionals, data binding and event listening. This design makes it easy to adopt Vue incrementally, converting parts of existing website from jQuery or static HTML easy.

Not only is Vue a great tool for adding reactivity (DOM <=> data binding) to existing projects, it is also good for making Single Page Applications. Vue is designed in a way that makes it easy to learn and use, without sacrificing much in terms of performance or capability.