Vue.js component tutorial part-2 source code, based on Vue.js v1.0.25

XitangChen · Jul 3, 2016 · 942859e · 942859e
1 parent 29b24ef
commit 942859e
Show file tree

Hide file tree

Showing 27 changed files with 13,560 additions and 0 deletions.
diff --git a/02.Components/Part-2/$broadcast.html b/02.Components/Part-2/$broadcast.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+
+	<head>
+		<meta charset="UTF-8">
+		<title></title>
+		<style>
+
+			*{
+				font-family: simhei;
+			}
+
+			#app {
+				max-width: 640px;
+				margin: 50px auto;
+			}
+
+			.parent-content,
+			.child-content {
+				height: 150px;
+				padding: 20px;
+			}
+
+			.parent-content {
+				border: 1px solid #0090D3;
+				margin-bottom: 20px;
+			}
+
+			.child-content {
+				border: 1px solid #ff0066;
+			}
+		</style>
+	</head>
+
+	<body>
+
+		<div id="app">
+			<div class="parent-content">
+				<h2>父组件内容：</h2>
+				<input v-model="msg" />
+				<button v-on:click="notify">Broadcast Event</button>
+			</div>
+
+			<child-component></child-component>
+		</div>
+
+		<template id="child-component">
+			<div class="child-content">
+				<h2>子组件内容：</h2>
+				<ul>
+					<li v-for="item in messages">
+						父组件录入了信息：{{ item }}
+					</li>
+				</ul>
+			</div>
+
+		</template>
+
+		<script src="js/vue.js"></script>
+		<script>
+			// 注册子组件
+			Vue.component('child-component', {
+					template: '#child-component',
+					data: function() {
+						return {
+							messages: []
+						}
+					},
+					events: {
+						'parent-msg': function(msg) {
+							this.messages.push(msg)
+						}
+					}
+				})
+				// 初始化父组件
+			new Vue({
+				el: '#app',
+				data: {
+					msg: ''
+				},
+				methods: {
+					notify: function() {
+						if (this.msg.trim()) {
+							this.$broadcast('parent-msg', this.msg)
+						}
+					}
+				}
+			})
+		</script>
+	</body>
+
+</html>
diff --git a/02.Components/Part-2/$children.html b/02.Components/Part-2/$children.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+
+	<head>
+		<meta charset="UTF-8">
+		<title></title>
+		<style>
+
+			#app{
+				max-width: 640px;
+				margin: 50px auto;
+			}
+
+		</style>
+	</head>
+
+	<body>
+
+		<div id="app">
+			<parent-component></parent-component>
+		</div>
+
+		<template id="parent-component">
+			<child-component1></child-component1>
+			<child-component2></child-component2>
+			<button v-on:click="showChildComponentData">显示子组件的数据</button>
+		</template>
+
+		<template id="child-component1">
+			<h2>This is child component 1</h2>
+		</template>
+
+		<template id="child-component2">
+			<h2>This is child component 2</h2>
+		</template>
+
+		<script src="js/vue.js"></script>
+		<script>
+			Vue.component('parent-component', {
+				template: '#parent-component',
+				components: {
+					'child-component1': {
+						template: '#child-component1',
+						data: function() {
+							return {
+								msg: 'child component 111111'
+							}
+						}
+					},
+					'child-component2': {
+						template: '#child-component2',
+						data: function() {
+							return {
+								msg: 'child component 222222'
+							}
+						}
+					}
+				},
+				methods: {
+					showChildComponentData: function() {
+						for (var i = 0; i < this.$children.length; i++) {
+							alert(this.$children[i].msg)
+						}
+					}
+				}
+			})
+
+			new Vue({
+				el: '#app'
+			})
+		</script>
+
+	</body>
+
+</html>
diff --git a/02.Components/Part-2/$dispatch.html b/02.Components/Part-2/$dispatch.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+
+	<head>
+		<meta charset="UTF-8">
+		<title></title>
+		<style>
+			* {
+				font-family: simhei;
+			}
+
+			#app {
+				max-width: 640px;
+				margin: 50px auto;
+			}
+
+			.parent-content,
+			.child-content {
+				height: 150px;
+				padding: 20px;
+			}
+
+			.parent-content {
+				border: 1px solid #0090D3;
+				margin-bottom: 20px;
+			}
+
+			.child-content {
+				border: 1px solid #ff0066;
+			}
+		</style>
+	</head>
+
+	<body>
+
+		<div id="app">
+			<div class="parent-content">
+				<h2>父组件内容</h2>
+				<p>Messages: {{ messages | json }}</p>
+			</div>
+
+			<child-component></child-component>
+		</div>
+
+		<template id="child-component">
+			<div class="child-content">
+				<h2>子组件内容</h2>
+				<input v-model="msg" />
+				<button v-on:click="notify">Dispatch Event</button>
+			</div>
+		</template>
+
+		<script src="js/vue.js"></script>
+		<script>
+			// 注册子组件
+			Vue.component('child-component', {
+				template: '#child-component',
+				data: function() {
+					return {
+						msg: ''
+					}
+				},
+				methods: {
+					notify: function() {
+						if (this.msg.trim()) {
+							this.$dispatch('child-msg', this.msg)
+							this.msg = ''
+						}
+					}
+				}
+			})
+
+			// 初始化父组件
+			new Vue({
+				el: '#app',
+				data: {
+					messages: []
+				},
+				events: {
+					'child-msg': function(msg) {
+						this.messages.push(msg)
+					}
+				}
+			})
+		</script>
+	</body>
+
+</html>
diff --git a/02.Components/Part-2/$parent.html b/02.Components/Part-2/$parent.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+
+	<head>
+		<meta charset="UTF-8">
+		<title></title>
+		<style>
+			#app {
+				max-width: 640px;
+				margin: 50px auto;
+			}
+		</style>
+	</head>
+
+	<body>
+
+		<div id="app">
+			<parent-component></parent-component>
+		</div>
+
+		<template id="parent-component">
+			<child-component></child-component>
+		</template>
+
+		<template id="child-component">
+			<h2>This is a child component</h2>
+			<button v-on:click="showParentComponentData">显示父组件的数据</button>
+		</template>
+
+		<script src="js/vue.js"></script>
+		<script>
+			Vue.component('parent-component', {
+				template: '#parent-component',
+				components: {
+					'child-component': {
+						template: '#child-component',
+						methods: {
+							showParentComponentData: function() {
+								alert(this.$parent.msg)
+							}
+						}
+					}
+				},
+				data: function() {
+					return {
+						msg: 'parent component message'
+					}
+				}
+			})
+			new Vue({
+				el: '#app'
+			})
+		</script>
+
+	</body>
+
+</html>
diff --git a/02.Components/Part-2/$ref.html b/02.Components/Part-2/$ref.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+
+	<head>
+		<meta charset="UTF-8">
+		<title></title>
+		<style>
+
+			#app{
+				max-width: 640px;
+				margin: 50px auto;
+			}
+
+		</style>
+	</head>
+
+	<body>
+
+		<div id="app">
+			<parent-component></parent-component>
+		</div>
+
+		<template id="parent-component">
+			<child-component1 v-ref:cc1></child-component1>
+			<child-component2 v-ref:cc2></child-component2>
+			<button v-on:click="showChildComponentData">显示子组件的数据</button>
+		</template>
+
+		<template id="child-component1">
+			<h2>This is child component 1</h2>
+		</template>
+
+		<template id="child-component2">
+			<h2>This is child component 2</h2>
+		</template>
+
+		<script src="js/vue.js"></script>
+		<script>
+			Vue.component('parent-component', {
+				template: '#parent-component',
+				components: {
+					'child-component1': {
+						template: '#child-component1',
+						data: function() {
+							return {
+								msg: 'child component 111111'
+							}
+						}
+					},
+					'child-component2': {
+						template: '#child-component2',
+						data: function() {
+							return {
+								msg: 'child component 222222'
+							}
+						}
+					}
+				},
+				methods: {
+					showChildComponentData: function() {
+						alert(this.$refs.cc1.msg);
+						alert(this.$refs.cc2.msg);
+					}
+				}
+			})
+
+			new Vue({
+				el: '#app'
+			})
+		</script>
+
+	</body>
+
+</html>