VUE学习笔记第二章-Vue组件化编程（尚硅谷）

纯情男高中生（183，有腹肌）

已于 2022-03-07 17:14:56 修改

阅读量339

点赞数 1

分类专栏：尚硅谷前端学习文章标签： vue.js javascript 前端

于 2021-12-26 19:11:48 首次发布

本文链接：https://blog.csdn.net/clearlove36963/article/details/122157389

版权

前端学习同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

尚硅谷

4 篇文章 0 订阅

订阅专栏

模块与组件，模块化与组件化

模块

1.理解：向外提供特定功能的js程序，一般就是作为一个js文件

2.为什么：js文件很多很复杂

3.作用：复用js，简化js的编写，提高js运行效率

组件

1.理解：用来实现局部（特定）功能效果的代码集合（html/ccss/js/image...）

2.为什么：一个界面的功能很复杂

3.作用：复用编码，简化项目编码，提高运行效率

模块化

当应用的js都以模块来编写的，那这个应用就是一个模块化的应用

组件化

当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用。

非单文件组件

基本使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>非单文件组件-基本使用</title>
		<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示</script>
		
		<!-- 
			Vue中使用组件的三大步骤：
				一、定义组件（创建组件）
				二、注册组件
				三、使用组件（写组件标签）
				
			一、如何定义一个组件？
				使用Vue.extend(options)创建，其中options和new Vue(option)时传入的那个option几乎一模一样
				但区别如下：
					1.el不要写。为什么？ ———— 最终所有的组件都会经过一个vm的管理，由vm中的el决定服务那个容器。
					2.data必须写成函数。为什么？ ———— 避免组件被复用时，数据存在引用关系
				备注：使用template可以配置组件结构。
				
			二、如何注册组件？
				1.局部注册：靠new Vue的时候传入components选项
				2.全局注册：靠Vue.component('组件名',组件)
				
			三、编写组件标签
				<school></school>
		-->
	</head>
	<body>
		<div id="root">
			<h1>{{msg}}</h1>
			<school></school>
			<hr>
			<student></student>
			<student></student>
			<hello></hello>
		</div>
		<div id="root2">
			<student></student>
			<hello></hello>
		</div>
		.
	</body>
	
	<script>
	//第一步 创建school组件
	const school = Vue.extend({
		template:`
		<div>
		<h2>学校名称：{{schoolName}}</h2>
		<h2>学校地址：{{address}}</h2>
		<button @click="showName">点我提示学校名</button>
		</div>
		`,
		//el:'#root',//组件定义时一定不要写el配置项，因为最终的所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
		    data(){
				return {
				schoolName:'中北大学',
				address:'上兰村'
			}
		},
		methods:{
			showName(){
				alert(this.schoolName)
			}
		}
	})
	
	//第一步 创建student组件
	const student = Vue.extend({
		template:`
		<div>
		<h2>学生姓名：{{studentName}}</h2>
		<h2>学生年龄：{{age}}</h2>
		</div>
		`,
		//el:'#root',//组件定义时一定不要写el配置项，因为最终的所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
		    data(){
				return {
				studentName:'yyh',
				age :18
			}
		}
	})
	
	//第一步 创建hello组件
	const hello = Vue.extend({
		template:`
		<div>
		<h2>你好啊！{{name}}</h2>
		</div>
		`,
		data(){
			return {
				name:'Tom'
			}
		}
	})
	
	//第二步，全局注册组件
	Vue.component('hello',hello)
	
	
	//创建vm
		 new Vue({
			el:'#root',
			data:{
				msg:111
			},
			//第二步 注册组件（局部注册）
			components:{
				school,
				student
			}
		})
		
		new Vue({
			el:'#root2',
			components:{
				student
			}
		})
		//使用对象这些都是连带的，x1改变了a，那么x2也会跟的一起改变，内存上指向的地址时一样的
		// let data = {
		// 	b:1,
		// 	a:2
		// }
		
		//使用函数，用函数来返回一个对象，x1的改变不会改变x2的值
		function data(){
			return {
				a:1,
				b:2
			}
		}
		
		const x1 = data()
		const x2 = data()
		
	</script>
</html>

几个注意点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>非单文件组件-几个注意点</title>
		<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示</script>
		<!-- 
			几个注意点：
				1. 关于组件名：
					一个单词组成:
						第一种写法(首字母小写)：school
						第二种写法(首字母大写)：School
					多个单词组成：
						第一种写法(kabab-case命名)：my-school
						第二种写法(CamelCase命名)：MySchool(需要Vue脚手架支持)
					备注：
						(1).组件名尽可能回避HTML中已有的元素名称，例如：h2,H2都不行
 						(2).可以使用name配置项指定组件再开发者工具中呈现的名字
						
				2.关于组件标签
					第一种写法：<school></school>
					第二种写法：<school/>
					备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。
					
				3.一个简写方式
					const school = Vue.extend(options) 可简写为：cosnt school = options
		-->
		
	</head>
	<body>
		<div id="root">
			<h1>{{msg}}</h1>
			<school1></school1>
			<school/>
			<school></school>
			<school></school>
		</div>
	</body>
	
	
	<script>
		//定义组件的标准写法
		const school = Vue.extend({
			//指定开发者工具呈现的名字
			name:'atguigu',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>
					<h2>学校地址：{{address}}</h2>
				</div>
			`,
			data(){
				return{
					name:'yyh',
					address:'北京'
				}
			}
		})
		
		//定义组件的简写方式，Vue会判断，帮助补一个Vue.extend()
		const school1 = {
			//指定开发者工具呈现的名字
			name:'atguigu1',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>
					<h2>学校地址：{{address}}</h2>
				</div>
			`,
			data(){
				return{
					name:'lwq',
					address:'北京'
				}
			}
		}
		
		new Vue({
			el:'#root',
			data:{
				msg:'欢迎学习Vue!'
			},
			components:{
				school:school  ,//可以写成school
				school1:school1
				// //组件名是多个单词的第一种写法:  'my-school':school
			}
		})
	</script>
</html>

组件的嵌套

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>非单文件组件-组件的嵌套</title>
		<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示</script>
	</head>
	<body>
		<div id="root">
			<!-- <app></app> -->
		</div>
	</body>
	
	<script>
	
	
	const Student = Vue.extend({
		name:'Suanyuhao1',
		template:`
			<div>
				<h2>学生姓名:{{name}}</h2>
				<h2>学生年龄:{{age}}</h2>
			</div>
		`,
		data(){
			return {
				name:'yyh',
				age:18
			}
		}
	})
	
		//定义School组件
		const School = Vue.extend({
			name:'yuanyuhao',
			template:`
				<div>
					<h2>学校名称:{{name}}</h2>
					<h2>学校地址:{{address}}</h2>
					<Student></Student>
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					address:'欢迎学习Vue!'
				}
			},
			components:{
				Student
			}
			
		})
		
		const hello = Vue.extend({
			template:'<h1>{{msg}}</h1>',
			data(){
				return { 
					msg:'啦啦啦啦'
				}
			}
		})
		
		//定义APP组件
		const app = Vue.extend({
			template:`
				<div>	
					<hello></hello>
					<School></School>
				</div>
			`,
			components:{
				School,
				hello
			}
		})
		
		//创建VM
		new Vue({
			template:`<app></app>`,
			el:'#root',
			//注册组件（局部）
			components:{
				app
			}
		})
	</script>
</html>

VueComponent

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>非单文件组件-VueComponent</title>
		<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示</script>
		<!-- 
			关于VueComponent:
				1. school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
				
				2. 我们只需要写<school></school>或者<school/>,Vue解析时会帮我们创建school组件的实例对象， 
				    即Vue帮我们执行的：new VueComponent(options)。
					
				3. 特别注意：每次调用Vue.extend,返回的都是一个全新的VueCompontent！！！
				
				4. 关于this指向：
					(1).组件配置中：
							data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】
					(2).new Vue()配置中：
							data函数，methods中的函数，watch中的函数，computed中的函数 它的的this军事【Vue实例对象】
				
				5.VueComponent中的实例对象，以后简称vc（也可称为：组件实例对象）
					Vue的实例对象，以后简称vm。
		-->
	</head>
	<body>
		<div id="root">
			<School></School>
			<hello></hello>
		</div>
	</body>
	<script>
	
	
		//定义School组件
		const School = Vue.extend({
			name:'yuanyuhao',
			template:`
				<div>
					<h2>学校名称:{{name}}</h2>
					<h2>学校地址:{{address}}</h2>
					<button @click="showName">点我提示学校名</button>
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					address:'欢迎学习Vue!'
				}
			},
			methods:{
				showName(){
					alert(this.name),
					console.log('showName',this)
				}
			}
		})
		
		const test = Vue.extend({
			template:`<span>atguigu</span>`
		})
		
		const hello = Vue.extend({
			template:`<div>
			<h2>{{msg}}</h2>
			<test></test>
			</div>`,
			data(){
				return {
					msg:'你好啊！'
				}
			},
			components:{test}
		})
		
		
		School.a = 99
		console.log('@',School === hello)
		console.log('#',hello.a)
		
		//创建vm
		const vm = new Vue({
				el:'#root',
				components:{School,hello}
		})
	</script>
</html>

验证vm管理的多个vc

验证每次调用Vue.extend,返回的都是一个全新的VueCompontent

一个重要的内置关系

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>非单文本组件-一个重要的内置关系</title>
		<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示</script>
		
		<!-- 
			1.一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
			2.为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性、方法
		-->
	</head>
	<body>
		<div id="root">
			<school></school>
		</div>
	</body>
	
	<!--
	<script>
	function Demo(){
		this.a = 1
		this.b = 2
	}
	//创建一个Demo的实例对象
	const d = new Demo()
	
	console.log(Demo.prototype) //显式原型属性
	
	console.log(d.__proto__)  //隐式原型属性
	
	console.log(Demo.prototype === d.__proto__)
	
	//程序员显式原型属性操作原型对象，追加一个x属性，值为99
	Demo.prototype.x = 99
	
	console.log('@',d)
	</script>
	
	-->
	
	<script>
		Vue.prototype.x = 99
	
		const school = Vue.extend({
			//指定开发者工具呈现的名字
			name:'atguigu',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>
					<h2>学校地址：{{address}}</h2>
					<button @click="showX">点我输出x</button>
				</div>
			`,
			data(){
				return{
					name:'yyh',
					address:'北京'
				}
			},
			methods:{
				showX(){
					console.log(this.x)
				}
			}
		})
		
		
		const vm = new Vue({
			el:'#root',
			data:{
				msg:'你好'
			},
			components:{
				school
			}
		})
		
		console.log(school.prototype.__proto__ === Vue.prototype)
	</script>
</html>

单文件组件

School.vue

<template>
	<!-- 组件的结构 -->
	<div class="demo">
		<h2>学校名称：{{schoolName}}</h2>
		<h2>学校地址：{{address}}</h2>
		<button @click="showName">点我提示学校名</button>
	</div>
</template>

<script>
	//组件交互相关的代码（数据，方法等等）
	
	export default{
		name:'School',//一般跟文件名保持一致
		 
		data(){
			return {
				schoolName:'尚硅谷',
				address:'北京昌平'
			}
		},
		methods:{
			showName(){
				alert(this.schoolName)
			}
		},
	}
</script>

<style>
	/* 组建的样式 */
	.demo{
		background-color: orange;
	}
</style>

Student.vue

<template>
	<div class="demo">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生年龄：{{age}}</h2>
	</div>
</template>

<script>
	export default{
		name:'Student',//一般跟文件名保持一致
		
		data(){
			return {
				name:'张三',
				age:18
			}
		},
	}
</script>

<style>
</style>

App.vue

<template>
	<div>
		<School></School>
		<Student></Student>
	</div>
</template>

<script>
	//引入组件
	import School from '/.School.vue'
	import Student from '/.Student.vue'
	export default{
		name:'App',
		components:{
			School,
			Student
		}
	}
</script>

<style>
</style>

main.js

import  App from './App.vue'

new Vue({
	el:'#root',
	template:'<App></App>'
	components:{App}
})

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习一下单文件组件的语法</title>
		<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="./main.js"></script>
		<script>Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示</script>
	</head>
	<body>
		<!-- 准备一个容器 -->
		<div id="root"><App></App></div>
	</body>
</html>