re: Explain Vue to Me VIEW POST

FULL DISCUSSION
 

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)

 
 

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

 
 

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

 

What is scoped on style tag? Never seen that.

 

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

 

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

 

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

code of conduct - report abuse