Nome do Usuário: {{ item.nome }}
138 |
6 |
7 |
8 |
4 |
5 |
6 |
7 |
8 |
3 | Tutorial De Vue para iniciantes em frameworks JavaScript.
6 | 7 | ## Necessário 8 | 9 | - Conhecimento sobre HTML, CSS 10 | - Conhecimento sobre JavaScript (principalmente sobre DOM) 11 | - Instalar [NodeJS](https://nodejs.org/en/) 12 | - Instalar [Yarn](https://yarnpkg.com/) 13 | 14 | ## ROADMAP 15 | 16 | O curso aborda conceitos tanto do Vue 2.x quanto do Vue 3.x 17 | 18 | ### Iniciando com Vue 19 | 20 | 0. [Antes de começar](/tutorial/1-Iniciando%20com%20Vue/0-Antes%20de%20começar.md) 21 | 1. [O que é Vue](/tutorial/1-Iniciando%20com%20Vue/1-O%20que%20e%20Vue.md) 22 | 2. [VueCLI](/tutorial/1-Iniciando%20com%20Vue/2-VueCLI.md) 23 | 3. [Estrutura do Projeto](/tutorial/1-Iniciando%20com%20Vue/3-Estrutura%20do%20Projeto.md) 24 | 4. [Fluxo e Props](/tutorial/1-Iniciando%20com%20Vue/4-Fluxo%20e%20Props.md) 25 | 5. [Componentização](/tutorial/1-Iniciando%20com%20Vue/5-Componentização.md) 26 | 27 | ### Conceitos 28 | 29 | 1. [Data-Methods-Modificadores](/tutorial/2-Conceitos/1-Data,%20Methods%20e%20Modificadores.md) 30 | 2. [Diretivas](/tutorial/2-Conceitos/2-Diretivas.md) 31 | 3. [Computed e Watch](/tutorial/2-Conceitos/3-Computed%20e%20Watch.md) 32 | 4. [CSS](/tutorial/2-Conceitos/4-CSS.md) 33 | 5. [Instância Vue](/tutorial/2-Conceitos/5-Instância%20Vue.md) 34 | 6. [LifeCycleHooks](/tutorial/2-Conceitos/6-LifeCycleHooks.md) 35 | 7. [BusEvent](/tutorial/2-Conceitos/7-BusEvent.md) 36 | 8. [Transições](/tutorial/2-Conceitos/8-Transições.md) 37 | 9. [Keep Alive](/tutorial/2-Conceitos/9-Keep%20Alive.md) 38 | 10. [Mixins](/tutorial/2-Conceitos/10-Mixins.md) 39 | 11. [Pre-Processadores](/tutorial/2-Conceitos/11-Pre-Processadores.md) 40 | 12. [Considerações](/tutorial/2-Conceitos/12-Considerações.md) 41 | 42 | ### Vuetify 43 | 44 | 1. [Iniciando com Vuetify](/tutorial/3-Vuetify/1-Iniciando%20com%20Vuetify.md) 45 | 2. [Criando Componentes](/tutorial/3-Vuetify/2-Criando%20Componentes.md) 46 | 3. [Customização](/tutorial/3-Vuetify/3-Customização.md) 47 | 4. [Considerações](/tutorial/3-Vuetify/4-Considerações.md) 48 | 49 | ### VueRouter 50 | 51 | 1. [Iniciando com Vue Router](/tutorial/4-Vue%20Router/1-Iniciando%20com%20Vue%20Router.md) 52 | 2. [Navegação](/tutorial/4-Vue%20Router/2-Navegação.md) 53 | 3. [Rotas Filhas](/tutorial/4-Vue%20Router/3-Rotas%20Filhas.md) 54 | 4. [Guardas de Rota](/tutorial/4-Vue%20Router/4-Guardas%20de%20Rota.md) 55 | 5. [Transições no VueRouter](/tutorial/4-Vue%20Router/5-Transições%20no%20VueRouter.md) 56 | 57 | ### Vuex 58 | 59 | 1. [Gerenciamento de Estado](/tutorial/5-Vuex/1-Gerenciamento%20de%20Estado.md) 60 | 2. [Iniciando com Vuex](/tutorial/5-Vuex/2-Iniciando%20com%20Vuex.md) 61 | 3. [State](/tutorial/5-Vuex/3-State.md) 62 | 4. [Actions](/tutorial/5-Vuex/4-Actions.md) 63 | 5. [Mutations](/tutorial/5-Vuex/5-Mutations.md) 64 | 6. [Getters](/tutorial/5-Vuex/6-Getters.md) 65 | 7. [Estrutura](/tutorial/5-Vuex/7-Estrutura.md) 66 | 8. [Modules](/tutorial/5-Vuex/8-Modules.md) 67 | 68 | ### Bibliotecas Adicionais 69 | 70 | 1. [Vuelidate](/tutorial/6-Bibliotecas%20Adicionais/1-Vuelidate.md) 71 | 2. [Vuei18n](/tutorial/6-Bibliotecas%20Adicionais/2-Vuei18n.md) 72 | 3. [VueAWN](/tutorial/6-Bibliotecas%20Adicionais/3-VueAWN.md) 73 | 4. [VueDarkMode](/tutorial/6-Bibliotecas%20Adicionais/4-VueDarkMode.md) 74 | 5. [VueResource](/tutorial/6-Bibliotecas%20Adicionais/5-VueResource.md) 75 | 6. [VuePropertyDecorator](/tutorial/6-Bibliotecas%20Adicionais/6-VuePropertyDecorator.md) 76 | 7. [VueFontAwesome](/tutorial/6-Bibliotecas%20Adicionais/7-VueFontAwesome.md) 77 | 8. [VuexClassModules](/tutorial/6-Bibliotecas%20Adicionais/8-VuexClassModules.md) 78 | 9. [AntDesignVue](/tutorial/6-Bibliotecas%20Adicionais/9-AntDesignVue.md) 79 | 80 | ### Testes e Storybook 81 | 82 | 1. [Jest no Vue](/tutorial/7-Testes%20e%20Storybook/1-Jest%20no%20Vue.md) 83 | 2. [Cypress no Vue](/tutorial/7-Testes%20e%20Storybook/2-Cypress%20no%20Vue.md) 84 | 3. [Storybook](/tutorial/7-Testes%20e%20Storybook/3-Storybook.md) 85 | 4. [Vitest](/tutorial/7-Testes%20e%20Storybook/4-Vitest.md) 86 | 87 | ### Ecossistema Vue 88 | 89 | 1. [Nuxt](/tutorial/8%20-%20Ecossistema%20Vue/1%20-%20Nuxt.md) 90 | 2. [Gridsome](/tutorial/8%20-%20Ecossistema%20Vue/2%20-%20Gridsome.md) 91 | 3. [VueNative](/tutorial/8%20-%20Ecossistema%20Vue/3%20-%20VueNative.md) 92 | 4. [VueElectron](/tutorial/8%20-%20Ecossistema%20Vue/4%20-%20VueElectron.md) 93 | 5. [Quasar](/tutorial/8%20-%20Ecossistema%20Vue/5%20-%20Quasar.md) 94 | 6. [Vuepress](/tutorial/8%20-%20Ecossistema%20Vue/6%20-%20Vuepress.md) 95 | 7. [Obrigado](/tutorial/8%20-%20Ecossistema%20Vue/7%20-%20Obrigado.md) 96 | 97 | ### Vue 3 98 | 99 | 1. [API de Composição](/tutorial/9%20-%20Next/1%20-%20API.md) 100 | 2. [Ecossistema](/tutorial/9%20-%20Next/2%20-%20Ecossistema.md) 101 | 3. [Hooks](/tutorial/9%20-%20Next/3%20-%20Hooks.md) 102 | 4. [Suspense](/tutorial/9%20-%20Next/4%20-%20Suspense.md) 103 | 5. [JSX](/tutorial/9%20-%20Next/5%20-%20JSX.md) 104 | 6. [TypeScript](/tutorial/9%20-%20Next/6%20-%20Typescript.md) 105 | 7. [Vite](/tutorial/9%20-%20Next/7%20-%20Vite.md) 106 | 8. [Pinia](/tutorial/9%20-%20Next/8%20-%20Pinia.md) 107 | 9. [Vuetelemetry](/tutorial/9%20-%20Next/9%20-%20Vuetelemetry.md) 108 | 10. [IonicVue](/tutorial/9%20-%20Next/10%20-%20IonicVue.md) 109 | 11. [Obrigado](/tutorial/9%20-%20Next/11%20-%20Obrigado.md) 110 | 111 | ## Repositório 112 | 113 | [Github](https://github.com/Novout/vue4noobs) 114 | 115 | ## Autores 116 | 117 | * **Giovane Cardoso (Novout)** - *Freelance Frontend Developer & Member of He4rt Developers* - [Twitter](https://twitter.com/NovoutT) 118 | * **Lucas Souza (deverebor)** - *Frontend Software Engineer at Juntos Somos Mais & Member of He4rt Developers* - [Twitter](https://twitter.com/deverebor) 119 | 120 |Made with 💜
121 | -------------------------------------------------------------------------------- /docs/tutorial/1-Iniciando com Vue/0-Antes de começar.md: -------------------------------------------------------------------------------- 1 | ## Antes de começar 2 | 3 | Bem-Vindo ao curso!Nosso objetivo é te oferecer todo o conteúdo introdutório para Vue em todos os aspectos possíveis. 4 | 5 | Para o curso, é necessario um bom conhecimento de HTML/CSS e especialmente JavaScript, devido ao fato do curso ser focado apenas na framework, e não na linguagem. 6 | 7 | Temas que serão abordados: 8 | 9 | - Vue 10 | - Vuetify 11 | - Vue Router 12 | - Vuex 13 | - Bibliotecas 14 | - Testes 15 | - Ecossistema 16 | 17 | Não se assuste, **depois de Vuex** não iremos aprofundar muito sobre as tecnologias, o intuito é você saber que aquilo existe no ecossistema Vue, dando uma noção geral para você conseguir se aprofundar no Vue :) 18 | 19 | ## Vue 3 20 | 21 | O curso foi feito para a versão 2.x, mas não se preocupe! o Vue 3 apenas acrescenta novos conteúdos, toda a base do vue continua sendo a mesma! 22 | 23 | [Ir para Próxima Seção](./1-O%20que%20e%20Vue.md) 24 | -------------------------------------------------------------------------------- /docs/tutorial/1-Iniciando com Vue/1-O que e Vue.md: -------------------------------------------------------------------------------- 1 | # Vue 2 | 3 | Sejam bem vindos ao paper de Vue da [He4rt Developers](discord.io/He4rt), aqui nós iremos dar uma introdução ao framework **Vue**, mostrando todo o seu conceito e mostrando como utilizar de maneira efetiva. 4 | 5 | O **Vue**(se pronuncia **view**) é um framework para a construção de sites de forma progressiva, sendo diferente de outros tipo de estrutura monolítica. O ecossistema do **Vue** é extenso possibilitando ao desenvolvedor construir aplicações Frontend Web. 6 | 7 | ## Comunidade 8 | 9 | A comunidade do **Vue** vem crescendo cada vez mais, iremos estar disponibilizando alguns links da comunidade para auxiliar seu estudo sobre a framework. 10 | 11 | [Fórum](https://forum.vuejs.org) 12 | 13 | [VueJSBrasil](http://vuejs-brasil.com.br/) 14 | 15 | [VueSchool](https://vueschool.io/) 16 | 17 | [VueMastery](https://www.vuemastery.com) 18 | 19 | [MadeWithVue](https://madewithvuejs.com) 20 | 21 | [LearnVue](https://twitter.com/LearnVuejs2) 22 | 23 | ## SPA(Single Page Aplication) 24 | 25 | Significa que no **Vue** teremos uma aplicação web completa acontecendo em uma única página sem a necessidade de recarregar a página. O **Vue** também possui **SSR(Server Side Render)** com o **Nuxt** e aplicações **PWA** com o **Quasar**, mas neste início vamos focar apenas no **SPA** e apresentar alternativas futuramente. 26 | 27 | Utilizando este conceito conseguimos construir aplicações frontend de forma robusta e escalável. 28 | 29 | ## Virtual DOM 30 | 31 | Virtual DOM é um framework para manipulação do DOM(Document Object Model) que é utilizado pelo **Vue**, ele faz uma representação do DOM real na linguagem JavaScript, ou seja, o DOM verdadeiro é gerado a partir do DOM Virtual.Por conta disso, o **Vue** utiliza o **vue-loader** para fazer todo o ciclo do Virtual DOM e conseguir transformar no DOM final. 32 | 33 | ## VueLoader 34 | 35 | O **vue-loader** irá analisar o arquivo, pegar cada bloco de linguagem e montá-lo de volta em um módulo CommonJs cujo module.exports seja um objeto de opções do componente **Vue.js**. 36 | 37 | Para manipular, o **Vue** utiliza um sistema de componentes com a extensão **.vue**. O arquivo é um formato de arquivo personalizado que usa a sintaxe parecido com o HTML para descrever um componente Vue. Cada arquivo é dividido em três partes: `, 49 | 50 | 55 | ``` 56 | 57 | [Próxima Seção](./2-VueCLI.md) 58 | -------------------------------------------------------------------------------- /docs/tutorial/1-Iniciando com Vue/2-VueCLI.md: -------------------------------------------------------------------------------- 1 | # Vue CLI 2 | 3 | Neste tutorial iremos utilizar **vue-cli** para a criação do nosso projeto, pois ele irá facilitar a instalação de plugins além de ter uma interface agradável. 4 | 5 | Primeiramente, abre o terminal para instalar o **vue-cli** 6 | 7 | ```sh 8 | yarn global add @vue/cli 9 | # ou por npm 10 | npm install -g @vue/cli 11 | ``` 12 | 13 | Agora para verificar se o cli foi instalado: 14 | 15 | ```sh 16 | vue --version 17 | ``` 18 | 19 | Podemos criar o nosso projeto de duas formas: 20 | 21 | ```sh 22 | vue create
37 | 
51 | 
56 | Hello
46 |He4rt
47 |Hello
56 |He4rt
57 | 58 | ``` 59 | 60 | O **HelloWorld** é um componente que está sendo importado por outro componente **App.vue**, para isso, precisamos registrar o componente: 61 | 62 | ```html 63 | 72 | ``` 73 | 74 | ## Convensões de Importanção 75 | 76 | * Curiosidade: O **Vue** reconhece tanto **PascalCase** quanto **kebab-case** e vice-versa, exemplo: 77 | 78 | ```html 79 | 80 |
115 | For a guide and recipes on how to configure / customize this project,
116 | check out the
117 | vue-cli documentation.
118 |
15 | {{ concluido ? 'SIM' : 'NÃO' }}
69 | ``` 70 | 71 | * No caso **concluido** pertence ao **data()**. 72 | * Atribuições e controle de fluxo **NÃO** funcionam. 73 | 74 | --- 75 | 76 | Podemos também preencher o que temos no **data** com dados **assíncronos** usando [LifeCycleHooks](https://br.vuejs.org/v2/guide/instance.html#Diagrama-do-Ciclo-de-Vida), mas iremos abordar esse tema mais para a frente pois precisamos ver alguns outros conceitos do **Vue** primeiramente. 77 | 78 | ## Methods 79 | 80 | Métodos que vão juntar na instância do Vue. Você pode acessar esses métodos diretamente na instância do vue ou usá-los em expressões de diretiva. Todos os métodos terão esse contexto automaticamente vinculado à instância do Vue. O funcionamento de um **método** é basicamente ao de uma **função**, diferenciando de uma **computed** que será explicado na próxima seção. 81 | 82 | Agora, vamos fazer um **contador** mutando a nossa variavel declarada na instância, usando **methods**: 83 | 84 | ```js 85 | 86 |Você clicou no botão {{ contador }} vezes
89 |O valor de contador é: {{ contador }}
116 |1
15 |2
16 |3
17 |1
37 |2
38 |3
39 |1
61 |2
62 |3
63 |1
87 |2
88 |3
89 |Carlos
109 |João
110 |José
111 |Nome do Usuário: {{ item.nome }}
138 |
161 | Nome do Usuário: {{ item.nome }}
174 |Par
186 |Ímpar
187 |{{ input }}
203 |Mensagem inicial: "{{ hello }}"
19 |Mensagem computada: "{{ helloInvertido }}"
20 |Computed reversed message: "{{ helloInvertido() }}"
54 | 55 | 56 | 57 | 71 | ``` 72 | 73 | Também podemos usar **methods** dentro de **computeds** normalmente: 74 | 75 | ```html 76 | 77 |He4rt Developers
22 |He4rt Developers
53 |{{ titulo }}
', 13 | }) 14 | ``` 15 | 16 | * O template anexa uma string ao template do componente, **NÃO** recomendamos utilizar na maioria das situações devido a **mutações** de estado. 17 | 18 | * Dessa forma, podemos acessar este componente de qualquer aqui **.vue** de nossa aplicação. 19 | 20 | ## Vue.use 21 | 22 | Para a utilização de plugins, utilizamos o **.use** antes ta **instanciação** do **Vue**. Vamos usar o exemplo de instalação do plugin [Vuelidate](https://vuelidate.js.org). 23 | 24 | ```js 25 | import Vue from 'vue'; 26 | import Vuelidate from 'vuelidate'; 27 | Vue.use(Vuelidate); 28 | 29 | //... 30 | 31 | new Vue({ 32 | ... 33 | }); 34 | ``` 35 | 36 | ## Vue.prototype 37 | 38 | Com o **Vue** podemos criar variaveis globais para a manipulação de forma facilitada, com a convensão **$**. 39 | 40 | ```js 41 | import Vue from 'vue'; 42 | import axios from 'axios'; 43 | 44 | Vue.http = Vue.prototype.$http = axios; 45 | 46 | //... 47 | 48 | new Vue({ 49 | ... 50 | }); 51 | ``` 52 | 53 | * Dessa forma conseguimos utilizar **bibliotecas** de forma **padronizada**. 54 | 55 | ## Vue.config 56 | 57 | Para conseguirmos alterar configurações padrões no **Vue**, utilizamos o **.config** para conseguir acessar estas configurações 58 | 59 | ```js 60 | Vue.config.productionTip = false; 61 | 62 | //... 63 | 64 | new Vue({ 65 | ... 66 | }); 67 | ``` 68 | 69 | Na próxima seção iremos explicar o funcionamento dos **LifeCycleHooks**, te vemos lá! 70 | 71 | [Próxima Seção](./6-LifeCycleHooks.md) 72 | -------------------------------------------------------------------------------- /docs/tutorial/2-Conceitos/6-LifeCycleHooks.md: -------------------------------------------------------------------------------- 1 | # LifeCycleHooks 2 | 3 | Os **LifeCycleHooks** são uma parte importante para todos os componentes do **Vue**. Você geralmente precisa saber quando seu componente é criado, adicionado ao DOM, atualizado ou destruído. Os ganchos do ciclo de vida são uma janela de como a biblioteca que você está usando funciona nos bastidores e, como tal, tendem a invocar sentimentos de ansiedade ou inquietação para os recém-chegados. 4 | 5 |
7 | 
21 | Oiiiiiiiiiiiiiiiiiiiii
35 |Oiiiiiiiiiiiiiiiiiiiii
77 |
17 | 
25 | 
37 | 
43 | 
49 | 
57 | 
63 | 
67 | 
75 | Hello He4rt
32 |
53 | 
185 | Vue4Noobs
204 | Pela: He4rt Developers 205 |
251 | 
103 | Olá de /login
32 | 33 | 34 | 37 | ``` 38 | 39 | Agora vamos acessar o `localhost:
43 | 
234 | 
11 | Digite a senha!
211 | 212 | ``` 213 | 214 | Recomendamos FORTEMENTE que olhe a documentação do [Vuelidate](https://vuelidate.js.org/#sub-form-submission). 215 | 216 | Na próxima seção iremos apresentar a forma de fazer **internacionalização** no **Vue**! 217 | 218 | [Próxima Seção](./2-Vuei18n.md) 219 | -------------------------------------------------------------------------------- /docs/tutorial/6-Bibliotecas Adicionais/2-Vuei18n.md: -------------------------------------------------------------------------------- 1 | # Vue i18n 2 | 3 | O [Vuei18n](https://kazupon.github.io/vue-i18n/) é um plugin para internacionalização que o **Vue** nos disponibiliza. 4 | 5 | ## Estrutura 6 | 7 | Todas as mensagens irão ficar em arquivos como **objetos literais** 8 | 9 | ```js 10 | const messages = { 11 | en: { 12 | message: { 13 | hello: 'Hello' 14 | } 15 | }, 16 | pt_BR: { 17 | message: { 18 | hello: 'Olá!' 19 | } 20 | } 21 | } 22 | ``` 23 | 24 | E exibir no template como: 25 | 26 | ```js 27 |{{ $t('message.hello') }}
28 | ``` 29 | 30 | Dessa forma, tudo oque for estático em nossa aplicação irá ser exibido a partir de um objeto, então: 31 | 32 | * É recomendável começar o projeto JÁ utilizando o i18n, pois para reestruturar tudo pode ser uma dor de cabeça 33 | 34 | * Mensagens em certas linguagens podem ficar muito grande ou muito pequeno do que o originalmente esperado. 35 | 36 | * Apenas utilize i18n se o seu projeto seja **REALMENTE** internacional, pois pode perder muito tempo no projeto sem necessidade. 37 | 38 | * NÃO iremos mostrar a aplicação do i18n no nosso projeto atual pois iria precisar refazer algumas coisas, o que quebraria a ideia do curso, mas fique á vontade para utilizá-lo! 39 | 40 | Na próxima seção iremos aplicar notificações com AWN, nos vemos lá! 41 | 42 | [Próxima Seção](./3-VueAWN.md) -------------------------------------------------------------------------------- /docs/tutorial/6-Bibliotecas Adicionais/3-VueAWN.md: -------------------------------------------------------------------------------- 1 | # Vue Awesome Notifications 2 | 3 | O [Vue Awesome Notifications](https://f3oall.github.io/awesome-notifications/docs/toasts/general) permite criar notificações interativas para o usuário. 4 | 5 | ## Instalação no Projeto 6 | 7 | Comando: `yarn add vue-awesome-notifications` 8 | 9 | `./src/main.js` 10 | 11 | ```js 12 | import Vue from 'vue'; 13 | import VueAWN from 'vue-awesome-notifications'; 14 | 15 | Vue.use(VueAWN, {}); 16 | // ... 17 | ``` 18 | 19 | Vamos adicionar o css global: 20 | 21 | `./src/App.vue` 22 | 23 | ```js 24 | 34 | ``` 35 | 36 | Vamos utilizar o AWS para mostrar a verificação de nosso formulário: 37 | 38 | `./src/pages/Register.vue` 39 | 40 | ```js 41 | // ... 42 | methods: { 43 | enviarFormulario() { 44 | if (!this.$v.$invalid) { 45 | // POST para a rota em uma possível API 46 | localStorage.setItem('AUTENTICADO', true); 47 | this.$store.dispatch('usuarioLogado', { 48 | conta: this.conta, 49 | senha: this.senha, 50 | }); 51 | this.$router.push('/dashboard'); 52 | } else { 53 | this.$awn.alert('Formulário Inválido'); 54 | } 55 | }, 56 | }, 57 | // ... 58 | ``` 59 | 60 | * Usando o **$awn** conseguimos emitir os eventos customizáveis. 61 | 62 | Recomendamos MUITO que acesse a documentação do [AWN](https://f3oall.github.io/awesome-notifications/docs/toasts/general). 63 | 64 | Na próxima seção, iremos mostrar como utilizar **Dark Theme** de forma facilitada no **Vue**, nos vemos lá! 65 | 66 | * Agora iremos apenas mostrar outras bibliotecas que podem ajudar o desenvolvimento de aplicações, vamos voltar a mecher no projeto apenas na seção de **Testes e Documentação** 67 | 68 | [Próxima Seção](./4-VueDarkMode.md) -------------------------------------------------------------------------------- /docs/tutorial/6-Bibliotecas Adicionais/4-VueDarkMode.md: -------------------------------------------------------------------------------- 1 | # Vue Dark Mode 2 | 3 | O VueDarkMode é um conjunto de componentes projetados para facilitar a projeção de transiçõe sentre white mode e dark mode. 4 | 5 | ## Como instalar 6 | 7 | `yarn add @growthbunker/vuedarkmode` 8 | 9 | `./src/main.js` 10 | 11 | ```js 12 | import Vue from "vue"; 13 | import VueDarkMode from "@growthbunker/vuedarkmode"; 14 | 15 | Vue.use(VueDarkMode); 16 | ``` 17 | 18 | O **VueDarkMode** possui: 19 | 20 | - Alerts 21 | - Avatars 22 | - Badges 23 | - Buttons 24 | - Dividers 25 | - Headings 26 | - Icons 27 | - Progress Bar 28 | - Spinners 29 | - Toasts 30 | - Checkboxes 31 | - Images 32 | - Inputs 33 | - Numerics 34 | - Radios 35 | - Selects 36 | - Tabs 37 | - Textareas 38 | - Toggles 39 | 40 | Usando os **componentes*, basta passar as **propriedades** que estão na **documentação** de cada **componente**. 41 | 42 | Na próxima seção, iremos mostrar como utilizar o **VueResource**, te vemos lá! 43 | 44 | [Próxima Seção](./5-VueResource.md) -------------------------------------------------------------------------------- /docs/tutorial/6-Bibliotecas Adicionais/5-VueResource.md: -------------------------------------------------------------------------------- 1 | # Vue Resource 2 | 3 | O **VueResource** é um http client para o **Vue**. Em uma das seções já mostramos em como configurar o **http** para utilizar junto com o **axios**, mas podemos usar o próprio **VueResource** 4 | 5 | Instalação: `yarn add vue-resource` 6 | 7 | ## Configuração 8 | 9 | ```js 10 | new Vue({ 11 | http: { 12 | root: '/root', 13 | headers: { 14 | Authorization: 'Bearer'. 15 | }. 16 | }. 17 | }); 18 | ``` 19 | 20 | ## Exemplo 21 | 22 | ```js 23 | this.$http.get('/url') 24 | .then(res => { 25 | 26 | console.log(res.body()); 27 | }, res => { 28 | console.error(err); 29 | } 30 | ``` 31 | 32 | Para mais detalhes sobre o **VueLoader** clique [aqui](https://github.com/pagekit/vue-resource) 33 | 34 | Na próxima seção, iremos mostrar como utilizar o **TypeScript** no **Vue** com o auxílio do **PropertyDecorator**, nos vemos lá! 35 | 36 | [Próxima Seção](./6-VuePropertyDecorator.md) -------------------------------------------------------------------------------- /docs/tutorial/6-Bibliotecas Adicionais/6-VuePropertyDecorator.md: -------------------------------------------------------------------------------- 1 | # Vue Property Decorator 2 | 3 | No **Vue-CLI** é posível escolher a opção de usar o **Vue** com **Typescript**, e o [Property Decorator](https://github.com/kaorun343/vue-property-decorator) melhora esta experiência. 4 | 5 | Exemplo: 6 | 7 | ```js 8 | import { Vue, Component, Emit } from 'vue-property-decorator'; 9 | 10 | @Component 11 | export default class He4rtComponent extends Vue { 12 | he4rt = 'He4rt'; 13 | 14 | @Emit() 15 | Dev() { 16 | this.he4rt += ' Developers'; 17 | } 18 | }; 19 | ``` 20 | 21 | Saiba mais sobre o **Vue** com **Typescript** clicando [aqui](https://br.vuejs.org/v2/guide/typescript.html). 22 | 23 | Na próxima seção, iremos mostrar como utilizar o **awesome icons** no **Vue**, nos vemos lá! 24 | 25 | [Próxima Seção](./7-VueFontAwesome.md) -------------------------------------------------------------------------------- /docs/tutorial/6-Bibliotecas Adicionais/7-VueFontAwesome.md: -------------------------------------------------------------------------------- 1 | # Vue Awesome Icons 2 | 3 | O [Vue FontAwesome](https://github.com/FortAwesome/vue-fontawesome) é o port do conhecido [FontAwesome](https://fontawesome.com/icons?d=gallery), assim conseguimos utilizar as fontes no **Vue**: 4 | 5 | ```js 6 | yarn add @fortawesome/fontawesome-svg-core 7 | yarn add @fortawesome/free-solid-svg-icons 8 | yarn add @fortawesome/vue-fontawesome 9 | ``` 10 | 11 | O exemplo recomendado: 12 | 13 | ```js 14 | import Vue from 'vue'; 15 | import { library } from '@fortawesome/fontawesome-svg-core'; 16 | import { faUserSecret } from '@fortawesome/free-solid-svg-icons'; 17 | import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; 18 | 19 | library.add(faUserSecret); 20 | 21 | Vue.component('font-awesome-icon', FontAwesomeIcon); 22 | ``` 23 | 24 | * Registrando o componente **font-awesome-icon** podemos usá-lo em nosso template: 25 | 26 | ```html 27 |
82 | 
86 | 
17 |