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

001 – VueJS – INTRODUÇÃOVer 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-ONVer 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 GLOBALMENTEVer 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 LOCAISVer 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 VALIDATIONVer 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 VUEXVer Vídeo Aula

043 VueJS – MUTATIONS DE VUEX EM MULTIPLOS COMPONENTS – Ver Vídeo Aula

044 – VueJS – VUEX GETTERSVer 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