Explain Vue to Me

Continuing off the React post, this is going to be a series where I ask for explainers of different JavaScript concepts.

How would you explain the core concepts, and appeal of VueJS to an uninformed coder?

Happy coding ❤️

Comments

[Saurabh Daware 🌻]

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)

[Mohamed ELIDRISSI]

Great answer, Vue is my favorite between all the three and I only considered React after seeing how many open source projects (and jobs) use it

[Chad Adams]

"So every component can have his own template styling and scripts."

I didn't know components have a gender. Good to know. Learn something new everyday.

[Saurabh Daware 🌻]

haha fixed it

[Seanmclem]

I love the single file component thing by default. I never really liked the whole thing where all the JS logic is sort of broken down like object properties. It reduces my flexibility in how I write my code. I'm sure some people must love it but it's not really for me. Can you maybe elaborate on why you like that? Help me understand. I'd like to use vue more

[Saurabh Daware 🌻]

I never really liked the whole thing where all the JS logic is sort of broken down like object properties.

Are you referring to having properties inside export default in script tag? I think it is useful since If someone else reads my code he would know where to go to see what happens when a component is mounted or updated or he can tell what variables I am using by simply looking at data

[Chad Collins]

Excellent answer!

[with Pyaar]

What is scoped on style tag? Never seen that.

[Israel Muñoz]

It modifies the classes to make them unique to that component, thus scoping that style to that component

[with Pyaar]

Cool thanks

[Daniel Elkington]

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.

[Amin]

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...

[Heiker]

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.

[Chad Collins]

"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...

[CJ Perry]

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".

[qws_]

Never used Vue, but your write-up made me feel like I am going to enjoy it once I finish with JavaScript basics.

[Anwar]

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 🙄

[Yaser Al-Najjar]

Vue is "jQuery of the modern web"

[Josie Bigler]

Going from Angular to Vue is mind blowing. Link to Vue.js... and go?

[Yaser Al-Najjar]

Yep it's just as you said it, "mind blowing".

I just think the next thing to happen is that ecma will add those features we have in those "awesome frameworks" and again vanilla js with basic libraries like spa, router, state manager... etc will be something.

And the evolution cycle will continue.

[Paul Melero]

You can totally do that: 😉

smashingmagazine.com/2018/02/jquer...

[Lucas H.]

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-...

[Daniel P 🇨🇦]

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.