Skip to content

Commit 3da6356

Browse files
luuizeduardoluuizeduardo
committed
Continuação do curso
1 parent 63c2215 commit 3da6356

File tree

4 files changed

+72
-0
lines changed

4 files changed

+72
-0
lines changed

‎html/exemplo5.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title>VueJS</title>
7+
<link rel="stylesheet" href="">
8+
</head>
9+
<body>
10+
<div id="app">
11+
<!-- A diretiva v-model serve para fazer o two-way data-binding, ou seja,
12+
setar o valor default do campo e no mesmo momento, quando houver alguma
13+
mudança neste valor, realizar a atualização da propriedade dentro da
14+
instância do Vue -->
15+
<input type="text" name="name" id="name" v-model="name">
16+
</div>
17+
18+
<script src="../js/vue.js"></script>
19+
<script src="../js/exemplo5.js"></script>
20+
</body>
21+
</html>

‎html/exemplo6.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title>VueJS</title>
7+
<link rel="stylesheet" href="">
8+
</head>
9+
<body>
10+
<div id="app">
11+
<button v-on:click="counter++">Increase</button>
12+
<button v-on:click="counter--">Decrease</button>
13+
<button v-on:click="secondCounter++">SecondCounter</button>
14+
15+
<p>Counter: {{ counter }} | {{ secondCounter }} </p>
16+
17+
<!-- Variáveis que estão dentro do "computed" são chamadas da mesma forma que o data. -->
18+
<p>Result: {{ result() }} | {{ output }} </p>
19+
</div>
20+
21+
<script src="../js/vue.js"></script>
22+
<script src="../js/exemplo6.js"></script>
23+
</body>
24+
</html>

‎js/exemplo5.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
new Vue({
2+
el: '#app',
3+
data:{
4+
name: 'Luiz'
5+
}
6+
});

‎js/exemplo6.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
new Vue({
2+
el: '#app',
3+
data:{
4+
counter: 0,
5+
secondCounter: 0
6+
},
7+
// O Computed armazena dados para serem usados em sua página assim como o data.
8+
// A diferença é que aqui os dados são funções, e não dados estáticos.
9+
computed: {
10+
output: function(){
11+
console.log('Computed');
12+
return this.counter > 5 ? 'Greater than 5' : 'Smaller than 5';
13+
}
14+
},
15+
methods: {
16+
result: function(){
17+
console.log('Method');
18+
return this.counter > 5 ? 'Greater than 5' : 'Smaller than 5';
19+
}
20+
}
21+
});

0 commit comments

Comments
 (0)