# Bracket - O Editor escolhido
Segundo as palvras dos desenvoldores, Brackets (opens new window) é um editor de texto leve, mas poderoso e moderno. Nele estão combinadas ferramentas visuais no editor para que se obtenha a quantidade certa de ajuda quando quiser, sem atrapalhar seu processo criativo. A seguir, a descrição de algumas funcionalidades bastante uteis que estão disponíveis com o uso da extensão Emmet.
Inserir uma tag html é mais simples usando o preenchimento rápido.
- Exemplo com a tag de parágrafo "p":
- Exemplo com a tag de "div":
- Exemplo com a tag de "div" com um "id":
- Exemplo com a tag de "div" com uma classe:
- Exemplo combinando elementos da tag:
- Gerando um estrutura básica de página HTML
# As Anotações
MUITO IMPORTANTE.
Este conteúdo NÃO é apropriado para aprendizado do VUE nem de Javascript. São apenas anotações esparças, voltadas para consulta rápida, são como lembretes de utilização dos recursos, que não tem a pretensão estarem completas, nem de ser um tutorial.
Um dos melhores tutoriais que conheço está disponível no próprio site do projeto vuejs.org (opens new window). Lá, as informações estão documentadas extensivamente e com exemplos.
# O que temos aqui?
Nesta seção, estão as anotações feitas durante o ótimo curso Curso Vue JS 2 - O Guia Completo (incluindo Vue Router & Vuex), da Udemy (Link (opens new window)) ministrado competentemente pelo Arquiteto de Sistemas, Leonardo Moura Leitão (git (opens new window) e Linkedin (opens new window)).
# Interagindo com a DOM
# Um template básico para testar os exemplos
Para testar os exemplos e dicas, use o tmplate abaixo, adequando-o a sua necessidade.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>Título da Página</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app"> <!-- id="app" identifica aonde o script se usado-->
<p>{{ meu_ola_mundo }}</p>
<p>{{ meu_ola_js() }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
meu_ola_mundo: 'Olá Mundo!',
meu_vue: 'Conheça Vue e aproveite o melhor do JS!'
},
methods:{
meu_ola_js: function(){
return this.meu_vue
}
}
})
</script>
</body>
</html>
Onde:
- O script "vue.js" em src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js, é a biblioteca do Vue;
- id="app" - identifica a div que estará interagindo com as funções do VUE;
- new Vue() - instancia o Vue à partir desta função construtora;
- el: '#app' - identifica o elemento que será modificado;
- data - é o objeto que conterá os atributos que serão utilizados. No exemplo acima , meu_ola_mundo e meu_vue são atributos;
- methods - é o objeto que conterá as funções ou métodos necessárias para implementar as funcionalidades desejadas. No exemplo meu_ola_js é um método utilizados para modificar o template, que deverá ser chamado na forma meu_ola_js() e deverá retornar sempre um conteúdo que possa ser convertido em texto.
# Interpolando dados no HTML
O uso de {{}} permite atribuir variáveis de substiuição no código de forma bastante simples:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<p>{{ meu_texto }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
meu_texto: "Anotações de Vue / Javascript!"
}
})
</script>
Que produzirá uma página com um única linha contendo o texto Anotações de Vue / Javascript!
O uso de {{}} permite não somente colocar variáveis de substituição. Também é possível criar pequenas expressões sem a necessidade de funções:
// Irá multiplicar o valor de idade por 2
{{"idade*2"}}
E até mesmo expressões ternárias:
// Se nota for maior que 7 retornará 'Otimo Resultado',
// caso contrário 'Pode fazer melhor'
{{"nota > 7 ? 'Otimo Resultado' : 'Pode fazer melhor'"}}
O {{}} atende às necessidades de substiuições no conteúdo HTML. Mas para alterar propriedades e comportamentos dentro de alguns objetos é preciso utilizar diferentes recursos que são disponibilizados no VUE atravéas das diretivas.
# As Diretivas
# Diretivas para substituição de texto
- A diretiva "v-bind" que permite ligar um elemento de código (um atributo ou uma função) a uma propriedade de um componente do página.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<p>Alguma explicação sobre mapas mentais encontra-se neste
<a v-bind:href="link">Link</a></p>
</div>
<script>
new Vue({
el: '#app',
data: {
link: 'https://mahonorato.github.io/freeplane.html'
}
})
</script>
- A diretiva "v-once" é usada para fazer com que a atualização/renderização de um elemento aconteça somente uma vez.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<p>{{ texto }} (será atualizado ao recarregar [F5])</p>
<p v-once>{{ texto }} (não será atualizado)</p>
<p>{{ novotexto() }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
texto: "Evitando a Re-renderização"
},
methods:{
novotexto: function() {
this.texto = "Texto Inicial!!!"
return this.texto
}
}
})
</script>
Dica!
Para ver o comportamento, salve o código sem "v-once", carregue a página. Insira a diretiva e recarregue a página.
- A diretiva "v-html" é útil quando se faz necessário carregar um texto com marcação HTML, como por exemplo pegando um texto pronto de uma tabela num banco de dados. No entanto, deve-se ter um cuidado com a origem dos dados que serão passados, para evitar que a págin fique exposta à ataques.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<p v-html="agenda_html"></p>
</div>
<script>
new Vue({
el: '#app',
data: {
agenda_html: '<table><thead><tr><th>Horário</th><th>Atividade</th></tr></thead><tbody><tr><td>09:00-11:00</td><td>Preparação</td></tr><tr><td>11:00-12:00</td><td>Reunião</td></tr><tr><td>12:00-13:00</td><td>Intervalo</td></tr></tbody></table>'
}
})
</script>
# Monitorando Eventos com Diretivas
- Utilizamos a diretiva v-on para interceptar eventos, no exemplo abaixo o click, para chamar uma função a cada clique sobre o botão.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>Monitorando Eventos com v-on</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<p>{{ meu_contador }}</p>
<button v-on:click="adicao">Adicionar 1</button>
</div>
<script>
new Vue({
el: '#app',
data: {
meu_contador: '0',
},
methods:{
adicao() {
this.meu_contador++
}
}
})
</script>
</body>
</html>
- Obtendo os parametros retornados pelos eventos. Quando um evento do navegador é chamado, a variável event e retornada automaticamente. Com o retorno desta variável várias ações podem ser tomadas, visto que ela retorna diversas informações sobre o estado da navegação. Um exemplo de uso com os parametros clientX e clientY aplicados ao evento mousemove.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>Obtendo parametos dos eventos</title>
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p v-on:mousemove="atualizarxy">Mouse: {{ x }} {{ y }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
contador: '0',
x: 0,
y: 0
},
methods:{
atualizarxy(event){
this.x = event.clientX
this.y = event.clientY
}
}
})
</script>
</body>
</html>
Dica
A posição do mouse será capturada quando o cursor estiver sobre a linha do texto "Mouse:"
Mas se eu já estiver passando um parâmetro na função, como faço?
Resposta: Coloque um parametro adicional, chamado $event que o Vue entenderá!
Mas se eu não quiser que a linha toda seja afetada, como faço?
Resposta: Pode-se usar o Modificadores de Eventos, exemplificados a seguir.
# Modificadores de Eventos
Os modificadores de eventos são usados alterar o comportamento do Javascript usando funções prontas.
stop e prevents - Assim, no exemplo acima, para alterar o comportamento atribuído em v-on:mousemove, pode ser utilizado o v-on:mousemove.stop ou mesmo v-on:mousemove.stop.prevents para interromper a modificação dos valores das coordenadas exibidas na tela.
Eventos de teclado - Facilmente, podemos capturar o pressionamento das teclas usando v-on:keyup e suas variações como v-on:keyup.enter ou mesmo v-on:keyup.enter.alt, que exigirá o pressionamento das duas teclas.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>Eventos de Teclado</title>
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p><b>Capturando o teclado a cada pressionamento</b></p>
<input type="text" v-on:keyup="exibiralerta"></input>
<p><b>Capturando o teclado a cada ENTER</b></p>
<input type="text" v-on:keyup.enter="exibiralerta"></input>
</div>
<script>
new Vue({
el: '#app',
methods:{
exibiralerta(event) {
alert("Estou de Olho!!!")
}
}
})
</script>
</body>
</html>