更新

tianyucoder · tianyucoder · commit c62b4a0ab4bd · 2021-01-16T14:42:22.000+08:00
diff --git a/18_组件_非单文件/非单文件组件.html b/18_组件_非单文件/非单文件组件.html
@@ -16,12 +16,15 @@
 		-->
 		<!-- 准备好一个容器-->
 		<div id="root">
-			<Hello></Hello>
-			<School></School>
+			<App></App>
 		</div>
 
 		<script type="text/javascript" >
 			Vue.config.productionTip = false //关闭生产提示
+
+			//向Vue的原型对象上追加一个xyz属性，值为1
+			Vue.prototype.xyz = 1
+
 			/* 
 				定义一个School组件：
 					1.如何定义一个组件？-- 使用Vue.extend(options)去创建
@@ -40,43 +43,56 @@
 							(2).Vue.extend调用的返回值是VueComponent构造函数，所以new School其实就是在new VueComponent。
 							(3).所谓组件实例，就是VueComponent创建的实例，简称vc。
 									所有Vue实例，就是Vue创建的实例，简称vm
+							(4).组件的data函数、以及methods中配置的函数中this都是vc
 					6.一个最最最重要的关系：
 							VueComponent继承了Vue，所以Vue.prototype上的属性和方法，vc都能看得见
 			*/
-			
 			const School = Vue.extend({
 				//data中存放组件所需数据
 				data(){ 
+					console.log('@',this)
 					return {
 						name:'尚硅谷',
 						address:'北七家镇-宏福科技园'
 					}
 				},
+				methods: {
+					showAddress(){
+						console.log(this.address)
+					}
+				},
 				//template中配置组件的模板结构
 				template:`
 					<div>
-						<h2>学校名：{{name}}</h2>
-						<h2>学校地址：{{address}}</h2>	
+						<h2 class="title">学校名：{{name}}</h2>
+						<h2 @click="showAddress">学校地址：{{address}}</h2>	
 					</div>
 				`
 			})
-			Vue.prototype.xyz = 1
+			
 			//定义个Hello组件
 			const Hello = Vue.extend({
 				template:`<h2>Hello</h2>`
 			})
 
+			const App = Vue.extend({
+				components:{School,Hello},
+				template:`
+					<div>
+						<Hello/>
+						<School/>
+					</div>
+				`
+			})
+
 			//注册School组件----全局注册
 			// Vue.component('School',School)
 			
 			//定义一个vm，去管理所有的组件
 			const vm = new Vue({
 				el:'#root',
 				//注册School组件----局部注册----以后工作用的多
-				components:{
-					School,
-					Hello
-				}
+				components:{App}
 			})
 		</script>
 	</body>
diff --git a/19_组件_单文件组件/App.vue b/19_组件_单文件组件/App.vue
@@ -0,0 +1,22 @@
+/* 配置组件的结构 */
+<template>
+	<div>
+		<h2>我是App，我有一台{{car}}</h2>
+		<School/>
+	</div>
+</template>
+
+/* 配置组件数据、交互、事件等等*/
+<script>
+	//引入School组件
+	import School from './components/School'
+
+	export default {
+		data(){
+			return {
+				car:'马自达阿特兹'
+			}
+		},
+		components:{School},
+	}
+</script>
diff --git a/19_组件_单文件组件/components/School.vue b/19_组件_单文件组件/components/School.vue
@@ -0,0 +1,40 @@
+/* 
+	较真来讲：当前的这个.vue文件，并不是一个组件，而是一个组件的所有配置
+ */
+
+/* 配置组件模板结构 */
+<template>
+	<div>
+		<h2 class="title" class="title">学校名：{{name}}</h2>
+		<h2 class="info" @click="showAddress">学校地址：{{address}}</h2>	
+	</div>
+</template>
+
+/* 配置组件数据、交互、事件等等 */
+<script>
+	//此处只是暴露了一个组件的配置，并没有去创建组件，因为没有调用Vue.extend
+	export default {
+		//data中存放组件所需数据
+		data(){ 
+			return {
+				name:'尚硅谷',
+				address:'北七家镇-宏福科技园'
+			}
+		},
+		methods:{
+			showAddress(){
+				alert(this.address)
+			}
+		}
+	}
+</script>	
+
+/* 配置组件样式 */
+<style>
+	.title{
+		background-color: orange;
+	}
+	.info{
+		background-color: pink;
+	}
+</style>
diff --git a/19_组件_单文件组件/index.html b/19_组件_单文件组件/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8" />
+		<title></title>
+		<script type="text/javascript" src="../js/vue.js"></script>
+	</head>
+	<body>
+		<!-- 准备好一个容器-->
+		<div id="root">
+			<App/>
+		</div>
+
+		<script type="text/javascript" >
+			import App from './App.vue'
+
+			new Vue({
+				components:{App}
+			}).$mount('#root')
+		</script>
+	</body>
+</html>
