DEV Community

Discussion on: Explain Vue to Me

Collapse
saurabhdaware profile image
Saurabh Daware 🌻 • Edited on

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)

Collapse
ratherbsurfing profile image
Chad Collins

Excellent answer!

Collapse
jamiepo profile image
Jamie

What is scoped on style tag? Never seen that.

Collapse
israelmuca profile image
Israel Muñoz • Edited on

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

Thread Thread
jamiepo profile image
Jamie

Cool thanks

Collapse
mohamedelidrissi_98 profile image
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

Collapse
seanmclem profile image
Seanmclem • Edited on

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

Collapse
saurabhdaware profile image
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

Collapse
chadalen profile image
Chad Alen • Edited on

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

Collapse
saurabhdaware profile image
Saurabh Daware 🌻

haha fixed it