Tutorial Vue.js: Desenvolvedor Iniciante a Front-EndReviltec

Este curso ensinará os conceitos fundamentais necessários para começar a criar aplicativos com Vue.js.

Para quem é este curso GRATUITO?

iniciantes completos que querem ser desenvolvedores web
desenvolvedores experientes que desejam explorar tópicos avançados
qualquer programador que goste de aprender algo excitante

Quanto tempo dura o curso?

Este curso tem 4 horas e 22 minutos de duração e é dividido em 35 lições no total. Você descobrirá que é um ótimo recurso ao qual voltará com frequência.

Neste curso, você aprenderá por que o Vue.js é uma ótima opção para um framework front-end e descobrirá como usá-lo em detalhes.

Você começará construindo os componentes Vue mais simples e aprendendo a usar os principais recursos, como vinculação de dados, props, eventos e propriedades computadas.

Em seguida, você construirá esse conhecimento passo a passo com projetos práticos aprendendo como usar o Vue CLI, formulários, observadores e eventos personalizados.

Você também dominará conceitos-chave como o roteador Vue e a API de composição. Ao final deste curso, você estará confiante no uso do Vue.js para todos os seus projetos de desenvolvimento front-end.

O que você aprenderá

fundamentos do Vue sem ferramentas de construção ou cadeias de ferramentas
criar aplicativos, definir e usar opções, organizar aplicativos em componentes
aprenda as cadeias de ferramentas
como carregar e trabalhar com dados reativos
como lidar com a entrada do usuário e criar eventos personalizados
manipular estilo, criar propriedades computadas
definir objetos que observam seus dados para mudanças
como criar aplicativos de página única usando o roteador Vue
como usar a API de composição

Acompanhe, aprenda fazendo

Eu encorajo você a seguir este curso, e você aprenderá sobre todos os recursos mais importantes do Vue.js

Para ajudar, o repositório GitHub Tutorial do Vue.js: Iniciante ao desenvolvedor front-end contém o código-fonte de cada lição e o projeto de amostra concluído que foi criado ao longo do curso.

1. O que você vai aprender

Assistir vídeo aula [0:00:00] ↗

Obtenha uma introdução ao curso e uma visão geral do que você estará construindo.

2. Vue.js sem cadeia de ferramentas

Introdução ao Vue

Assistir vídeo aula [0:02:31] ↗

Vue.js é a estrutura de interface do usuário mais acessível, especialmente sem o uso de cadeias de ferramentas.

Aqui está o código-fonte completo para um aplicativo hello world Vue.js mínimo e sem necessidade de cadeia de ferramentas.


 lang="en">

     charset="UTF-8">
     http-equiv="X-UA-Compatible" content="IE=edge">
     name="viewport" content="width=device-width, initial-scale=1.0">
    </span>Vue Basics<span style="color: #bb0066;font-weight: bold">
     href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <span style="color: #336699">src=</span><span style="color: #dd2200;background-color: #fff0f0">"https://unpkg.com/vue@3"</span><span style="color: #bb0066;font-weight: bold">>


     id="content" class="container">
        {{ pageTitle }}
        {{ content }}
    

    </span>
</pre>
</td>
</tr>
<tr id="line-18" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;">
<pre>18</pre>
</td>
<td class="rouge-code">
<pre>        <span style="">Vue</span><span style="">.</span><span style="">createApp</span><span style="">({</span>
</pre>
</td>
</tr>
<tr id="line-19" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;">
<pre>19</pre>
</td>
<td class="rouge-code">
<pre>            <span style="">data</span><span style="">()</span> <span style="">{</span>
</pre>
</td>
</tr>
<tr id="line-20" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;">
<pre>20</pre>
</td>
<td class="rouge-code">
<pre>                <span style="color: #008800;font-weight: bold">return</span> <span style="">{</span>
</pre>
</td>
</tr>
<tr id="line-21" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;">
<pre>21</pre>
</td>
<td class="rouge-code">
<pre>                    <span style="color: #336699">pageTitle</span><span style="">:</span> <span style="color: #dd2200;background-color: #fff0f0">'</span><span style="color: #dd2200;background-color: #fff0f0">Hello, Vue</span><span style="color: #dd2200;background-color: #fff0f0">'</span><span style="">,</span>
</pre>
</td>
</tr>
<tr id="line-22" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;">
<pre>22</pre>
</td>
<td class="rouge-code">
<pre>                    <span style="color: #336699">content</span><span style="">:</span> <span style="color: #dd2200;background-color: #fff0f0">'</span><span style="color: #dd2200;background-color: #fff0f0">Welcome to the wonderful world of Vue</span><span style="color: #dd2200;background-color: #fff0f0">'</span>
</pre>
</td>
</tr>
<tr id="line-23" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;">
<pre>23</pre>
</td>
<td class="rouge-code">
<pre>                <span style="">};</span>
</pre>
</td>
</tr>
<tr id="line-24" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;">
<pre>24</pre>
</td>
<td class="rouge-code">
<pre>            <span style="">}</span>
</pre>
</td>
</tr>
<tr id="line-25" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;">
<pre>25</pre>
</td>
<td class="rouge-code">
<pre>        <span style="">}).</span><span style="">mount</span><span style="">(</span><span style="color: #dd2200;background-color: #fff0f0">'</span><span style="color: #dd2200;background-color: #fff0f0">#content</span><span style="color: #dd2200;background-color: #fff0f0">'</span><span style="">);</span>
</pre>
</td>
</tr>
<tr id="line-26" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;">
<pre>26</pre>
</td>
<td class="rouge-code">
<pre>    <span style="color: #bb0066;font-weight: bold">



Usando loops para gerar conteúdo

Assistir vídeo aula [0:10:51] ↗

Coleções são alguns dos tipos de dados mais comuns com os quais você trabalhará em seu aplicativo. Nesta lição, você aprenderá como usar o v-for diretiva para percorrer coleções para gerar saída.

Vinculando Dados a Atributos

Assistir vídeo aula [0:17:00] ↗

A vinculação de dados mantém automaticamente seus componentes atualizados com os dados subjacentes do aplicativo. Veja como funciona nesta lição.

Aqui está um exemplo de vinculação de dados dentro de um loop.

            
                 v-for="(link, index) in links">
                     
                        :href="link.url"
                    >{{ link.text }}
                
            

Configurando eventos

Assistir vídeo aula [0:25:11] ↗

Os eventos são a força vital de qualquer aplicativo gráfico. Você aprenderá como escutar eventos DOM nesta lição.

Classes CSS de vinculação I

Assistir vídeo aula [0:33:15] ↗

A manipulação de CSS é fundamental para fornecer experiências de usuário dinâmicas e aprimoradas. Você aprenderá como vincular classes CSS ao estado nesta lição.

Usando Propriedades Calculadas

Assistir vídeo aula [0:41:48] ↗

Às vezes, você precisa calcular dados em tempo real para fornecer reatividade ao seu aplicativo. As propriedades computadas fornecem essa capacidade.

Classes de CSS de vinculação II

Assistir vídeo aula [0:48:05] ↗

Há mais de uma maneira de esfolar um gato... err vincular classes CSS. Você aprenderá como usar arrays para fazer isso nesta lição.

Apresentando Componentes

Assistir vídeo aula [0:55:00] ↗

Os componentes nos ajudam a organizar nossos aplicativos em partes menores e de fácil manutenção.

Compreendendo o fluxo de dados

Assistir vídeo aula [01:04:19] ↗

Os componentes fornecem dados para seus filhos por meio de props, e você precisará entender como esses dados fluem para criar seus aplicativos.

Aqui está um trecho que mostra como criar e registrar um novo componente com Vue.

app.component('page-viewer', {
    props: ['page'],
    template: `
        
            {{page.pageTitle}}
            {{page.content}}
        
    `
});

3. Usando o Vue CLI

Começando com o Vue CLI

Assistir vídeo aula [1:13:00] ↗

O Vue CLI facilita a instalação e execução de um projeto completo. Você instalará a CLI e criará um projeto nesta lição.

As recomendações atuais são usar create-vue com as ferramentas Vite para novos projetos Vue. O vue-cli está em modo de manutenção, mas ainda funciona para criar aplicativos Vue baseados em Webpack, como neste curso.

Iniciando um projeto do zero

Assistir vídeo aula [1:21:30] ↗

Excluiremos a maior parte desse novo projeto que criamos para começar completamente do zero. É bom praticar essas coisas!

Aplicando CSS a componentes

Assistir vídeo aula [1:32:18] ↗

Nossos aplicativos são divididos em componentes menores e esses componentes precisam de CSS. Você aprenderá como fornecer CSS para seu aplicativo e componentes.

4. Trabalhando com dados

Usando o `created()` Evento de ciclo de vida para carregar dados

Assistir vídeo aula [1:41:51] ↗

O created() O evento de ciclo de vida funciona muito como o evento de carregamento do navegador. É um ótimo momento para buscar dados e fornecê-los ao seu componente antes de serem renderizados no navegador.

Aqui está um exemplo de uso do evento de ciclo de vida criado para carregar dados de página de um servidor remoto.

export default {
    //...

    created() {
        this.getPages();
    },
    data() {
        return {
            pages: []
        };
    },
    methods: {
        async getPages() {
            let res = await fetch('pages.json');
            let data = await res.json();
            this.pages = data;
        }
    }
}

Trabalhando com adereços não definidos

Assistir vídeo aula [1:48:19] ↗

Às vezes, nossos componentes estão prontos e disponíveis antes de terem dados para trabalhar. Você aprenderá como lidar com essas situações nesta lição.

Decidindo quando carregar dados

Assistir vídeo aula [1:55:19] ↗

Alguns componentes dependem de seus pais para obter dados; outros são independentes e carregam seus próprios. Não há regras rígidas e rápidas, então mostrarei algumas estratégias para carregar dados.

Trabalhando com formulários

Assistir vídeo aula [2:01:14] ↗

A principal maneira de trabalhar com a entrada do usuário é por meio de formulários. O Vue torna ridiculamente fácil trabalhar com formulários e seus dados.

Validando Formulários

Assistir vídeo aula [2:08:43] ↗

Eu mencionei que o Vue facilita o trabalho com formulários? Isso inclui a validação.

Atualizando e Filtrando Dados

Assistir vídeo aula [2:14:39] ↗

O Vue nos fornece as ferramentas para obter/fornecer dados que nossos componentes precisam para funcionar. Isso inclui atualizar e filtrar dados.

Usando observadores

Assistir vídeo aula [2:21:05] ↗

Os observadores nos dão a capacidade de observar certas propriedades e reagir quando seus valores mudam.

5. Criando e usando eventos personalizados

Criando eventos personalizados

Assistir vídeo aula [2:25:19] ↗

O Vue facilita a criação de eventos personalizados. Você aprenderá como nesta lição.

Escrevendo um barramento de evento global

Assistir vídeo aula [2:32:48] ↗

Infelizmente, os eventos personalizados não aparecem em bolhas, o que torna difícil para os componentes pais ouvir eventos de filhos aninhados profundamente na árvore. Felizmente, podemos criar nosso próprio ônibus de evento global.

6. Usando o Vue Router

Apresentando o Vue Router

Assistir vídeo aula [2:44:37] ↗

O Vue Router torna possível "navegar" entre os componentes... como se fossem páginas. Você obterá o resumo nesta lição.

Aqui está um roteador simples com algumas rotas estáticas.

const router = createRouter({
    history: createWebHashHistory(),
    rotas: [
        { path: '/', component: PageViewer },
        { path: '/create', component: CreatePage }
    ]
});

Usando Parâmetros de Rota

Assistir vídeo aula [2:53:19] ↗

Os componentes que lidam com rotas não obtêm seus dados por meio de props porque realmente não têm um pai. Em vez disso, eles contam com dados da URL por meio de parâmetros de rota. Você aprenderá como usá-los nesta lição.

Carregando dados para exibições

Assistir vídeo aula [2:59:18] ↗

Como as exibições não obtêm dados de seu pai inexistente, os dados precisam ser carregados de algum lugar. Um armazenamento de dados centralizado pode ser sua solução, e construiremos um nesta lição.

Observando parâmetros para recarregar dados

Assistir vídeo aula [3:10:07] ↗

Se tentarmos "navegar" para uma view já carregada pelo roteador, teremos que recarregar os dados para a nova rota. Você aprenderá como nesta lição.

Usando a classe ativa do roteador

Assistir vídeo aula [3:16:57] ↗

O roteador rastreia o link atualmente ativo. Você aprenderá como usá-lo nesta lição (e limpar muito código!).

Rotas de aninhamento

Assistir vídeo aula [3:23:36] ↗

Rotas, como componentes, podem ser aninhadas. Você aprenderá como e por que fazer isso nesta lição.

Aqui está um roteador atualizado com parâmetros e rotas aninhadas.

const router = createRouter({
    history: createWebHashHistory(),
    rotas: [
        { path: '/:index?', component: PageViewer, props: true },
        { 
            path: '/pages', 
            component: Pages,
            children: [
                { path: '', component: PagesList },
                { path: 'create', component: CreatePage }
            ]
        },
    ]
});


7. Usando a API de composição

Apresentando a API de composição

Assistir vídeo aula [3:30:52] ↗

A API de composição foi criada para melhorar a organização do código do seu componente. Vou repassar o básico nesta lição.

Fornecendo e injetando dependências em componentes

Assistir vídeo aula [3:40:26] ↗

Componentes de "configuração" não usam this, e complica como chegamos às nossas propriedades globais. Em vez disso, usaremos os recursos de fornecer e injetar do Vue para acessar nossos objetos globais.

Acessando Props e Funções do Roteador

Assistir vídeo aula [3:48:18] ↗

A API de composição muda a forma como acessamos... tudo, incluindo props e a rota/roteador. Você aprenderá como acessá-los nesta lição.

Vinculando dados e trabalhando com formulários

Assistir vídeo aula [3:54:58] ↗

Nesta lição, você aprenderá como vincular dados a formulários em componentes de configuração. É fácil.

Definindo valores calculados e observados

Assistir vídeo aula [4:06:00] ↗

Você pode definir valores calculados e observados em componentes de configuração. Você aprenderá como nesta lição.

Implementando a funcionalidade de exclusão

Assistir vídeo aula [4:16:18] ↗

Terminaremos a interface do usuário de gerenciamento fornecendo a funcionalidade de exclusão.

Conclusão

Assistir vídeo aula [4:20:42] ↗

Vue.js é meu framework de UI favorito. E não me interpretem mal - React, Angular e todos os outros frameworks fazem seu trabalho muito bem. Mas há algo diferente no Vue. É muito fácil começar e faltam muitas das regras instáveis que parecem atormentar outras estruturas.

É minha esperança que agora você tenha uma compreensão firme dos fundamentos do Vue, e espero que continue a usá-lo em seus projetos atuais e futuros.

Saber mais

Saiba mais na documentação oficial do Vue ou no portal da comunidade Vue.

Plugins e modelos do Vue

ga-analytics#sendMarketClickEvent">CodeCanyon, ga-analytics#sendElementsClickEvent">Envato Elements e ga-analytics#sendMarketClickEvent">ThemeForest são fontes fantásticas para plug-ins e modelos Vue. Eles podem ajudá-lo a economizar tempo, reduzir custos de desenvolvimento, e entregar projetos no prazo.

Relacionado

Posted by admin

Tagged with

1
2	lang="en">
3
4	charset="UTF-8">
5	http-equiv="X-UA-Compatible" content="IE=edge">
6	name="viewport" content="width=device-width, initial-scale=1.0">
7	</span>Vue Basics<span style="color: #bb0066;font-weight: bold">
8	href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
9
10
11
12	id="content" class="container">
13	{{ pageTitle }}
14	{{ content }}
15
16
17
27
28

1
2	v-for="(link, index) in links">
3
4	:href="link.url"
5	>{{ link.text }}
6
7

1	app.component('page-viewer', {
2	props: ['page'],
3	template: `
4
5	{{page.pageTitle}}
6	{{page.content}}
7
8	`
9	});

1	export default {
2	//...
3
4	created() {
5	this.getPages();
6	},
7	data() {
8	return {
9	pages: []
10	};
11	},
12	methods: {
13	async getPages() {
14	let res = await fetch('pages.json');
15	let data = await res.json();
16	this.pages = data;
17	}
18	}
19	}

1	const router = createRouter({
2	history: createWebHashHistory(),
3	rotas: [
4	{ path: '/', component: PageViewer },
5	{ path: '/create', component: CreatePage }
6	]
7	});