Please enable JavaScript.
Coggle requires JavaScript to display documents.
Vue JS 2 - youtube.com/watch?v=5LYrN_cAJoA&list=PL4cUxeGkcC9gQcYgjhBoe…
Vue JS 2 - youtube.com/watch?v=5LYrN_cAJoA&list=PL4cUxeGkcC9gQcYgjhBoeQH7wiAyZNrYa
Introdução
Oque é:
Framework front-end
Criar aplicações web através de javascript
Roda no navegador
Não precisa fazer múltiplas requests para o server
Por que:
Muito leve
Boa performasse
Como instalar VueJS:
Via cdn
Via vue cli e webpack
Vue Instance
new Vue({}); -> As configurações vem dentro da {} para controlar a aplicação.
el: "" -> Que elementos na aplicação vai controlar no html directiva. Por exemplo através do id.
data: {} -> Armazena a data em formato de objeto dentro como chave e valor.
{{ dataName }} -> Faz o outputting dentro do html da data feita na instancia.
Data & Methods
methods: {} -> Armazena as funções da instancia.
{{ methodName() }} -> Faz o outputting dentro do html da função feita na instancia
this.data.name ou this.name -> Acessar os valores guardados no data.
Data Binding
v-bind:href=" dataLink " -> Directiva para um link.
v-bind:parametro=" dataName " -> Carrega nos parametros de html algo da Data.
v-html -> Escrever dentro das tags html.
Events
v-on:evento=" dataName " -> Essa diretiva interage com eventos no html. Também pode ser usado dentro dos "" lógicas com data ou methods.
evento
-> Assim também tem a mesma funcionalidade.
Event Modifiers
v-on:evento.modifier=" dataName " -> Aqui entra uma lógico relacionada ao evento.
Keyboard Events
v-on:keyup=" dataName "
v-on:keyup.teclas=" dataName "
Two-Way Data Binding
v-model="" -> Dentro de "" entra qualquer data ou method.
Computed Properties
computed: {} -> Para valores que devem ficar salvos, funciona parecido com os methods, mas só usa a função que está sendo chamada.
{{ computedName }} -> Iqual a função mas não precisa receber um parametro.
Dynamic CSS Classes
v-blind:class="className1: true, className2: false" -> Assim a primeira classe é verdadeira e a segunda não.
v-blind:class="className: dataName" -> Assim é possível mudar dinamicamente o valor booleano.
Conditionals
v-on:click="click = "click" -> Um toggle com evento de clicar.
v-if="error" -> Se o valor for verdadeiro mostra.
v-else-if="sucess" -> Se o verdadeiro for false.
Looping with v-for
Looping com arrays e objects.
v-for="dataName in dataNames" -> Dentro do elemento html para percorrer arrays ou objetos.
{{ dataName }} -> Dentro da chaves array no html.
{{ dataName.valor }} -> Dentro dos objetos no html.
v-for="(dataName, index) in dataNames" -> Dentro do elemento html para percorrer arrays ou objetos e seu index.
{{ index }} -> Dentro do index no html.
v-for="(val, key) in dataName" -> Mostra a chave e valor mesmo não sabendo dos nomes.
Multiple Vue Instances
Criando instancias diferentes com nomes de instancia e elementos diferentes.
Para referenciar a data de outra instancia basta colocar o nomeDaInstancia.dataName
Intro to Components
Vue.component("nameComponent", {
template: "<html elementos>",
data: function(){
return {}
},
methods: {
}
});
Pode se criar uma var data externa também para passar pela data.
Refs
ref="refName" e this.$refs.value -> Referência valores nos elementos html.
The Vue CLI
Um ambiente pronto para desenvolvimento:
Funcionalidades ES6
JS compilação e minificação em 1 arquivo
Usa arquivo de templates único
Compila tudo na maquina e não no navegador
Servidor de desenvolvimento real-time
Vue Files & The Root Component
main.js -> Controla toda a aplicação
App.vue -> Cria os componentes
Nesting Components
Funciona como uma arvore genealógica onde o root component se encontra no topo.
Componentes podem ser definidos global e usar em qualquer outro aninhado em qualquer outro componente ou local e usar apenas aninhado no componente que foi definido.
Componentes são importados
Component CSS (scoped)
<style scoped></style> - O css pertence ao scopo em questão
Props
Maneira de transportar data de um parent component para um child component, usado para passar e receber data
Receber - props: ['propsName']
Passar - v-bind:propsName="propsName" ou methods:
Primitive vs Reference Types
Primitives - String, number e booleans
Reference - Objects e arrays
Passar data de um componente para outro através de props através de referencias
Life-cycle Hooks
Lifecycle Diagram - vuejs.org/v2/guide/instance.html
Slots
Passar html usando slots tags, posso dividir passando um parâmetro name
Dynamic Components
Manipular como os componentes estão sendo renderizados no navegador
<component v-bind:is="component-name"></component>
Input Binding
<input type="text" v-model="title" required/> e definir na data
Checkbox Binding
Escrever o mesmo v-model em cada input