Curso completo prático rápido de VUE JS Gratuíto

por adminem Cursos Online, Programaçãoon Postado em

001 - VueJS - INTRODUÇÃO - Ver Vídeo Aula

O que é Vue.js?

Vue (pronuncia-se /vjuː/, como view, em inglês) é um framework progressivo para a construção de interfaces de usuário. Ao contrário de outros frameworks monolíticos, Vue foi projetado desde sua concepção para ser adotável incrementalmente. A biblioteca principal é focada exclusivamente na camada visual (view layer), sendo fácil adotar e integrar com outras bibliotecas ou projetos existentes. Por outro lado, Vue também é perfeitamente capaz de dar poder a sofisticadas Single-Page Applications quando usado em conjunto com ferramentas modernas e bibliotecas de apoio.

002 - VueJS - ONDE ENCONTRAR O VUEJS - Ver Vídeo Aula

Se você gostaria de saber mais sobre Vue antes de mergulhar nele, nós criamos um vídeo passeando pelos princípios básicos com um exemplo de projeto. Se você é um desenvolvedor frontend experiente e quer saber como Vue se compara a outras bibliotecas/frameworks, confira a Comparação com Outros Frameworks.

003 - VueJS - JSFIDDLE e CODEPEN - Ver Vídeo Aula -

VUE JS trabalha na camada VIEW, por esse motivo não necessita da criação de servidor para rodar a aplicação, basta você utilizar a biblioteca e fazer seus teste online ou localmente. Você pode estudar VUE JS online através de uma das duas ferramentas abaixo:

004 - VueJS - PREPARAÇÃO DE PROJET - Ver Vídeo Aula

Nesse estudo iremos trabalhar com VUE JS localmente. A forma mais simples de testar Vue.js é usando o exemplo de Olá Mundo no CodeSandbox. Sinta-se à vontade para abrí-lo em outra aba e acompanhar conosco durante alguns exemplos básicos. Ou, você pode criar um arquivo index.html e incluir Vue com:
<!-- versão de desenvolvimento, inclui avisos úteis no console  -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- versão de produção, otimizada para tamanho e velocidade -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

005 - VueJS - A INSTANCIA VUEJS - Ver Vídeo Aula

- VUE JS trabalha usando a ideia de reutilização.

006 - VueJS - INTRODUÇÃO A DIRETIVAS - Ver Vídeo Aula

- VUE JS trabalha muito com Atributos e Diretivas
  • Diretivas: el
  • Diretivas: data
  • Diretivas: v-model
  • Diretivas: v-for
Condicionais em VUE JS
  • if, else, if else em VUE JS
Arquivos

007 - VueJS - INTRODUÇÃO AOS MÉTODO - Ver Vídeo Aula

VUE JS permite construção de um ou mais métodos através da diretiva: metods Diretiva VUE JS
  • methods
Arquivos

008 - VueJS - EXEMPLOS COM DIRETIVAS V-FOR - Ver Vídeo Aula

Diretivas VUE JS
  • v-for
  • Laços com VUE JS
  • Loop com VUE JS
  • Arrays com VUE JS
Arquivos

009 - VueJS - EXEMPLO PRÁTICO COM DIRETIVAS E MÉTODO - Ver Vídeo Aula

Exercício de fixação. Utilizando o VUE JS crie dois métodos, um que adicione o nome das frutas e outro que faz a contagem do total de frutas. Arquivos

010 - VueJS - DIRETIVAS V-BIND e V-ON - Ver Vídeo Aula

VUE JS Diretivas
  • v-bind (significa ligar)
  • v-on (permite chamar uma função)
Arquivos

011 - VueJS - DIRETIVAS V-HTML e V-TEXT - Ver Vídeo Aula

Como chamar um texto em forma HTML com VUE JS? Utilizando a diretiva v-html. Diretivas
  • v-html
  • v-text
Arquivos

012 - VueJS - DIRETIVAS V-ONCE e V-PRE - Ver Vídeo Aula

Diretivas
  • v-once ('!Somente'. O valor é chamado apenas uma vez, e não é permitido alterar)
  • v-pre ('!Antes'. Na primeira chamada, o valor das chaves que nesse exemplo não existe na instância Vue JS, é ignorado.)
Arquivos

013 - VueJS - Diferenca Entre V-SHOW e V-IF - Ver Vídeo Aula

Diretivas
  • v-show (apenas oculta o elemento através da inserção de style
  • v.if
Arquivos

014 - VueJS - INTRODUÇÃO AOS FILTERS - Ver Vídeo Aula

VUE JS Filters Arquivos

015 - VueJS - COMPUTED PROPERTIES - Ver Vídeo Aula

Computed Properties VUE JS - Só é executado com há alguma referência há algum valor dentro do computed
Arquivos

016 - VueJS - INTRODUÇÃO A CUSTOM COMPONENTS - Ver Vídeo Aula

VUE JS Custom Components - Reutilização de Componentes
Permite criar componentes. Novo componente é como se fosse novos elementos HTML
Arquivos

017 - VueJS - COMPONENTS DENTRO DE COMPONENTS - Ver Vídeo Aula

Custom Components VUE JS Arquivos

018 - VueJS - INTRODUÇÃO A PROPS - Ver Vídeo Aula

  • Diretiva utilizada em cunstom components VUE JS: propS
  • Props é um array que contém todas as propriedade de um components
Arquivos

019 - VueJS - CICLO DE VIDA DA INSTÂNCIA VUE - Ver Vídeo Aula

Arquivos

020 - VueJS - INSTALAÇÃO DA VUE - CLI - Ver Vídeo Aula

Página do VueJS CLI: https://cli.vuejs.org/guide/installation.html Instalar Node JS
  • 1 - Baixar e instalar Node JS
  • 2 - Verificar se o Node JS está instalado> CMD> npm -v
Instalar VueJS CLI
  • 1 - Instalar VueJS CLI CMD > npm install -g @vue/cli
  • 2 - Verificar se VueJS CLI foi instalada CMD> vue --version
vue : O arquivo C:\Users\fbmed\AppData\Roaming\npm\vue.ps1 não pode ser carregado porque a execução de scripts foi desabilitada neste sistema. Para obter mais informações, consulte about_Execution_Policies em
https://go.microsoft.com/fwlink/?LinkID=135170.
No linha:1 caractere:1
+ vue --version
+ ~~~
+ CategoryInfo : ErrodeSegurança: (:) [], PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess

Solução:
- Abra o Power Shell Windows e execute
1 - Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
Veja maiores informações em Execution Policies
  Iniciando um projeto VueJS CLI
  • 1 - Nesse exemplo estamos utilizando o Visual Studio Code
  • 2 - No terminal do Visual Studio Code, você pode verificar a versão do VueJS CLI: TERMINAL > vue --version
  • 3 - Instalação do projeto: TERMINAL > vue create app_vuejs_01
  • 4 - Executar o projeto criado > TERMINAL > cd app_vuejs_01; npm run serve
 
  021 - VueJS - INSTALAÇÃO DO CMDER - Ver Vídeo Aula 022 - VueJS - CRIAÇÃO DE UM PROJETO COM VUE - CLI - Ver Vídeo Aula 023 - VueJS - ANÁLISE E ALTERAÇÃO DE UM PROJETO VUE - CLI - Ver Vídeo Aula - 024 - VueJS - MAIS SOBRE COMPONENTES VUE E NPM - Ver Vídeo Aula - 025 - VueJS - CUSTOM COMPONENTES NA VUE-CLI - Ver Vídeo Aula - 026 - VueJS - É POSSÍVEL TER DUAS INSTÂNCIAS VUE? - Ver Vídeo Aula - 027 - VueJS - REGISTAR CUSTOM COMPONENTS GLOBALMENTE - Ver Vídeo Aula - 028 - VueJS - BOOTSTRAP E ACESSO A BASES DE DADOS - ESCLARECIMENTOS - Ver Vídeo Aula - 029 - VueJS - REGISTAR COMPONENTES LOCALMENTE - Ver Vídeo Aula - 030 - VueJS - EXERCÍCIO PRÁTICO COM COMPONENTES LOCAIS - Ver Vídeo Aula - 031 - VueJS - ASPETOS RELACIONADOS COM NOMES DE COMPONENTES - Ver Vídeo Aula - 032 - VueJS - STYLES E SCOPED - Ver Vídeo Aula - 033 - VueJS - COMUNICAÇÃO DE PARENT PARA CHILD COMPONENTS - Ver Vídeo Aula - 034 - VueJS - COMUNICAÇÃO DE PARENT PARA CHILD - EXERCÍCIO PRÁTICO 1 - Ver Vídeo Aula - 035 - VueJS - COMUNICAÇÃO DE PARENT PARA CHILD - EXERCÍCIO PRÁTICO 2 - Ver Vídeo Aula - 036 - VueJS - PROPS VALIDATION - Ver Vídeo Aula - 037 - VueJS - COMUNICAÇÃO DE CHILD COMPONENT PARA PARENT COMPONENT - Ver Vídeo Aula - 038 - VueJS - PONTO DE SITUAÇÃO - Ver Vídeo Aula - 039 VueJS - MULTIPLOS COMPONENTES DENTRO DO INDEX.HTML - Ver Vídeo Aula - 040 VueJS - COMUNICAÇÃO ENTRE COMPONENTES DENTRO DO INDEX.HTML - Ver Vídeo Aula - 041 VueJS - INTRODUÇÃO AO VUEX - Ver Vídeo Aula - 042 VueJS - MUTATIONS EM VUEX - Ver Vídeo Aula - 043 VueJS - MUTATIONS DE VUEX EM MULTIPLOS COMPONENTS - Ver Vídeo Aula - 044 - VueJS - VUEX GETTERS - Ver Vídeo Aula - 045 - VueJS - VUEX MUTATIONS COM PARÂMETROS - Ver Vídeo Aula - 046 - VueJS - VUEX ACTIONS - Ver Vídeo Aula - 047 - VueJS - VUEX NO CONTEXTO DA VUE-CLI - Ver Vídeo Aula

Fabio Bmed nas Redes Sociais - Venha fazer parte

Fabio Bmed no Youtube Fabio Bmed no TikTok Fabio Bmed no Facebook Fabio Bmed no Instagram Fabio Bmed na Twitch Fabio Bmed no Twitter