Tutorial Vuejs

Pratica VueJS 2.
01. Binding:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Binding</title>
<script type="text/javascript"
src="assets/js/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/vue/2.5.2/vue.min.js"></script>
<script type="text/javascript">
$(function(){
new Vue({
el: '#app',
data: {
novaTarefa: '',
tarefas: [
{nome: 'Fazer a compra'},
{nome: 'Gravar episódio'},
{nome: 'Editar episódio'}
],
},
methods: {
guardarTarefa: function(tarefa) {
if (tarefa.trim()) {
this.tarefas.push({nome: tarefa});
this.novaTarefa = '';
} else {
alert('Deves introduzir um nome para a tarefa');
}
},
eliminarTarefa: function(tarefa) {
if(confirm('Eliminar ' + tarefa.nome + '?')) {
this.tarefas.$remove(tarefa);
}
}
}
});
});
</script>
</head>
<body>
<div id="app">
<input type="text" v-model="novaTarefa" placeholder="Introduza tarefa" />
<input type="submit" value="Acrescentar tarefa"

@click="guardarTarefa(novaTarefa)" />
<h4>Tarefas</h4>
<ul v-for="tarefa in tarefas">

<li>
<a href="#" @click="eliminarTarefa(tarefa)" >X</a> {{ tarefa.nome }}
</li>
</ul>
<hr width="100%" size="5" noshade />
<pre>
{{ $data | json }}
</pre>
</div>
</body>
</html>
02. Binding:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Binding</title>
<style type="text/css">
* {margin: 0; padding: 0;} /* Reset (remove a margem padrão do browser) */

#app {
width: 400px;
margin: 10px auto;
}
input, textarea {
display: block;
margin: 10px 0;
}
.alerta {
color: red;
font-weight: bold;
}
</style>
$(function(){
new Vue({
el: '#app',
data: {
mensage: '',
}
});
});
</script>
</head>
<body>
<div id="app">
<p class="alerta" v-show="!mensage">Deves inserir uma mensage...</p>
<form action="">
<textarea cols="30" rows="10" placeholder="Escreva sua mensage..." required

v-model="mensage">
</textarea>
<input type="submit" value="Enviar mensage" v-show="mensage" >
</form>
<br> <br> <br>
<br> <br> <br>
<pre>
{{ $data | json }}
</pre>
</div>
</body>
</html>
03. Propriedades computadas:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Propriedades computadas</title>

#app {
width: 400px;
margin: 10px auto;
}
</style>
<link rel="stylesheet" href="assets/css/bootstrap/3.3.7/bootstrap.min.css">
$(function(){
new Vue({
el: '#app',
data: {
nome: '',
idade: '',
sexo: '',
correioe: ''
},
methods: {
enviarDados: function() {
if(this.nome && this.idade && this.sexo && this.correioe) {
alert('Enviando dados...');
} else {
alert('Preencha todos os campos.');
}
}
},
computed: {
todaInformacao: function() {
return this.nome && this.idade && this.sexo && this.correioe;
}
}
});
});
</script>
</head>
<body>
<div id="app">
<div class="panel panel-default">

<div class="panel-body">
<form action="" @submit.prevent="enviarDados">
<div class="form-group">
<input v-model="nome" type="text" placeholder="Nome"
class="form-control" >
</div>
<input v-model="idade" type="number" placeholder="Idade"
</div>
<input v-model="sexo" type="text" placeholder="Sexo"
</div>
<input v-model="correioe" type="e-mail" placeholder="correio-e"
</div>
<input v-show="todaInformacao" type="submit" class="btn btn-info

pull-right" value="Enviar dados" />
</form>
</div>
</div>
<br> <br> <br>

<br> <br> <br>
<pre>
{{ $data | json }}
</pre>
</div>
</body>
</html>
04. Eventos e métodos:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Eventos e Métodos</title>
#app {
width: 400px;
margin: 20px auto;
}
</style>
$(function(){
new Vue({
el: '#app',
data: {
nome: 'Alan',
tecla: '',
},
methods: {
/*
saudar: function(nome, _evt) {
alert('Como vai ' + nome);
console.log(_evt);
}
*/
saudar: function(_evt) {
alert('Como vai ' + this.nome);
console.log(_evt);
},
/*
enviar: function(_evt) {
_evt.preventDefault();
alert('Enviando formulário');
},
*/
enviar: function() {
alert('Enviando formulário');
},
abrirEnlace: function() {
alert('Abrindo enlace');
},
teclaPressionada: function(_evt) {
this.tecla = _evt.code;
}
}
});
});
</script>
</head>
<body>
<div id="app">


<form @submit.prevent="enviar" action="" >
<input type="text" v-model="nome" @keyup="teclaPressionada" />



<input type="submit" value="Enviar formulário" />
</form>
<br><br><br>
<a @click.prevent="abrirEnlace"
href="https://www.google.com.br/webhp?lr=lang_pt">Google</a>
<br><br><br>
<h3>{{ tecla }}</h3>
</div>
</body>
</html>
05. Renderizando listas:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Renderizando listas</title>
#app {
width: 400px;
margin: 20px auto;
}
</style>
$(function(){
new Vue({
el: '#app',
data: {
// Objeto
pessoa: {
nome: 'Alan Calazans',
profissao: 'dev',
cidade: 'Belo Horizonte'
},
// Matriz simples
numeros: [
1,2,3,4,5
],
// Matriz de objetos
semana: [
{nome: 'segunda-feira', numero: 1},
{nome: 'terça-feira', numero: 2},
{nome: 'quarta-feira', numero: 3},
{nome: 'quinta-feira', numero: 4},
{nome: 'sexta-feira', numero: 5},
{nome: 'sábado', numero: 6},
{nome: 'domingo', numero: 7},
],
});
});
</script>
</head>
<body>
<div id="app">
<h3>Objetos</h3>
<br>
<ul>
<li v-for="(dado, key) in pessoa">
{{ key }} - {{ dado }}
</li>
</ul>
<br>
<h3>Matriz simples</h3>
<br>
<ul>
<li v-for="numero in numeros">
{{ numero }}
</li>
</ul>
<br>
<h3>Matriz de objetos</h3>
<br>
<ul>
<li v-for="dia in semana">
{{ dia.nome }} {{ dia.numero }}
</li>
</ul>
<br>
<h3>Percorrer um range</h3>
<br>
<ul>
<li v-for="n in 5">
{{ n }}
</li>
</ul>
<br>
<h3>Repetir grupo de elementos</h3>

<br>
<ul>
<template v-for="n in 5">
<h1>{{ n }}</h1>
<hr />
</template>
</ul>
<br>
</div>
</body>
</html>
06. Data binding em estilos e classes:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Data binding em estilos e classes</title>
#app {
width: 400px;
margin: 20px auto;
}
.azul {
color: blue;
}
.sublinhado {
text-decoration: underline;
}
</style>
$(function(){
new Vue({
el: '#app',
data: {
// Objeto
azul: true,
sublinhado: false,
// Objeto sintaxe direta

objetoComClasses: {
'azul': true,
'sublinhado': true,
},
// Sintaxe de array
listaDeClasses: {
azul: 'azul',
sublinhado: 'sublinhado'
},
// Estilos diretos
colorFonte: 'green',
tamanhoFonte: '40px',
// Estilos diretos, através de objetos

objetoEstilo: {
color: 'green',
fontSize: '40px' // camelCase
},
outroObjetoEstilo: {
textDecoration: 'underline', // camelCase
transform: 'rotate(30deg)'
},
color: '',
},
});
});
</script>
</head>
<body>
<div id="app">
<input type="color" v-model="color" />
<br><br>
<p>Color: {{ color }}</p>
<br>
<h1 v-bind:style="{color: color}">A cor escolhida</h1>
<br>
<hr />
<h2 v-bind:class="{'azul': azul, 'sublinhado': sublinhado}">

Sintaxe de objeto
</h2>
<h2 v-bind:class="objetoComClasses">
Sintaxe de objeto, forma direta
</h2>

<h2 v-bind:class="[listaDeClasses.azul, sublinhado ?
listaDeClasses.sublinhado : '']">
Sintaxe de Array
</h2>

<h2 v-bind:style="{color: colorFonte, fontSize: tamanhoFonte}">
Estilos diretos
</h2>
<h2 v-bind:style="objetoEstilo">
Estilos diretos, através de um objeto
</h2>
<br><br><br><br><br>
<h2 v-bind:style="[objetoEstilo, outroObjetoEstilo]">
Estilos diretos, através de vários objetos
</h2>
</div>
</body>
</html>
07. Renderização condicional:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Renderização condicional</title>
$(function(){
new Vue({
el: '#app',
data: {
ativado: true,
}
});
});
</script>
</head>
<body>
<div id="app">
<h1 v-if="ativado">Estou ativado</h1>

<h1 v-else="desativado">Estou desativado</h1>
</div>
</body>
</html>
08. Introdução a componentes:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Introdução a componentes</title>
#cita {
width: 600px;
position: relative;
margin: 20px auto;
padding: 20px;
background: white;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 1px 1px 10px black;
}
h3 {
margin: 10px 0;
}
h2 {
color: blue;
margin: 0;
padding: 0;
position: absolute;
top: 10px;
right: 10px;
}
</style>
$(function(){
Vue.component('citacao', {
template: '<div id="cita">\

<h3>{{ this.citacaoEscolhida }}</h3>\
<h2 v-if="this.votos > 0">{{ this.votos }}</h2>\
<button @click="somarVoto">Curtir</button>\
\
<button @click="subtrairVoto">Não curtir</button>\
</div>',
data: () => ({
votos: '',
citacaoEscolhida: '',
citacoes: [
'“Toda hora é hora de fazer o que é certo.” - Martin Luther King',
'“O ser humano é aquilo que a educação faz dele.” - Immanuel Kant',
'“Eduquem as crianças e não será necessário castigar os homens.” -
Pitágoras',
'"A injustiça num lugar qualquer é uma ameaça à justiça em todo o lugar."
- Martin Luther King',
'"O que me preocupa não é o grito dos maus. É o silêncio dos bons." -
Martin Luther King',
'"Todos os homens têm, por natureza, desejo de conhecer" - Aristóteles',
'"O homem nasce livre e por toda parte encontra-se acorrentado" -
Jean-Jacques Rousseau',
'"A vontade geral deve emanar de todos para ser aplicada a todos" -
Jean-Jacques Rousseau.'
],
}),
created: function() {
this.escolherCitacao();
},
methods: {
escolherCitacao: function() {
var citacao = this.citacoes[Math.floor(Math.random() *
this.citacoes.length)];
this.citacaoEscolhida = citacao;
},
somarVoto: function() {
this.votos++;
},
subtrairVoto: function() {
if (this.votos > 0)
this.votos--;
},
},
})
new Vue({
el: '#app',
})
});
</script>
</head>
<body>
<div id="app">
<citacao></citacao>
<citacao></citacao>
<citacao></citacao>
</div>
</body>
</html>
09. Filtros:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Filtros</title>
#app {
width: 400px;
margin: 10px auto;
}
</style>
$(function(){
new Vue({
el: '#app',
data: {
dados: {
nome: 'Alan',
profissao: 'dev'
}
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
},
uppercase: function (value) {

if (!value) return ''
return value = value.toUpperCase()
},
},
});
});
</script>
</head>
<body>
<div id="app">
<pre>{{ dados | json }}</pre>
<br>
<h3>{{ dados.nome | uppercase }}</h3>
<br>
<h3>{{ dados.profissao | capitalize }}</h3>
</div>
</body>
</html>
10. Transições:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Transições</title>
#app {
width: 400px;
margin: 10px auto;
}
button {
margin-bottom: 10px;
}
p {
background-color: gray;
padding: 100px;
border: 1px solid black;
}
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {

opacity: 0
}
</style>
$(function(){
new Vue({
el: '#app',
data: {
show: true,
mensage: 'Transição'
}
});
});
</script>
</head>
<body>
<div id="app">
<button v-on:click="show = !show">

Alternar
</button>
<transition name="fade">
<p v-if="show">{{ mensage }}</p>
</transition>
</div>
</body>
</html>
11. Data binding em formulários:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Data binding em formulários</title>
#app {
width: 400px;
margin: 10px auto;
}
</style>
$(function(){
new Vue({
el: '#app',
data: {
checked_checkbox: true,
checked_radio: true,
selecionado: '',
tarefas: [
{titulo: 'Aprender Vue.js'},
{titulo: 'Aprender Angular.js'},
{titulo: 'Aprender Vanilla JavaScript'}
]
}
});
});
</script>
</head>
<body>
<div id="app">


<input type="checkbox" id="checkbox" v-model="checked_checkbox">
<label for="checkbox">{{ checked_checkbox }}</label>
<br><br>
<hr>
<br><br>

<input type="radio" id="one" value="Vue.js" v-model="checked_radio">
<label for="one">Vue</label>
<br>
<input type="radio" id="two" value="Angular.js" v-model="checked_radio">
<label for="two">Angular</label>
<br>
<span>Picked: {{ checked_radio }}</span>
<br><br>
<hr>
<br><br>


<select v-model="selecionado">
<option v-for="tarefa in tarefas" :value="tarefa.titulo">
{{ tarefa.titulo }}
</option>
</select>
<br><br>
<pre>
{{ tarefas | json }}
</pre>
</div>
</body>
</html>
12. Ajax com Vue-Resource:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Ajax com Vue-Resource</title>
#app {
width: 400px;
margin: 10px auto;
}
</style>

src="assets/js/vue-resource/1.3.4/vue-resource.min.js"></script>
$(function(){
var urlAPI = 'https://api.randomuser.me/?results=50';
new Vue({
el: '#app',
created: function() {
this.consultarAPI();
},
data: {
pessoas: []
},
methods: {
consultarAPI: function() {
// GET urlAPI
this.$http.get(urlAPI).then(response => {
// get results data

this.pessoas = response.data.results;
}, response => {
// error callback
});
}
}
});
});
</script>
</head>
<body>
<div id="app">
<ul v-for="pessoa in pessoas">

<li>{{ pessoa.name.first }}</li>
</ul>
<br><br>
<hr>
<pre>
{{ $data | json }}
</pre>
</div>
</body>
</html>

Tutorial Vuejs

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tutorial Vuejs

Cargado por

Copyright:

Formatos disponibles

Pratica VueJS 2.

<input type="text" v-model="novaTarefa" placeholder="Introduza tarefa" />

<input type="submit" value="Acrescentar tarefa"

<ul v-for="tarefa in tarefas">

* {margin: 0; padding: 0;} /* Reset (remove a margem padrão do browser) */

<p class="alerta" v-show="!mensage">Deves inserir uma mensage...</p>

<textarea cols="30" rows="10" placeholder="Escreva sua mensage..." required

<input type="submit" value="Enviar mensage" v-show="mensage" >

<br> <br> <br>

<hr width="100%" size="5" noshade />

<br> <br> <br>

03. Propriedades computadas:

* {margin: 0; padding: 0;} /* Reset (remove a margem padrão do browser) */

<div class="panel panel-default">

<input v-show="todaInformacao" type="submit" class="btn btn-info

<br> <br> <br>

<br> <br> <br>

04. Eventos e métodos:

* {margin: 0; padding: 0;} /* Reset (remove a margem padrão do browser) */

<input type="text" v-model="nome" @keyup="teclaPressionada" />

<input type="text" v-model="nome" @keyup.enter="teclaPressionada" />

<input type="submit" value="Enviar formulário" />

<h3>{{ tecla }}</h3>

05. Renderizando listas:

* {margin: 0; padding: 0;} /* Reset (remove a margem padrão do browser) */

<h3>Repetir grupo de elementos</h3>

06. Data binding em estilos e classes:

* {margin: 0; padding: 0;} /* Reset (remove a margem padrão do browser) */

// Objeto sintaxe direta

// Estilos diretos, através de objetos

<input type="color" v-model="color" />

<p>Color: {{ color }}</p>

<h1 v-bind:style="{color: color}">A cor escolhida</h1>

<h2 v-bind:class="{'azul': azul, 'sublinhado': sublinhado}">

07. Renderização condicional:

<h1 v-if="ativado">Estou ativado</h1>

08. Introdução a componentes:

* {margin: 0; padding: 0;} /* Reset (remove a margem padrão do browser) */

template: '<div id="cita">\

uppercase: function (value) {

<h3>{{ dados.nome | uppercase }}</h3>

<h3>{{ dados.profissao | capitalize }}</h3>

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {

<button v-on:click="show = !show">

11. Data binding em formulários:

12. Ajax com Vue-Resource:

// get results data

<ul v-for="pessoa in pessoas">

También podría gustarte