Skip to content

Commit 942859e

Browse files
keepfoolkeepfool
committed
Vue.js component tutorial part-2 source code, based on Vue.js v1.0.25
1 parent 29b24ef commit 942859e

27 files changed

+13560
-0
lines changed

‎02.Components/Part-2/$broadcast.html

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title></title>
7+
<style>
8+
9+
*{
10+
font-family: simhei;
11+
}
12+
13+
#app {
14+
max-width: 640px;
15+
margin: 50px auto;
16+
}
17+
18+
.parent-content,
19+
.child-content {
20+
height: 150px;
21+
padding: 20px;
22+
}
23+
24+
.parent-content {
25+
border: 1px solid #0090D3;
26+
margin-bottom: 20px;
27+
}
28+
29+
.child-content {
30+
border: 1px solid #ff0066;
31+
}
32+
</style>
33+
</head>
34+
35+
<body>
36+
37+
<div id="app">
38+
<div class="parent-content">
39+
<h2>父组件内容：</h2>
40+
<input v-model="msg" />
41+
<button v-on:click="notify">Broadcast Event</button>
42+
</div>
43+
44+
<child-component></child-component>
45+
</div>
46+
47+
<template id="child-component">
48+
<div class="child-content">
49+
<h2>子组件内容：</h2>
50+
<ul>
51+
<li v-for="item in messages">
52+
父组件录入了信息：{{ item }}
53+
</li>
54+
</ul>
55+
</div>
56+
57+
</template>
58+
59+
<script src="js/vue.js"></script>
60+
<script>
61+
// 注册子组件
62+
Vue.component('child-component', {
63+
template: '#child-component',
64+
data: function() {
65+
return {
66+
messages: []
67+
}
68+
},
69+
events: {
70+
'parent-msg': function(msg) {
71+
this.messages.push(msg)
72+
}
73+
}
74+
})
75+
// 初始化父组件
76+
new Vue({
77+
el: '#app',
78+
data: {
79+
msg: ''
80+
},
81+
methods: {
82+
notify: function() {
83+
if (this.msg.trim()) {
84+
this.$broadcast('parent-msg', this.msg)
85+
}
86+
}
87+
}
88+
})
89+
</script>
90+
</body>
91+
92+
</html>

‎02.Components/Part-2/$children.html

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title></title>
7+
<style>
8+
9+
#app{
10+
max-width: 640px;
11+
margin: 50px auto;
12+
}
13+
14+
</style>
15+
</head>
16+
17+
<body>
18+
19+
<div id="app">
20+
<parent-component></parent-component>
21+
</div>
22+
23+
<template id="parent-component">
24+
<child-component1></child-component1>
25+
<child-component2></child-component2>
26+
<button v-on:click="showChildComponentData">显示子组件的数据</button>
27+
</template>
28+
29+
<template id="child-component1">
30+
<h2>This is child component 1</h2>
31+
</template>
32+
33+
<template id="child-component2">
34+
<h2>This is child component 2</h2>
35+
</template>
36+
37+
<script src="js/vue.js"></script>
38+
<script>
39+
Vue.component('parent-component', {
40+
template: '#parent-component',
41+
components: {
42+
'child-component1': {
43+
template: '#child-component1',
44+
data: function() {
45+
return {
46+
msg: 'child component 111111'
47+
}
48+
}
49+
},
50+
'child-component2': {
51+
template: '#child-component2',
52+
data: function() {
53+
return {
54+
msg: 'child component 222222'
55+
}
56+
}
57+
}
58+
},
59+
methods: {
60+
showChildComponentData: function() {
61+
for (var i = 0; i < this.$children.length; i++) {
62+
alert(this.$children[i].msg)
63+
}
64+
}
65+
}
66+
})
67+
68+
new Vue({
69+
el: '#app'
70+
})
71+
</script>
72+
73+
</body>
74+
75+
</html>

‎02.Components/Part-2/$dispatch.html

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title></title>
7+
<style>
8+
* {
9+
font-family: simhei;
10+
}
11+
12+
#app {
13+
max-width: 640px;
14+
margin: 50px auto;
15+
}
16+
17+
.parent-content,
18+
.child-content {
19+
height: 150px;
20+
padding: 20px;
21+
}
22+
23+
.parent-content {
24+
border: 1px solid #0090D3;
25+
margin-bottom: 20px;
26+
}
27+
28+
.child-content {
29+
border: 1px solid #ff0066;
30+
}
31+
</style>
32+
</head>
33+
34+
<body>
35+
36+
<div id="app">
37+
<div class="parent-content">
38+
<h2>父组件内容</h2>
39+
<p>Messages: {{ messages | json }}</p>
40+
</div>
41+
42+
<child-component></child-component>
43+
</div>
44+
45+
<template id="child-component">
46+
<div class="child-content">
47+
<h2>子组件内容</h2>
48+
<input v-model="msg" />
49+
<button v-on:click="notify">Dispatch Event</button>
50+
</div>
51+
</template>
52+
53+
<script src="js/vue.js"></script>
54+
<script>
55+
// 注册子组件
56+
Vue.component('child-component', {
57+
template: '#child-component',
58+
data: function() {
59+
return {
60+
msg: ''
61+
}
62+
},
63+
methods: {
64+
notify: function() {
65+
if (this.msg.trim()) {
66+
this.$dispatch('child-msg', this.msg)
67+
this.msg = ''
68+
}
69+
}
70+
}
71+
})
72+
73+
// 初始化父组件
74+
new Vue({
75+
el: '#app',
76+
data: {
77+
messages: []
78+
},
79+
events: {
80+
'child-msg': function(msg) {
81+
this.messages.push(msg)
82+
}
83+
}
84+
})
85+
</script>
86+
</body>
87+
88+
</html>

‎02.Components/Part-2/$parent.html

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title></title>
7+
<style>
8+
#app {
9+
max-width: 640px;
10+
margin: 50px auto;
11+
}
12+
</style>
13+
</head>
14+
15+
<body>
16+
17+
<div id="app">
18+
<parent-component></parent-component>
19+
</div>
20+
21+
<template id="parent-component">
22+
<child-component></child-component>
23+
</template>
24+
25+
<template id="child-component">
26+
<h2>This is a child component</h2>
27+
<button v-on:click="showParentComponentData">显示父组件的数据</button>
28+
</template>
29+
30+
<script src="js/vue.js"></script>
31+
<script>
32+
Vue.component('parent-component', {
33+
template: '#parent-component',
34+
components: {
35+
'child-component': {
36+
template: '#child-component',
37+
methods: {
38+
showParentComponentData: function() {
39+
alert(this.$parent.msg)
40+
}
41+
}
42+
}
43+
},
44+
data: function() {
45+
return {
46+
msg: 'parent component message'
47+
}
48+
}
49+
})
50+
new Vue({
51+
el: '#app'
52+
})
53+
</script>
54+
55+
</body>
56+
57+
</html>

‎02.Components/Part-2/$ref.html

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title></title>
7+
<style>
8+
9+
#app{
10+
max-width: 640px;
11+
margin: 50px auto;
12+
}
13+
14+
</style>
15+
</head>
16+
17+
<body>
18+
19+
<div id="app">
20+
<parent-component></parent-component>
21+
</div>
22+
23+
<template id="parent-component">
24+
<child-component1 v-ref:cc1></child-component1>
25+
<child-component2 v-ref:cc2></child-component2>
26+
<button v-on:click="showChildComponentData">显示子组件的数据</button>
27+
</template>
28+
29+
<template id="child-component1">
30+
<h2>This is child component 1</h2>
31+
</template>
32+
33+
<template id="child-component2">
34+
<h2>This is child component 2</h2>
35+
</template>
36+
37+
<script src="js/vue.js"></script>
38+
<script>
39+
Vue.component('parent-component', {
40+
template: '#parent-component',
41+
components: {
42+
'child-component1': {
43+
template: '#child-component1',
44+
data: function() {
45+
return {
46+
msg: 'child component 111111'
47+
}
48+
}
49+
},
50+
'child-component2': {
51+
template: '#child-component2',
52+
data: function() {
53+
return {
54+
msg: 'child component 222222'
55+
}
56+
}
57+
}
58+
},
59+
methods: {
60+
showChildComponentData: function() {
61+
alert(this.$refs.cc1.msg);
62+
alert(this.$refs.cc2.msg);
63+
}
64+
}
65+
})
66+
67+
new Vue({
68+
el: '#app'
69+
})
70+
</script>
71+
72+
</body>
73+
74+
</html>

0 commit comments

Comments
 (0)