Skip to content

Commit d62176f

Browse files
author
Luiz Eduardo
committed
Adicionada página que contém um link interpretado por um atributo do vue. Feita apresentação de dados do exemplo 2 por uma function
1 parent aa47c64 commit d62176f

File tree

4 files changed

+33
-1
lines changed

4 files changed

+33
-1
lines changed

‎html/exemplo2.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
A propriedade v-on:input é usada quando queremos capturar o que o usuário está digitando
1414
-->
1515
<input type="text" v-on:input="changeTitle">
16-
<p>{{title}}</p>
16+
<p>Acesso ao atributo: {{ title }}</p>
17+
<p>Chamando através de um método: {{ sayHello() }}</p>
1718
</div>
1819

1920
<script src="../js/vue.js"></script>

‎html/exemplo3.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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+
<script src="vue.js"></script>
9+
</head>
10+
<body>
11+
<div id="app">
12+
<!--
13+
A propriedade v-bind é usada quando queremos indicar ao html que deve ser
14+
interpretado um atributo definido no js que contém o código vue da página
15+
-->
16+
<a v-bind:href="link" target="_blank">Google</a>
17+
</div>
18+
19+
<script src="../js/vue.js"></script>
20+
<script src="../js/exemplo3.js"></script>
21+
</body>
22+
</html>

‎js/exemplo2.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ new Vue({
66
methods: {
77
changeTitle: function(event){
88
this.title = event.target.value;
9+
},
10+
sayHello: function(){
11+
return this.title;
912
}
1013
}
1114
});

‎js/exemplo3.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+
link: 'http://google.com'
5+
}
6+
});

0 commit comments

Comments
 (0)