Skip to content

Commit dfeb9fa

Browse files
kossiecoderkossiecoder
committed
12
1 parent 967ff32 commit dfeb9fa

File tree

1 file changed

+80
-15
lines changed

1 file changed

+80
-15
lines changed

‎index.html

Lines changed: 80 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,36 +9,101 @@
99
</head>
1010
<body>
1111
<div id="app">
12-
{{ name }}<br>
12+
<!-- {{ name }}<br>
1313
<button @click="changeText">Click</button>
14+
15+
<hr> -->
16+
17+
<kossie-button></kossie-button>
1418
</div>
19+
<hr><hr>
1520
<div id="app-1">
16-
{{ name }}<br>
21+
<!-- {{ name }}<br>
1722
<button @click="changeText">Click</button>
23+
24+
<hr> -->
25+
26+
<kossie-button></kossie-button>
1827
</div>
1928
<script>
20-
const app = new Vue({
21-
el: '#app',
22-
data: {
23-
name: 'kossie'
29+
// Vue.component('hello-world', {
30+
// template: '<div>hello world</div>'
31+
// });
32+
// Vue.component('kossie-button', {
33+
// template: `
34+
// <div>
35+
// {{ name }}<br>
36+
// <hello-world></hello-world>
37+
// <button @click="changeText">Click</button>
38+
// </div>
39+
// `,
40+
// data() {
41+
// return {
42+
// name: 'kossie'
43+
// }
44+
// },
45+
// methods: {
46+
// changeText() {
47+
// this.name = 'kossie updated';
48+
// }
49+
// },
50+
// });
51+
52+
const HelloWorld = {
53+
template: '<div>hello world</div>'
54+
};
55+
56+
const KossieButton = {
57+
components: {
58+
'hello-world': HelloWorld
59+
},
60+
template: `
61+
<div>
62+
{{ name }}<br>
63+
<hello-world></hello-world>
64+
<button @click="changeText">Click</button>
65+
</div>
66+
`,
67+
data() {
68+
return {
69+
name: 'kossie'
70+
}
2471
},
2572
methods: {
2673
changeText() {
27-
app1.name = 'kossie updated';
74+
this.name = 'kossie updated';
2875
}
2976
},
77+
};
78+
79+
const app = new Vue({
80+
el: '#app',
81+
components: {
82+
'kossie-button': KossieButton
83+
}
84+
// data: {
85+
// name: 'kossie'
86+
// },
87+
// methods: {
88+
// changeText() {
89+
// this.name = 'kossie updated';
90+
// }
91+
// },
3092
})
3193

3294
const app1 = new Vue({
3395
el: '#app-1',
34-
data: {
35-
name: 'kossie1'
36-
},
37-
methods: {
38-
changeText() {
39-
app.name = 'kossie1 updated';
40-
}
41-
},
96+
components: {
97+
'kossie-button': KossieButton
98+
}
99+
// data: {
100+
// name: 'kossie'
101+
// },
102+
// methods: {
103+
// changeText() {
104+
// this.name = 'kossie updated';
105+
// }
106+
// },
42107
})
43108
</script>
44109
</body>

0 commit comments

Comments
 (0)