-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvue_6.html
83 lines (70 loc) · 2.37 KB
/
vue_6.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE HTML>
<html>
<head>
<title>Vue Components</title>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.circle{border-radius:50%; background:Grey; border:1px solid #ccc; display:inline-block; position:absolute}
</style>
</head>
<body>
<div id="app">
<orb v-bind:radius="40" v-bind:color="'white'"></orb>
<orb
v-for="orb in orbs"
v-bind:radius="orb.radius"
v-bind:color="orb.color"
v-bind:style="{top: orb.x+'px', left:orb.y+'px' }"
v-bind:key="orb.id">
</orb>
</div>
<script>
Vue.component('orb',{
props:['radius','color', 'x', 'y'],
template:
`<span
v-bind:class="'circle'"
v-bind:style="{'width':radius+'px', 'height':radius+'px', 'background':color}"
v-on:click="prompt();">
</span>`,
methods:{
prompt:function(){
alert('You clicked the '+this.color+' circle!');
this.color='none';
}
}
});
var app = new Vue({
el: '#app',
data:{
orbs:[
{id:1, radius:10, color:'green', x:80, y:80},
{id:2, radius:15, color:'purple', x:350, y:100},
{id:3, radius:20, color:'black', x:100, y:100},
{id:4, radius:25, color:'blue', x:500, y:500},
{id:5, radius:30, color:'orange', x:80, y:480},
{id:6, radius:35, color:'yellow', x:0, y:80},
{id:7, radius:45, color:'red', x:500, y:80}
]
},
});
</script>
<!--
Step 1: Run the code above!
Vue "Components" are tricky to get the hang of. Practice!
The idea is to atomize each element of the app into tiny, reusable components
Each compoment can be customized with the use of "props" (properties).
The Markup scaffolding is included in the template. Use ` if you want multi-line!
The components can have methods as well! The prompt function also can change the component properties
Components may also have a data property, just like the app.
However, the same problem will occur as with methods. The data defined in the component will apply to all circles.
There are ways around this, but for now, it's easier to make your components require data from the app as props.
the v-bind:key will force our hand
ASYNCHRONOUS LEARNING EXERCISE
1. Make the circles position absolute
2. Create two new properties "x" and "y" for each orb
3. Pass through values of "x" and "y" in the app to have circles on different spots of the screen
-->
</body>
</html>