- Instancia um componente vue
new Vue ({
})
- Propriedade el diz onde é o container que a sua aplicação está inserida, parecido com "querySelector"
el: '#pp'
- Template que será ultilizado
template: `seu HTML`
ex :
new Vue ({
el: '#app',
template: `<html>Seu HTML</html>`
})
- A função data() vai retornar um objeto disponível dentro do template
Escrita convencional
data: function () {
return {
comments: [
{
name: 'Caio',
message: 'Lorem Ipsum'
}
]
}
}
- Escrita reduzida
data () {
return {
comments: [
{
name: 'Caio',
message: 'Lorem Ipsum'
}
]
}
}
- Diretiva para iterar sobre o objeto
v-for="comment in comments"
- Passar variáveis como parâmetro
{{ variável }
- Sintáxe do template para se comunicar com a camada de dados
interpolação: {{ variavel }}
diretivas: <a v-bind:href="url">...</a>
-
VueJs é reativo, por tanto é capaz de alterar toda a camada da aplicação através de um evento disparado
-
Diretiva evento click
v-on:click="addComment"
- Crio todos os métodos disponibilizado no template através das diretivas
methods: {
addComment() {
console.log("Cliquei!")
}
}
- VUE utiliza-se de Two way data binding podemos alterar de 2 formas 2 caminhos.
-
- pode alterar um valor através do input do usuário, altera um dado no model e ele reflete automaticamente pra você.
-
- Se alterar a camada do módel ele também reflete pra você, "um caminho de mão dupla" portanto, se conecta automaticamente com o módel!
- Passo objetos dentro do return para iteragir com o campo
return {
comments: [
{
name: 'Caio',
message: 'Lorem Ipsum
}
],
name: '',
message: '',
}
diretivas: v-model="name" && v-model="message"
herança através do this: console.log(this.name)
methods: {
addComment() {
this.comments.push({
name: this.name,
message: this.message
})
}
}
- this.name && this.message refletem no módel, sendo possível assim fazer atualizações na interface.
methods: {
addComment() {
this.comments.push({
name: this.name,
message: this.message
})
this.name = '';
this.message = '';
}
}
-
Com parenteses é possível adicionar um index v-for="(comment, index)
-
Método de remover um item list
methods: {
addComment() {
if (this.name.trim() === '' || this.message.trim() === '') {
return
}
this.comments.push({
name: this.name,
message: this.message
})
this.name = ''
this.message = ''
},
removeComments (index) {
this.comments.splice(index, 1)
}
}
-
Remoção do prevent default v-on:click.prevent
-
Disponibiliza variáveis e valores para serem renderizados no template, assim como a propriedade data porém, o data está muito mais relacionado com a camada de models e o computed está mais relacionado com a interface.
computed: {
}
- Consegue monitorar alteração em qualquer propriedade.
watch: {
}
- É possível criar arquivos do tipo VUE
npm install -g @vue/cli
- Entre dentro da pasta do projeto e execute o comando
vue ui
-> clique em criar novo projeto -> npm -> próximo -> pre devinição padrão -> criar projeto
-
acesse a pasta vuejs-cli pelo terminal e execute o comando npm run server
-
Emite um evento para ser escutado por outros componentes
this.$emit('add-todo',{
name: this.name,
message: this.message
})
- Intercepta o evento disparado para o componente desejado
v-on:add-todo="suaFunçao"
- Identificador único, tem que ser colocado sempre que houver listas
v-bind:key=index