No Vue, colocamos o HTML, CSS e JS de um componente em um único arquivo, chamamos isso de Single File Component

Uma interface pode ter vários componentes. Vamos criar nosso primeiro componente usando o VUE.js

<template>
</template>

<script>
</script>

<style>
</style>

Estrutura de um componente

<template>
    <div>
        <p>VueJS é top</p>
    </div>
</template>

Cada componente precisa de seu container

<template>
</template>

<script>
export default {
  name: 'hello'
}
</script>

<style>
</style>

Export default

<template>
</template>

<script>
export default {
  name: 'hello'
}
</script>

<style scoped>
</style>

O atributo scoped

<template>
  <div>
    <p>Olá Mundo</p>
  </div>
</template>

<script>
export default {
  name: 'hello'
}
</script>

<style scoped>
p {
  color: #2e3192;
}
</style>

Olá web sua linda<3

Ligando dados

{{ mustache }}

<template>
  <div class="ola">
    <h1>{{ mensagem }}</h1>
  </div>
</template>

<script>
export default {
  name: 'ola',
  data () {
    return {
      mensagem: 'oláaaaaaaaaaaaaaaa'
    }
  }
}
</script>

<style scoped>
</style>

A diretiva v-model e o two-way data binding

<template>
  <div>
    <p>Quantos anos você tem?</p>
    <input v-model="idade">
    <p>você tem {{ idade }} anos de idade.</p>
  </div>
</template>

<script>
export default {
  name: 'ola',
  data () {
    return {
      idade: ''
    }
  }
}
</script>

<style scoped>
</style>

"Eu sempre fiz coisas que eu estava pouco preparada para fazer. Eu acho que é assim que você cresce. Quando há aquele momento de 'Wow, não tenho certeza de que posso isso', e você passa por esses momentos, é quando você tem um avanço."

— Marissa Mayer

Até a próxima!

Não deixem de revisar as apostilas e resumos