Curso completo prático rápido de VUE JS Gratuíto
001 – VueJS – INTRODUÇÃO – Ver Vídeo Aula
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
Arquivos
016 – VueJS – INTRODUÇÃO A CUSTOM COMPONENTS – Ver Vídeo Aula
VUE JS Custom Components – Reutilização de Componentes
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
- 1 – Baixar e instalar Node JS
- 2 – Verificar se o Node JS está instalado> CMD> npm -v
- 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
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Olá! Sou Fabio, criador do blog FabioBmed, um espaço onde compartilho minha paixão por marketing digital, tecnologia, empreendedorismo e, claro, os aprendizados do meu dia a dia. Aqui você encontrará um mix de conteúdos profissionais e pessoais, sempre com insights práticos, dicas úteis e histórias reais.
Com mais de 15 anos de experiência no mercado digital e fundador da FBDigital, minha missão é inspirar e ajudar pessoas e empresas a construírem uma base sólida no universo online. Seja por meio de estratégias de marketing, ferramentas tecnológicas ou reflexões sobre o cotidiano, meu objetivo é transformar desafios em oportunidades.
Além dos conteúdos voltados para negócios e tecnologia, também compartilho momentos do meu dia a dia, ideias que aprendo pelo caminho e até curiosidades que podem fazer a diferença na sua vida. Aqui, cada post reflete minha busca por conhecimento e minha vontade de conectar pessoas e histórias.
Conecte-se comigo e acompanhe tudo sobre marketing, tendências digitais, aprendizados pessoais e muito mais. Juntos, vamos explorar o melhor do mundo digital e da vida cotidiana!
- Site: www.fabiobmed.com.br
- WhatsApp: WhatsApp
- E-mail:
Publicação Criada em: maio 10, 2020
Sem atualizações registradas.