Tutorial VueJS PDF

Tutoria VueJS
Aula 01 - Aprendendo sobre reatividade:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Aula 01 - Vuejs do jeito ninja!</title>
<script type="text/javascript" src="assets/js/vue.min.js"></script>
</head>
<body>

<div id="app">
<h1>{{ titulo }}</h1>
</div>
<script type="text/javascript">
var app = new Vue({ // Definindo uma instância do VueJS
el: "#app", // Definindo elemento pai
data: {
titulo: "Aula 01 - Vuejs do jeito ninja!" // Definindo uma variável
}
});
</script>
</body>
</html>
Acessando e alterando a variável ‘titulo’ (isto é reatividade):
Aula 02 – O que são diretivas no VueJS:
São instruções para executar alguma ação ( contem o prefixo ‘v-’) :
Trecho de exemplo:
<div id="app" v-model v-if v-else v-for v-show>

<h1>{{ titulo }}</h1>
</div>
Aula 03 – Diretivas ‘v-show’, ‘v-if’, ‘v-else’:
Exemplo 1:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="app">

<h1 v-if="status">{{ titulo }}</h1>
</div>
var app = new Vue({
el: "#app",
data: {
status: false,
titulo: "Aula 01 - Vuejs do jeito ninja!"
}
});
</script>
</body>
</html>
Exemplo 2:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="app">

<h1 v-if="status">{{ titulo }}</h1>

<p v-show="status">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when
an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s with
the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem
Ipsum.
</p>
</div>
var app = new Vue({
el: "#app",
data: {
status: false,
titulo: "Aula 01 - Vuejs do jeito ninja!"
}
});
</script>
</body>
</html>
Imagem do console para ‘status’ = ‘false’:

Imagem do console para ‘status’ = ‘true’:
Exemplo 3:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>

<div id="app">

<p v-if="status">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when
an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s with
the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem
Ipsum.
</p>

<div v-else>Não existe texto!</div>
</div>
data: {
status: true,
titulo: "Aula 01 - Vuejs do jeito ninja!" // Definindo uma variável
}
});
</script>
</body>
</html>
Exemplo 4:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>

<div id="app">

<h1>{{ titulo }}</h1>

<div v-if="usuario.id == 1">
id: {{ usuario.id }},<br>
Nome: {{ usuario.nome }},<br>
Profissão: {{ usuario.profissao }}
</div>
</div>
data: {
titulo: "Vuejs do jeito ninja!",
usuario: {
id: 1,
nome: "Jon Snow",
profissao: "Ator"
}
}
});
</script>
</body>
</html>
Aula 04 – Diretivas ‘v-for’:
Exemplo 1:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>

<div id="app">

<h1>{{ titulo }}</h1>
<ul>
<li v-for="item in linguagens">{{ item.nome }}</li>
</ul>
</div>
data: {
linguagens: [
{ nome: "Javascript" },
{ nome: "PHP" },
{ nome: "C#" },
{ nome: "Java" },
{ nome: "Python" }
]
}
});
</script>
</body>
</html>
Saída:
Exemplo 2:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>

<div id="app">

<h1>{{ titulo }}</h1>
<ul>

<li v-for="(item, index) in linguagens">
{{ index }} - {{ item.nome }}
</li>
</ul>
</div>
data: {
linguagens: [
{ nome: "Javascript" },
{ nome: "PHP" },
{ nome: "C#" },
{ nome: "Java" },
{ nome: "Python" }
]
}
});
</script>
</body>
</html>
Saída:
Aula 05 – Diretiva ‘v-model’:
Exemplo:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="app">
<h1>{{ titulo }}</h1>
<label for="">Nome:</label>
<input type="text" v-model="nome">
<br><br>
<label for="">Telefone</label>
<input type="text" v-model="telefone">
<br><br>
<label for="">Deseja receber nossas novidades?</label><br>
<input type="radio" value="Sim" v-model="novidades"> Sim
<input type="radio" value="Não" v-model="novidades"> Não
<br><br>
<label for="">Interesses</label><br>
<input type="checkbox" value="Futebol" v-model="interesses"> Futebol <br>
<input type="checkbox" value="Formula 1" v-model="interesses"> Formula 1 <br>
<input type="checkbox" value="Corrida" v-model="interesses"> Corrida <br>
<br><br>
<label for="">Como nos conheceu:</label><br>
<select v-model="conheceu">
<option value="">Escolha</option>
<option value="Google">Google</option>
<option value="TV">TV</option>
<option value="Revista">Revista</option>
</select>
<br><br>
<button>Enviar</button>
<br><br>
Nome: <strong>{{ nome }}</strong> <br>

Telefone: <strong>{{ telefone }}</strong> <br>
Novidades: <strong>{{ novidades }}</strong> <br>
Interesses: <strong>{{ interesses }}</strong> <br>
Como nos conheceu?: <strong>{{ conheceu }}</strong> <br>
</div>
var app = new Vue({
el: "#app",
data: {
nome: "",
telefone: "",
novidades: "",
interesses: [],
conheceu: ""
}
});
</script>
</body>
</html>
Saída:
Aula 06 – Diretiva ‘v-bind’:
Exemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.red {color: red;}
.green {color: green;}
</style>
</head>
<body>
<div id="app">
<h1>{{ titulo }}</h1>

<img v-bind:src="imagem" v-bind:alt="alt" v-bind:title="alt">

<p :class="classe">Lorem Ipsum is simply dummy text of the printing and
typesetting industry.</p>
</div>
var app = new Vue({
el: "#app",
data: {
imagem: "https://vuejs.org/images/logo.png",
alt: "Vuejs is awesome!",
classe: "green"
}
});
</script>
</body>
</html>
Saída:
Aula 07 – Diretiva ‘v-bind:class e style’:
Exemplo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div id="app" class="row">
<div class="col-lg-12">
<h1>{{ titulo }}</h1>
<button class="btn" v-bind:class="btnClassLimpar">LIMPAR</button>
<button class="btn" v-bind:class="btnClassEnviar">ENVIAR</button>
</div>
</div>
</div>
var app = new Vue({
el: "#app",
data: {
btnClassLimpar: 'btn-danger',
/*
Também poderia ser um objeto:
btnClassLimpar: {
'btn-danger': true, // Irá aplicar este atributo
'btn-sm': false // Não irá aplicar este atributo
}
*/
btnClassEnviar: 'btn-primary btn-lg'
/*
Também poderia ser um array:
btnClassEnviar: [
'btn-primary', {'btn-lg': false} // Um objeto dentro do array
]
*/
}
});
</script>
<script type="text/javascript"
src="assets/js/jquery-3.3.1/jquery.min.js"></script>
src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>
Saída:
Exemplo2:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
</head>
<body>
<h1>{{ titulo }}</h1>
<button
class="btn" :class="btnClassLimpar" :style="btnStyleLimpar">LIMPAR</button>
<button
class="btn" :class="btnClassEnviar" :style="btnStyleEnviar">ENVIAR</button>
</div>
</div>
</div>
var app = new Vue({
el: "#app",
data: {
btnClassLimpar: 'btn-danger',
/*
btnClassLimpar: {
'btn-danger': true, // Irá aplicar este atributo
'btn-sm': false // Não irá aplicar este atributo
}
*/
btnClassEnviar: 'btn-primary btn-lg',
/*
Também poderia ser um array:
btnClassEnviar: [
'btn-primary', {'btn-lg': false} // Um objeto dentro do array
]
*/
btnStyleLimpar: 'font-size: 50px',
btnStyleEnviar: 'font-size: 10px'
/*
btnStyleLimpar: {
'font-size': '50px',
'text-transform': 'lowercase' // Caixa baixa
},
btnStyleEnviar: {
'font-size': '10px'
}
*/
}
});
</script>
</body>
</html>
Saída:
Aula 08 – Diretiva ‘v-on’:
Exemplo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
</head>
<body>
<h1>{{ titulo }}</h1>
<button class="btn btn-primary" v-on:click="enviar()">Enviar</button>
</div>
</div>
</div>
var app = new Vue({
el: "#app",
data: {
},
methods: {
enviar() {
alert('Enviando!');
}
}
});
</script>
</body>
</html>
Saída:
Exemplo2:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
</head>
<body>
<h1>{{ titulo }}</h1>
<form action="http://google.com">


<button class="btn btn-primary"
v-on:click.prevent.stop="enviar()">Enviar</button>
</form>
</div>
</div>
</div>
var app = new Vue({
el: "#app",
data: {
},
methods: {
enviar() {
alert('Enviando!');
}
}
});
</script>
</body>
</html>
Aula 09 – Filters:
Exemplo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
</head>
<body>
<div class="row">
<div id="app" class="col-lg-12">
<h1>{{ titulo }}</h1>
<p><strong>Usando 'toUpperCase'</strong></p>
<ul>
<li v-for="usuario in usuarios">{{ usuario.nome | toUpperCase() }}</li>
</ul>
<p><strong>Usando 'truncate'</strong></p>
<ul>
<li v-for="usuario in usuarios">{{ usuario.nome | truncate('10') }}</li>
</ul>
</div>
</div>
</div>
var app = new Vue({
el: "#app",
data: {
usuarios: [
{ nome: 'jon Snow' },
{ nome: 'Tyrion Lannister' },
{ nome: 'Daenerys Targaryen' }
]
},
filters: {
toUpperCase(str) {
return str.toUpperCase();
},
truncate(str, length) {
let output = str;
if (output.length > length) {
output = str.substring(0, length) + ' ...';
}
return output;
}
}
});
</script>
</body>
</html>
Saída:
Aula 10 – Propriedades ‘Computed’ e ‘Watch’:
Exemplo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
</head>
<body>
<div class="row">
<h1>{{ titulo }}</h1>
{{ nome }} <br>
{{ toUpperCase }}
</div>
</div>
</div>
var app = new Vue({
el: "#app",
data: {
nome: "Jon Snow"
},
computed: {
toUpperCase() {
return this.nome.toUpperCase()
}
},
watch: { // 'watch' fica monitorando a variável 'nome'

nome(newValue, oldValue) {
console.log('newValue', newValue);
console.log('oldValue', oldValue);
}
}
});
</script>
</body>
</html>
Saída:
Exemplo2:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
</head>
<body>
<div class="row">
<h1>{{ titulo }}</h1>
{{ fullName }}
</div>
</div>
</div>
var app = new Vue({
el: "#app",
data: {
firstName: "",
lastName: "",
fullName: ""
},
computed: {
},
watch: {
firstName(newValue) {
this.fullName = newValue + ' ' + this.lastName;
},
lastName(newValue) {
this.fullName = this.firstName + ' ' + newValue;
}
}
});
</script>
</body>
</html>
Saída:
Exemplo3:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
</head>
<body>
<div class="row">
<h1>{{ titulo }}</h1>
{{ fullName }}
</div>
</div>
</div>
var app = new Vue({
el: "#app",
data: {
firstName: "",
lastName: ""
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
},
watch: {}
});
</script>
</body>
</html>
Saída:
Exemplo4:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
</head>
<body>
<div class="row">
<h1>{{ titulo }}</h1>
{{ fullName }}
</div>
</div>
</div>
var app = new Vue({
el: "#app",
data: {
firstName: "Jon",
lastName: "Snow"
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
},
watch: {
firstName(newValue) {
this.updateUser();
}
},
methods: {
updateUser() {
console.log('Primeiro nome atualizado');
}
}
});
</script>
</body>
</html>
Saída:
Aula 11 – Life cycle e Hooks:
Obs.: Life cycle = Ciclo de vida e Hooks = Ganjo.

Exemplo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
</head>
<body>
<div class="row">
<h1>{{ titulo }}</h1>
</div>
</div>
</div>
var app = new Vue({
el: "#app",
beforeCreate() {
console.log('beforeCreate');
console.log('titulo', this.titulo);
console.log('el', this.$el);
},
created() {
console.log('create');
},
beforeMount() {
console.log('beforeMount');
},
mounted() {
console.log('mounted');
},
beforeUpdate() {
console.log('beforeUpdate');
},
updated() {
console.log('updated');
},
data: {
},
});
</script>
</body>
</html>
Saída:
Nota: Se for usar por exemplo jquery o correto é utilizá-lo depois que o vuejs tiver feito todas as
suas execuções e o DOM esteja disponibilizado para que o jquery faça suas manipulações. Por
isso é recomendado que códigos do jquery sejam colocados no hooks → mounted.
E com relação aos hooks → beforeUpdate e updated, vejamos o exemplo de saída de console
de alteração da variável titulo:
Aula 12 – Componentes:
Exemplo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
</head>
<body>
<div class="row">
<h1>{{ titulo }}</h1>
<menu-bar></menu-bar>
<menu-bar2></menu-bar2>
</div>
</div>
</div>


<template id="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</template>
// A instância do componente tem de ser feita
// antes da instância do elemento 'app' do VueJS
// Primeira forma de criar componente

Vue.component('menu-bar', {
template: "<ul><li>Item 1</li><li>Item 2</li></ul>"
});
// Segunda forma de criar componente

Vue.component('menu-bar2', {
template: '#menu'
});
var app = new Vue({

el: "#app",
data: {
},
});
</script>
</body>
</html>
Saída:
Aula 13 – Componentes pais e filhos:
Exemplo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
</head>
<body>
<div class="row">

<navbar></navbar>
<h1>{{ titulo }}</h1>
</div>
</div>
</div>


<template id="nav">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span
class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span
class="caret"></span></a>

<menu-bar></menu-bar>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</nav>
</template>


<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</template>
// Componente pai
Vue.component('navbar', {
template: '#nav'
});
// Componente filho
template: '#menu'
});
var app = new Vue({

el: "#app",
data: {
},
});
</script>
</body>
</html>
Saída:
Aula 14 – Enviando e recebendo dados entre componentes pais e filhos:
Exemplo1: Envio de dados do componente ‘pai’ para o ‘filho’ é feito via ‘props’.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
</head>
<body>
<div class="row">

<navbar></navbar>
<h1>{{ titulo }}</h1>
</div>
</div>
</div>

<template id="nav">
</button>
</div>


<menu-bar :items="[{ label: 'Action1' }, { label: 'Action2' }, { label:
'Action3' }]"></menu-bar>
</li>
</ul>
</div>
</form>
</nav>
</template>


<li v-for="item in items"><a href="#">{{ item.label }}</a></li>
</ul>
</template>
// Componente pai
template: '#nav'
});
// Componente filho com items que estão vindo da chamada ao component
template: '#menu',
props: ['items']
});
var app = new Vue({

el: "#app",
data: {
},
});
</script>
</body>
</html>
Saída:
Exemplo2: Mesma saída acima a diferença no código é na chamada do componente ‘menu-bar’

com a variável ‘dropdownMenu’ contendo os elementos ‘Action1, Action2 e Action3’.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
</head>
<body>
<div class="row">
<navbar></navbar>
<h1>{{ titulo }}</h1>
</div>
</div>
</div>

<template id="nav">
</button>
</div>

<menu-bar :items="dropdownMenu"></menu-bar>
</li>
</ul>
</div>
</form>
</nav>
</template>

</ul>
</template>
// Componente pai
template: '#nav',
// data em um componente tem a peculiaridade de ser uma função.
data() {
return {
dropdownMenu: [{ label: 'Action1' }, { label: 'Action2' }, { label:
'Action3' }]
}
}
});
// Componente filho
template: '#menu',
props: ['items']
});
var app = new Vue({

el: "#app",
data: {
},
});
</script>
</body>
</html>
Exemplo3: Forma recomendada de declarar o ‘props’.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
</head>
<body>
<div class="row">
<navbar></navbar>
<h1>{{ titulo }}</h1>
</div>
</div>
</div>

<template id="nav">
</button>
</div>

<menu-bar :items="dropdownMenu"></menu-bar>
</li>
</ul>
</div>
</form>
</nav>
</template>

</ul>
</template>
// Componente pai
template: '#nav',
// data em um componente tem a peculiaridade de ser uma função.
data() {
return {
'Action3' }]
}
}
});
// Componente filho
template: '#menu',
// Forma mais recomendada de se declarar o 'props'
// de maneira que no caso de se declarar uma
// variável fora do padrão definido o erro possa
// ser melhor rastreado no console.
props: {
items: {
type: Array,
required: true
}
}
});
var app = new Vue({

el: "#app",
data: {
},
});
</script>
</body>
</html>
Exemplo4: Envio de dados do componente filho para o componente pai é feito via emissão
($emit).
<!DOCTYPE html>
<html lang="pt-BR">
<head>
</head>
<body>
<div class="row">
<navbar></navbar>
<h1>{{ titulo }}</h1>
</div>
</div>
</div>

<template id="nav">
</button>
</div>


<menu-bar :items="dropdownMenu" @emit-click="getLink"></menu-bar>
</li>
</ul>
</div>
</form>
</nav>
</template>

<li v-for="(item, index) in items">
<a @click.stop.prevent="emitClick(index)" href="#">{{ item.label }}</a>
</li>
</ul>
</template>
// Componente pai
template: '#nav',
// data dentro de um componente tem a peculiaridade de ser uma função.
data() {
return {
'Action3' }]
}
},
methods: {
getLink(index) {
alert(this.dropdownMenu[index].label);
}
}
});
// Componente filho
template: '#menu',
// Forma mais recomendada de se declarar o 'props'
// de maneira que no caso de se declarar uma
// variável fora do padrão definido o erro possa
// ser melhor rastreado no console.
props: {
items: {
type: Array,
required: true
}
},
methods: {
emitClick(index) {
// '$emit' e a ferramenta de emissão do VueJS.
this.$emit('emit-click', index);
}
}
});
var app = new Vue({

el: "#app",
data: {
},
});
</script>
</body>
</html>
Aula 15 – Enviando dados entre componentes não parentes:
Exemplo1:
<!DOCTYPE html>
<html lang="pt-BR">
<head>

</head>
<body>
<div id="app">
<br><br><br><br><br>
<div class="row">
<input-form></input-form>
<br>
<my-list></my-list>
</div>
</div>
</div>
</div>
<template id="form">
<div class="card card-block">
<label for="">Título</label>
<input v-model="title"
type="text" class="form-control">
</div>
<button @click.stop.prevent="submit()"
class="btn btn-primary">Enviar</button>
</div>
</template>
<template id="list">
<ul class="list-group">
<li v-for="item in list"
class="list-group-item">{{ item.title }}</li>
</ul>
</template>
Vue.component('input-form', {
template: '#form',
data() {
return {
title: ''
}
},
methods: {
submit() {
this.$eventHub.$emit('submit', this.title);
// eventBus.$emit('submit', this.title);
}
}
});
Vue.component('my-list', {
template: '#list',
// Usando o 'life cycle' 'created'
created() {
// Para pegar a referência do componente 'my-list'
var _thisMyList = this;
this.$eventHub.$on('submit', function(title) {
// eventBus.$on('submit', function(title) {
if (title) {
_thisMyList.list.push({ title: title });
}
});
},
data() {
return {
list: [
{ title: "Ir a feira" }
]
}
}
});
// Criamos um nova instância do VueJS

// para servir de ponte entre os dois
// seria usando '$eventHub' juntamente
// com 'prototype':
Vue.prototype.$eventHub = new Vue();
// Outra forma de fazer essa ponte seria

// usar um nova instância do VueJS em uma
// variável definida para esse propósito:
// var eventBus = new Vue();
var app = new Vue({

el: "#app",
data: {
},
});
</script>
</body>
</html>
Saída:
Aula 16 – Slots:
Exemplo1: Uso padrão:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
</head>
<body>
<div id="app">
<br><br><br>
<div class="row">
<card>
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title
and make up the buck of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</card>
</div>
</div>
</div>
</div>
<template id="card">
<img src="http://via.placeholder.com/350x150" alt="" class="card-img-top">

<slot></slot>
</div>
</template>
Vue.component('card', {
template: '#card',
data() {
return {
title: ''
}
}
});
var app = new Vue({

el: "#app",
data: {
},
});
</script>
</body>
</html>
Saída:
Exemplo2: Fatiando:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
</head>
<body>
<div id="app">
<br><br><br>
<div class="row">
<card>
<h4 slot="title" class="card-title">Card title</h4>
<p slot="text" class="card-text">Some quick example text to build on
the card title and make up the buck of the card's content.</p>
<a slot="action" href="#" class="btn btn-primary">Go
somewhere</a>
</card>
<br>
<card>
<h4 slot="title" class="card-title">Card title 2</h4>
<p slot="text" class="card-text">Lorem Ipsum is simply dummy text of
the printing and typesetting industry.</p>
<a slot="action" href="#" class="btn btn-primary">Leia
mais</a>
</card>
</div>
</div>
</div>
</div>
<img src="http://via.placeholder.com/350x150" alt=""
class="card-img-top">
<slot name="title"></slot>
<slot name="text"></slot>
<slot name="action"></slot>
</div>
</template>
template: '#card',
data() {
return {
title: ''
}
}
});
var app = new Vue({

el: "#app",
data: {
},
});
</script>
</body>
</html>
Saída:
Exemplo3: 2ª forma de fatiamento:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
</head>
<body>
<div id="app">
<br><br><br>
<div class="row">
<card>
<h4 slot="title" class="card-title">Card title</h4>
<p slot="text" class="card-text">Some quick example text to build on
the card title and make up the buck of the card's content.</p>
<a slot="action" href="#" class="btn btn-primary">Go
somewhere</a>
</card>
<br>
<card>
<h4 slot="title" class="card-title">Card title 2</h4>
<p slot="text" class="card-text">Lorem Ipsum is simply dummy text of
the printing and typesetting industry.</p>
<a slot="action" href="#" class="btn btn-primary">Leia
mais</a>
</card>
</div>
</div>
</div>
</div>
<img src="http://via.placeholder.com/350x150" alt=""
class="card-img-top">
<slot name="title"></slot>
<slot name="text"></slot>
<slot name="action"></slot>
</div>
</template>
template: '#card',
data() {
return {
title: ''
}
}
});
var app = new Vue({

el: "#app",
data: {
},
});
</script>
</body>
</html>
Saída:
Aula 17 – Mixins - É uma forma de reutilizar rotinas de programação:
Exemplo1:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Vuejs do jeito ninja!</title>
</head>
<body>
<div id="app">
<br><br><br>
<div class="row">
<h1>{{ titulo }}</h1>
<button @click="getUsers()" class="btn btn-success">GET USERS</button>
</div>
</div>
</div>
</div>
var mixin = {
methods: {
getUsers() {
// rotina de programação
// localizar usuários
console.log('get users');
}
}
}
var app = new Vue({

el: "#app",
// A instrução abaixo irá fazer com que
// o VueJS combine o método declarado
// anteriormente na variável 'mixin'
// na instância do VueJS.
mixins: [mixin],
data: {
}
});
</script>
</body>
</html>
Saída:
Exemplo2: Mas caso exista um método, dentro da instância do VueJS, com mesmo nome será dado
a preferência para este método (da instância):
<!DOCTYPE html>
<html lang="pt-BR">
<head>
</head>
<body>
<div id="app">
<br><br><br>
<div class="row">
<h1>{{ titulo }}</h1>
</div>
</div>
</div>
</div>
var mixin = {
methods: {
getUsers() {
console.log('get users');
}
}
}
var app = new Vue({

el: "#app",
// A instrução abaixo irá fazer com que
// o VueJS combine o método declarado
// anteriormente na variável 'mixin'
// na instância do VueJS.
mixins: [mixin],
data: {
},
methods: {
getUsers() {
console.log('get users dentro da instância!');
}
}
});
</script>
</body>
</html>
Saída:
Aula 18 – Ajax com vue-resource:
Exemplo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>

<script type="text/javascript" src="assets/js/vue-resource-1.5.1.js"></script>
</head>
<body>
<div id="app">
<br><br><br>
<div class="row">
<h1>{{ titulo }}</h1>
<div v-if="response.status == 'error'" class="alert

alert-danger">{{ response.msg }}</div>
<div v-if="loader.users" class="">Carregando usuários</div>
<ul>
<li v-for="user in users">{{ user.name }}</li>
</ul>
</div>
</div>
</div>
</div>
var mixin = {
methods: {
getUsers() {
this.loader.users = true;
var url = 'http://jsonplaceholder.typicode.com/users';
this.$http.get(url)
.then(function(response) {
this.users = response.body;
}, function(error) {
this.response.status = "error";
})
.finally(function() {
this.loader.users = false;
});
}
}
}
var app = new Vue({

el: "#app",
// A instrução abaixo irá injetar o
// 'mixin' na instância do VueJS.
mixins: [mixin],
data: {
users: [],
loader: {
users: false
},
response: {
msg: "Erro ao conectar",
status: ""
}
}
});
</script>
</body>
</html>
Saída:
Aula 19 – Ajax com axios:
Exemplo: A saída é do exemplo anterior.
<!DOCTYPE html>
<html lang="pt-BR">
<head>

<script type="text/javascript" src="assets/js/axios.min.js"></script>
</head>
<body>
<div id="app">
<br><br><br>
<div class="row">
<h1>{{ titulo }}</h1>
<div v-if="response.status == 'error'" class="alert

alert-danger">{{ response.msg }}</div>
<div v-if="loader.users" class="">Carregando usuários</div>
<ul>
<li v-for="user in users">{{ user.name }}</li>
</ul>
</div>
</div>
</div>
</div>
var mixin = {
methods: {
getUsers() {
this.loader.users = true;
var url = 'http://jsonplaceholder.typicode.com/users';
var _this = this;
axios.get(url).then(function( response ) {
_this.users = response.data;
_this.loader.users = false;
});
}
}
}
var app = new Vue({

el: "#app",
// A instrução abaixo irá injetar o
// 'mixin' na instância do VueJS.
mixins: [mixin],
data: {
users: [],
loader: {
users: false
},
response: {
msg: "Erro ao conectar",
status: ""
}
}
});
</script>
</body>
</html>
Aula 20 – Atributos Especiais ‘key’, ‘ref’ e ‘is’:
Exemplo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>

<script type="text/javascript" src="assets/js/axios.min.js"></script>
</head>
<body>
<div id="app">
<br><br><br>
<div class="row">
<h1 ref="title">{{ titulo }}</h1>

<component :is="movie"></component>

<ul ref="users">

<li v-for="(item, index) in users" :key="item.name">{{ item.name }} <a
@click="remove()" href="#">X</a></li>
</ul>
</div>
</div>
</div>
</div>
<template id="transformers">
<div>
<h4>Transformers</h4>
<ul>
<li v-for="item in transformers">{{ item.name }}</li>
</ul>
</div>
</template>
<template id="games-of-thrones">
<div>
<h4>Games of Thrones</h4>
<ul>
<li v-for="item in gamesOfThrones">{{ item.name }}</li>
</ul>
</div>
</template>
Vue.component('transformers', {
template: '#transformers',
data() {
return {
transformers: [
{ name: 'Optimus Prime' },
{ name: 'Bumbie Bee' },
{ name: 'Megatron' }
]
}
}
});
Vue.component('games-of-thrones', {
template: '#games-of-thrones',
data() {
return {
gamesOfThrones: [
{ name: 'Jon Snow' },
{ name: 'Daenerys Targaryen' },
{ name: 'Tyron' }
]
}
}
});
var app = new Vue({

el: "#app",
mounted() {
console.log(this.$refs.users.innerText);
},
data: {
users: [
{ name: 'Emma' },
{ name: 'Sophia' },
{ name: 'Isabella' }
],
movie: 'games-of-thrones'
},
methods: {
remove(index) {
this.users.splice(index, 1);
}
}
});
</script>
</body>
</html>
Console: Filtro de propriedades:

Console: Resultado de console.log(this.$refs.users.innerText);
Aula 21 – Transições:
Exemplo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>

<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to {
opacity: 0
}
</style>
</head>
<body>
<div id="app">
<br><br><br>
<div class="row">

<select v-model="movie">
<option value="transformers">Transformers</option>
<option value="games-of-thrones">Game of Thrones</option>
</select>

<transition name="fade">
<component :is="movie"></component>
</transition>
<ul ref="users">
<li v-for="(item, index) in users" :key="item.name">{{ item.name }} <a
@click="remove()" href="#">X</a></li>
</ul>
</div>
</div>
</div>
</div>
<div>
<ul>
</ul>
</div>
</template>
<div>
<ul>
</ul>
</div>
</template>
Vue.component('transformers', {
data() {
return {
transformers: [
]
}
}
});
Vue.component('games-of-thrones', {
data() {
return {
gamesOfThrones: [
{ name: 'Tyron' }
]
}
}
});
var app = new Vue({

el: "#app",
mounted() {
console.log(this.$refs.users.innerText);
},
data: {
users: [
{ name: 'Emma' },
{ name: 'Sophia' },
{ name: 'Isabella' }
],
movie: 'games-of-thrones'
},
methods: {
remove(index) {
this.users.splice(index, 1);
}
}
});
</script>
</body>
</html>
Saída:
Aula 22 – Router - Introdução:
Nota: Conteúdo para a criação de ‘single page application’ (SPA) Aplicação de página única.
Exemplo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>

<script type="text/javascript" src="assets/js/vue-router.min.js"></script>
</head>
<body>
<div id="app">
<br><br><br>
<div class="row">

<ul>
<li><router-link to="/transformers">Transformers</router-link></li>
<li><router-link to="/games-of-thrones">Game Of
Thrones</router-link></li>
</ul>

<router-view></router-view>
</div>
</div>
</div>
</div>
<div>
<ul>
</ul>
</div>
</template>
<div>
<ul>
</ul>
</div>
</template>
// Atrelando variável 'Transformers' para roteamento.
var Transformers = Vue.component('transformers', {
data() {
return {
transformers: [
]
}
}
});
// Atrelando variável 'GameOfThrones' para roteamento.
var GamesOfThrones = Vue.component('games-of-thrones', {
data() {
return {
gamesOfThrones: [
{ name: 'Tyron' }
]
}
}
});
// Criando uma instância do roteador.
var router = new VueRouter({
routes: [
{ path: '/transformers', component: Transformers },
{ path: '/games-of-thrones', component: GamesOfThrones }
]
});
var app = new Vue({

el: "#app",
// Inserindo o roteador para a instância do VueJS.

router,
data: {
},
});
</script>
</body>
</html>
Saída:
Aula 23 – Rotas nomeadas e history mode:
Exemplo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>

</head>
<body>
<div id="app">
<br><br><br>
<div class="row">
<ul>

<li><router-link :to="{ name:
'transformers' }">Transformers</router-link></li>
<li><router-link :to="{ name: 'game_Of_Thrones' }">Game Of
</ul>
</div>
</div>
</div>
</div>
<div>
<ul>
</ul>
</div>
</template>
<div>
<ul>
</ul>
</div>
</template>
data() {
return {
transformers: [
]
}
}
});
data() {
return {
gamesOfThrones: [
{ name: 'Tyron' }
]
}
}
});
// Remove a hashtag '#' da 'URL'
mode: 'history',
routes: [
// Acrescentamos a variável 'name' para atribuir um nome a rota.
// Isto é chamado de rota nomeada.
{ path: '/transformers', name: 'transformers', component: Transformers },
{ path: '/games-of-thrones', name: 'game_Of_Thrones', component:
GamesOfThrones }
]
});
var app = new Vue({
el: "#app",

router,
data: {
},
});
</script>
</body>
</html>
Saída: Página inicial:

Saída: Redirecionando para ‘Transformers’:
Aula 24 – Subrotas e rotas com parâmetros:
Exemplo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>

</head>
<body>
<div id="app">
<br><br><br>
<div class="row">
<ul>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<ul>

<li v-for="item in transformers"><router-link :to="{ name:
'transformersContent', params: { name:
item.slug } }">{{ item.name }}</router-link></li>
</ul>
</div>
</div>
</div>
</template>
<template id="transformersContent">
<div>
<h4>Conteúdo Transformers</h4>

{{ $route.params.name }}
</div>
</template>
<div>
<ul>
</ul>
</div>
</template>
data() {
return {
transformers: [
{ name: 'Optimus Prime', slug: 'optimus-prime' },
{ name: 'Bumble Bee', slug: 'bumble-bee' },
{ name: 'Megatron', slug: 'megatron' }
]
}
}
});
data() {
return {
gamesOfThrones: [
{ name: 'Tyron' }
]
}
}
});
// Criando o componente de subrota.
var TransformersContent = Vue.component('transformers-content', {
template: '#transformersContent'
});
mode: 'history',
routes: [
// Criando a variável 'children' referente a subrota.
{ path: '/transformers', name: 'transformers', component: Transformers,
children: [
{ path: ':name', name: 'transformersContent', component:
TransformersContent }
]
},
GamesOfThrones }
]
});
var app = new Vue({
el: "#app",

router,
data: {
},
});
</script>
</body>
</html>
Saída:
Aula 25 – Rotas - navegação automática:
Exemplo: Iniciando a página direcionando para um link pré-determinado.
<!DOCTYPE html>
<html lang="pt-BR">
<head>

</head>
<body>
<div id="app">
<br><br><br>
<div class="row">
<ul>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<ul>
</ul>
</div>
</div>
</div>
</template>
<div>

</div>
</template>
<div>
<ul>
</ul>
</div>
</template>
data() {
return {
transformers: [
]
}
}
});
data() {
return {
gamesOfThrones: [
{ name: 'Tyron' }
]
}
}
});
});
mode: 'history',
routes: [
children: [
]
},
GamesOfThrones }
]
});
var app = new Vue({

el: "#app",

router,
// No momento da criação redireciona automaticamente
// para a subrota 'megatron'.
created() {
this.$router.push({
name: 'transformersContent', params: { name: 'megatron'}
});
// Pode tb ser feito desta forma:
// this.$router.push('/transformers/megatron');
},
data: {
},
});
</script>
</body>
</html>
Saída:
Aula 26 – Rotas - Redirecionamento e Rota Padrão:
Exemplo1: Rota padrão de erro, caso entre por uma ‘url’ inválida:
<!DOCTYPE html>
<html lang="pt-BR">
<head>

</head>
<body>
<div id="app">
<br><br><br>
<div class="row">
<ul>
<li><router-link to="/arrow">Arrow</router-link></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<ul>
</ul>
</div>
</div>
</div>
</template>
<div>

</div>
</template>
<div>
<ul>
</ul>
</div>
</template>
<template id="error404">
<div>
<h1>Página não encontrada</h1>
<p>Ops! Parece que esta página não existe.</p>
</div>
</template>
data() {
return {
transformers: [
]
}
}
});
data() {
return {
gamesOfThrones: [
{ name: 'Tyron' }
]
}
}
});
});
// Criando o componente error404.
var error404 = Vue.component('error404', {
template: '#error404'
});
mode: 'history',
routes: [
// Rota onde deve iniciar para evitar
// entre diretamente na página de error404
{ path: '/', name: 'home' },
children: [
]
},
GamesOfThrones },
// Caso seja digitado uma 'url' desconhecida
// direciona para página 'error404'.
{ path: '*', name: 'error404', component: error404 }
]
});
var app = new Vue({

el: "#app",

router,
// No momento da criação redireciona automaticamente
// para a subrota 'megatron'.
created() {
this.$router.push({
name: 'transformersContent', params: { name: 'megatron'}
});
// Pode tb ser feito desta forma:
// this.$router.push('/transformers/megatron');
},
data: {
},
});
</script>
</body>
</html>
Saída:
Exemplo2:
<!DOCTYPE html>
<html lang="pt-BR">
<head>

</head>
<body>
<div id="app">
<br><br><br>
<div class="row">
<ul>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<ul>
</ul>
</div>
</div>
</div>
</template>
<div>

</div>
</template>
<div>
<ul>
</ul>
</div>
</template>
<div>
</div>
</template>
data() {
return {
transformers: [
]
}
}
});
data() {
return {
gamesOfThrones: [
{ name: 'Tyron' }
]
}
}
});
});
});
mode: 'history',
routes: [
// entre diretamente na página de error404.
// Inclui tb um redirecionamento.
{ path: '/', name: 'home', redirect:
{
name: 'transformersContent', params: { name: 'optimus-prime'}
}
},
children: [
]
},
GamesOfThrones },
]
});
var app = new Vue({

el: "#app",

router,
data: {
},
});
</script>
</body>
</html>
Saída:
Aula 27 – Rotas - Passando propriedades estáticas:
Exemplo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>

<style>
.dark {
color: #fff;
background-color: #000;
}
.light {
color: #fff;
background-color: #666;
}
</style>
</head>
<body>
<div id="app">
<br><br><br>
<div class="row">
<ul>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div :class="['col-lg-2', sidebar]">
Sidebar
</div>
<ul>
</ul>
</div>

</div>
</div>
</template>
<div>

</div>
</template>
<div>
<ul>
</ul>
</div>
</template>
<div>
</div>
</template>
props: {
// Definindo o tipo de valor
// que a variável irá receber
// para ser repassada ao
// componente.
sidebar: String
},
data() {
return {
transformers: [
]
}
}
});
data() {
return {
gamesOfThrones: [
{ name: 'Tyron' }
]
}
}
});
});
});
mode: 'history',
routes: [
// entre diretamente na página de error404.
// Inclui tb um redirecionamento.
{ path: '/', name: 'home', redirect:
{
name: 'transformersContent', params: { name: 'optimus-prime'}
}
},
// Passando valor para a variável
// que será recebida na renderização
// do componente.
props: { sidebar: 'light' },
children: [
]
},
GamesOfThrones },
]
});
var app = new Vue({

el: "#app",

router,
// Este redirecionamento é mais usado
// para quando se tem uma chamada 'ajax'
// que depende de outras variáveis:
// created() {
// this.$router.push({
// name: 'transformersContent', params: { name: 'megatron'}
// });
// },
data: {
},
});
</script>
</body>
</html>
Saída:

Tutorial VueJS PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Tutorial VueJS PDF

Enviado por

Direitos autorais:

Formatos disponíveis

Tutoria VueJS

Aula 01 - Aprendendo sobre reatividade:

Acessando e alterando a variável ‘titulo’ (isto é reatividade):

Aula 02 – O que são diretivas no VueJS:

São instruções para executar alguma ação ( contem o prefixo ‘v-’) :

<div id="app" v-model v-if v-else v-for v-show>

Aula 03 – Diretivas ‘v-show’, ‘v-if’, ‘v-else’:

Imagem do console para ‘status’ = ‘false’:

Aula 04 – Diretivas ‘v-for’:

Aula 05 – Diretiva ‘v-model’:

Nome: <strong>{{ nome }}</strong> <br>

Aula 06 – Diretiva ‘v-bind’:

<title>Aula 01 - Vuejs do jeito ninja!</title>

<script type="text/javascript" src="assets/js/vue.min.js"></script>

<title>Aula 01 - Vuejs do jeito ninja!</title>

<script type="text/javascript" src="assets/js/vue.min.js"></script>

Aula 08 – Diretiva ‘v-on’:

<title>Aula 01 - Vuejs do jeito ninja!</title>

<script type="text/javascript" src="assets/js/vue.min.js"></script>

<title>Aula 01 - Vuejs do jeito ninja!</title>

<script type="text/javascript" src="assets/js/vue.min.js"></script>

<title>Aula 01 - Vuejs do jeito ninja!</title>

<script type="text/javascript" src="assets/js/vue.min.js"></script>

Aula 10 – Propriedades ‘Computed’ e ‘Watch’:

<title>Aula 01 - Vuejs do jeito ninja!</title>

<script type="text/javascript" src="assets/js/vue.min.js"></script>

watch: { // 'watch' fica monitorando a variável 'nome'

<title>Aula 01 - Vuejs do jeito ninja!</title>

<script type="text/javascript" src="assets/js/vue.min.js"></script>

<script type="text/javascript" src="assets/js/vue.min.js"></script>

<title>Aula 01 - Vuejs do jeito ninja!</title>

<script type="text/javascript" src="assets/js/vue.min.js"></script>

Aula 11 – Life cycle e Hooks:

Obs.: Life cycle = Ciclo de vida e Hooks = Ganjo.

<title>Aula 01 - Vuejs do jeito ninja!</title>

<script type="text/javascript" src="assets/js/vue.min.js"></script>

<title>Aula 01 - Vuejs do jeito ninja!</title>

<script type="text/javascript" src="assets/js/vue.min.js"></script>

// Primeira forma de criar componente

// Segunda forma de criar componente

var app = new Vue({

Aula 13 – Componentes pais e filhos:

<script type="text/javascript" src="assets/js/vue.min.js"></script>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

var app = new Vue({

<title>Aula 01 - Vuejs do jeito ninja!</title>

<script type="text/javascript" src="assets/js/vue.min.js"></script>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

var app = new Vue({

Exemplo2: Mesma saída acima a diferença no código é na chamada do componente ‘menu-bar’

<title>Aula 01 - Vuejs do jeito ninja!</title>

<script type="text/javascript" src="assets/js/vue.min.js"></script>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

var app = new Vue({

Exemplo3: Forma recomendada de declarar o ‘props’.

<title>Aula 01 - Vuejs do jeito ninja!</title>