Tentando entender a parte conceitual do vue

Obrigada Luis, vou assistir

Olá, Marcilane!

Infelizmente os cursos de Vue 2 que eram pré-requisito para este curso foram descontinuados. Mas vamos aos principais conceitos?

o que é?

O Vue é um framework JavaScript que nos permite construir interfaces de usuário.

Ele se baseia no HTML, CSS e JavaScript padrão e nos fornece um modelo de programação declarativo baseado em componentes, o que nos ajuda a desenvolver interfaces de usuário simples ou complexas com eficiência.

Sintaxe do template

O Vue usa um template baseado em HTML que permite vincular declarativamente o DOM renderizado aos dados da instância do componente.

Todos os temaples Vue são HTML sintaticamente válidos que podem ser analisados por navegadores ou qualquer validador que seja compatível com as specs do HTML.

A forma mais básica de exibição de dados é a interpolação de texto usando a sintaxe "Mustache" (chaves duplas):

<span>Mensagem: {{ mensagem }}</span>

A mensagem dentro do "Mustache" será substituída pelo valor da propriedade mensagem da instância do componente correspondente. Ele também será atualizado sempre que a propriedade msg for alterada.

Podemos inclusive chamar funções que nos retornam texto, por exemplo:

<span>Mensagem: {{ obterMensagem() }}</span>

Binding de atributos

Da mesma forma que podemos escrever variáveis, podemos vincular atributos por valores definidos na instância do componente correspondente. Por exemplo, podemos ter uma propriedade chamada botaoEstaDesabilitado retornando um valor booleano (true ou false):

<button v-bind:disabled="botaoEstaDesabilitado">Button</button>

Como isso é algo comum de ser feito, podemos omitir a diretiva v-bind, ficando então assim (isso para qualquer atributo):

<button :disabled="botaoEstaDesabilitado">Button</button>

Renderização condicional

Podemos renderizar, condicionalmente, um elemento ou não utilizando o v-if:

<template>
    <div>
        <p v-if="visto">Agora você me viu</p>
        <p v-else>Agora não</p>
    </div>
</template>

E o Vue também nos permite trabalhar com listas, utilizando o v-for:

<template>
    <div>
        <ol>
            <li v-for="naveEspacial in frotaEstelar">
                {{ naveEspacial.capitao }}
            </li>
        </ol>
    </div>
</template>

Options API

Acima eu disse que podemos utilizar as propriedades da instância do componente, por exemplo, para obter o valor da mensagem. Para definir esses valores, basta termos uma função chamada data que retorna um objeto com todas as propriedades que queremos deixar disponíveis para o template, assim:

<template>
    <div>
        {{ mensagem }}
    </div>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
    data() {
        return {
            mensagem: "Vida longa e próspera!"
        }
    }
})
</script>

Assim como disponibilizados dados, podemos disponibilizar métodos:

<template>
    <div>
        {{ obterMensagem }}
    </div>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
    methods: {
        obterMensagem () {
            return 'Vida longa e próspera!'
        }
    }
})
</script>

Interagindo com o usuário

Podemos ouvir e reagir aos eventos ativados pelo usuário utilizando o v-on:

<template>
    <div>
        <p v-if="!esconderMensagem">{{ mensagem }}</p>
        <button v-on:click="exibirMensagem">Exibir mensagem</button>
    </div>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
    data() {
        return {
            mensagem: 'Vida longa e próspera!',
            esconderMensagem: true
        }
    },
    methods: {
        exibirMensagem() {
            this.esconderMensagem = false
        }
    }
})
</script>

E podemos vincular uma propriedade a um input, tendo acesso aos valores inseridos por um usuário:

<template>
    <div id="app-6">
        <p>{{ mensagem }}</p>
        <input v-model="mensagem">
    </div>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
    data: {
        mensagem: 'Olá Vue!'
    }
})
</script>

Para aprender mais sobre a Composition API, eu super recomendo esse curso. E o primeiro curso da formação é esse.

Espero ter te ajudado, Marcilane! Bons estudos :D

Obrigada Vinny, valeu demais!!