TODO: Resumos de seções do curso
Bem vindo ao meu repositório de estudos sobre o framework Vue, o intuito desse repositório é totalmente voltado para estudos.
Nesse README está resumido os conceitos abordados e desenvolvidos do curso Vue - The Complete Guide
Além de indicações apontando a documentação como forma de praticar e absorver o conteúdo.
Projetos realizados durante o curso, cada projeto aborda conceitos que foram praticadas durante as seções
Introdução
É um framework Javascript progressivo, sendo escalavel como uma biblioteca em um projeto ou utilizado como um framework para o desenvolvimento de interfaces. Sendo necessário o conhecimento de HTML, CSS e Javascript, sendo a junção das melhores partes referente ao React e Angular!
Vue possibilita a integração em um projeto existente através da CDN ou através da utilização do terminal com Vue CLI e Vue UI.
<script src="https://unpkg.com/vue@next"></script>npm install vue@nextVue oferece seu CLI oficial,
npm install -g @vue/cliCom ele você tem a possibilidade de criar sua aplicação através de:
vue create project-name
# Interface gráfica para utilização
vue uiConceitos Fundamentais
Vue utiliza uma sintaxe onde vinculamos declarativamente o DOM no HTML, e toda sua manipulação e renderização é realizada através do Virtual DOM.
Existe as seguintes possibilidades
- Texto: É possível através de chaves duplas e o valor dinâmico em seu escopo
<!-- Variavel contendo algo dinâmico -->
<span>Mensagem: {{ msg }}</span>
<!-- Podemos utilizar expressões Javascript -->
<span>O que acha de Vue? {{ msg === 'Amo Vue' ? 'Vue <3' : 'Ainda vou amar' }} </span>
<span>Quanto é 1 + 10? {{ 1 + 10 }}</span>
<span>{{ msg.split(' ')[0] }}</span>Caso queira prevenir que o elemento mantenha sua informação, podemos utilizar a diretiva v-once
<span v-once>Este valor nunca será modificado: {{ msg }}</span>Quando queremos algo dinâmico presente em algum atributo no elemento utilizamos v-bind para essa possibilidade
<!-- Forma completa -->
<button v-bind:disabled="isButtonDisabled">Botão</button>
<!-- Forma abreviada -->
<button :disabled="isButtonDisabled">Botão</button>Se o valor atribuido for
nullouundefinedo atributo não será renderizado
Passar todas as props de um componente de uma vez O v-bind sem argumento possibilita passar todas as props de uma só vez para o componente
<blog-post v-bind="post"></blog-post> <!-- post: { id: 1, title: 'My Journey with Vue' } -->Para o clássico addEventListener do Javascript, Vue oferece observadores de evento com o uso da diretiva v-on, possibilitando a utilização de métodos para tais eventos.
``
Por trás das cenas
Refs em um elemento são utilizadas para referênciar o uso do elemento e sua manipulação dentro do ecosistema do Vue, o clássico document.querySelector(SELETOR)
<input type="text" @input="saveInput" ref="userText">// Através da chave global com $ podemos acessar refs que contém um array de objetos referênciados
console.log(this.$refs.userText);Imagem oficial da documentação
Assim como outros frameworks, Vue também possui seus ciclos de vidas (lifecycles). Em ordem subsequente são eles:
Não inicialize suas funções com arrow functions pois perde-se a referência de this!
- beforeCreate()
- created()
- beforeMount()
- mounted()
- beforeUpdate()
- updated()
- beforeUnmount()
- unmounted()
Componetização
O maior problema é que a tendência que a aplicação aumente, muitas coisas vão se repetir caso venha manter listas encapsulado em determinada lógica.
Componetizar é a solução, pois além de reaproveitamos lógica podemos encapsular com algo interno e ainda assim ter acesso a informações externas, como veremos a mais na seção.
São como atributos HTML, é a forma mais básica para passar dados de um componente pai para o filho
<!-- Passando dados do pai -->
<friend-contact
name="A very cool person"
phone-number="123 678 000"
email-address="cool@email.com"
/>
<!-- Passando valores em um v-for,
você precisa atribuir um v-bind para acesso aos valores
do indice atual do item percorrido -->
<friend-contact
v-for="friend in friends"
:key="friend.id"
:name="friend.name"
:phone-number="friend.phoneNumber"
:email-address="friend.email"
/>É possível passar todas as props de uma única vez
<!-- Na options API, você utiliza a chave props para receber-las no filho -->
<!-- Vue traduz automaticamente o hifen para camelCase -->
<script>
export default {
// Sem validação
// props: ["name", "emailAddress", "phoneNumber"],
// Podemos validar as props, caso serem erradas será lançado um alerta no console no navegador
props: {
name: String,
phoneNumber: String,
emailAddress: String,
isFavorite: {
type: Boolean,
default: false,
validator: function(value){
// Isso é só um exemplo, sabemos que Boolean é só um ou outro 😅
return value === true || value === false
}
}
}
data(){
// ...
}
}
</script>Os seguintes tipos são suportados:
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
- Qualquer função com
constructor
Você não pode mudar as props diretamente do filho através da atribuição com this
toggleFavorite(){
if(this.isFavorite === '1') this.isFavorite = '0'
else this.isFavorite = '1'
}Uma forma alternativa seria essa implementação
O problema que quando estamos alterando algo dentro do componente, a alteração não é realizada no componente pai. Para que o pai possa escutar eventos do filho, e que a mudança seja realizada em ambos, utilizamos o emit
A chave emits serve para documentar e mostrar quais eventos customizados estão sendo utilizados no componente