atguigu----18-组件

已于 2022-06-26 16:05:41 修改
阅读量122 收藏
点赞数
文章标签： vue
于 2022-06-24 23:57:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44235759/article/details/125454038
版权

组件

2.1 模块与组件、模块化与组件化

2.1.1. 模块

\1. 理解: 向外提供特定功能的 js 程序, 一般就是一个 js 文件

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

\3. 作用: 复用 js, 简化 js 的编写, 提高 js 运行效率

2.1.2. 组件

\1. 理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image……)

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

\3. 作用: 复用编码, 简化项目编码, 提高运行效率

2.1.3. 模块化

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

image-20220626104025686

2.1.4. 组件化

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

image-20220626104252202

2.2. 非单文件组件

\1. 模板编写没有提示

\2. 没有构建过程, 无法将 ES6 转换成 ES5

\3. 不支持组件的 CSS

\4. 真正开发中几乎不用

image-20220626105101011

基本使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>基本使用</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			Vue中使用组件的三大步骤：
					一、定义组件(创建组件)
					二、注册组件
					三、使用组件(写组件标签)

			一、如何定义一个组件？
						使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
						区别如下：
								1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
								2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
						备注：使用template可以配置组件结构。

			二、如何注册组件？
							1.局部注册：靠new Vue的时候传入components选项
							2.全局注册：靠Vue.component('组件名',组件)

			三、编写组件标签：
							<school></school>
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<hello></hello>
			<hr>
			<h1>{{msg}}</h1>
			<hr>
			<!-- 第三步：编写组件标签 -->
			<school></school>
			<hr>
			<!-- 第三步：编写组件标签 -->
			<student></student>
		</div>

		<div id="root2">
			<hello></hello>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		//第一步：创建school组件
		const school = Vue.extend({
			template:`
				<div class="demo">
					<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>
			`,
			data(){
				return {
					studentName:'张三',
					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:'你好啊！'
			},
			//第二步：注册组件（局部注册）
			components:{
				school,
				student
			}
		})

		new Vue({
			el:'#root2',
		})
	</script>
</html>

几个注意点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>几个注意点</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			几个注意点：
					1.关于组件名:
								一个单词组成：
											第一种写法(首字母小写)：school
											第二种写法(首字母大写)：School
								多个单词组成：
											第一种写法(kebab-case命名)：my-school
											第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
								备注：
										(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
										(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

					2.关于组件标签:
								第一种写法：<school></school>
								第二种写法：<school/>
								备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。

					3.一个简写方式：
								const school = Vue.extend(options) 可简写为：const school = options
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>{{msg}}</h1>
			<school></school>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		//定义组件
		const s = Vue.extend({
			name:'atguigu',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			}
		})

		new Vue({
			el:'#root',
			data:{
				msg:'欢迎学习Vue!'
			},
			components:{
				school:s
			}
		})
	</script>
</html>

组件嵌套

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <title>组件的嵌套</title>
      <!-- 引入Vue -->
      <script type="text/javascript" src="../js/vue.js"></script>
   </head>
   <body>
      <!-- 准备好一个容器-->
      <div id="root">
         
      </div>
   </body>

   <script type="text/javascript">
      Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

      //定义student组件
      const student = Vue.extend({
         name:'student',
         template:`
            <div>
               <h2>学生姓名：{{name}}</h2> 
               <h2>学生年龄：{{age}}</h2>  
            </div>
         `,
         data(){
            return {
               name:'尚硅谷',
               age:18
            }
         }
      })
      
      //定义school组件
      const school = Vue.extend({
         name:'school',
         template:`
            <div>
               <h2>学校名称：{{name}}</h2> 
               <h2>学校地址：{{address}}</h2>  
               <student></student>
            </div>
         `,
         data(){
            return {
               name:'尚硅谷',
               address:'北京'
            }
         },
         //注册组件（局部）
         components:{
            student
         }
      })

      //定义hello组件
      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 type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			关于VueComponent：
						1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

						2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，
							即Vue帮我们执行的：new VueComponent(options)。

						3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！

						4.关于this指向：
								(1).组件配置中：
											data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
								(2).new Vue(options)配置中：
											data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

						5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
							Vue的实例对象，以后简称vm。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<school></school>
			<hello></hello>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		//定义school组件
		const school = Vue.extend({
			name:'school',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<button @click="showName">点我提示学校名</button>
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			},
			methods: {
				showName(){
					console.log('showName',this)
				}
			},
		})

		const test = Vue.extend({
			template:`<span>atguigu</span>`
		})

		//定义hello组件
		const hello = Vue.extend({
			template:`
				<div>
					<h2>{{msg}}</h2>
					<test></test>	
				</div>
			`,
			data(){
				return {
					msg:'你好啊！'
				}
			},
			components:{test}
		})


		// console.log('@',school)
		// console.log('#',hello)

		//创建vm
		const vm = new Vue({
			el:'#root',
			components:{school,hello}
		})
	</script>
</html>

一个重要的内置关系

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>一个重要的内置关系</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				1.一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
				2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<school></school>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		Vue.prototype.x = 99

		//定义school组件
		const school = Vue.extend({
			name:'school',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<button @click="showX">点我输出x</button>
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			},
			methods: {
				showX(){
					console.log(this.x)
				}
			},
		})

		//创建一个vm
		const vm = new Vue({
			el:'#root',
			data:{
				msg:'你好'
			},
			components:{school}
		})

		
		//定义一个构造函数
		/* 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>
</html>

image-20220626115627344

2.3. 单文件组件

2.3.1. 一个.vue 文件的组成(3 个部分)

1. 模板页面

<template> 页面模板 </template>

2. JS 模块对象

<script> 
  export default { 
			data() {
        return {}
      }, 
      methods: {}, 
      computed: {}, 
      components: {} 
	}
</script>

3. 样式

<style> 样式定义 </style>

2.3.2. 基本使用

\1. 引入组件

\2. 映射成标签

\3. 使用组件标签

悠闲的线程池
关注
专栏目录
atguigu-springcloud2020：从尚硅谷上面学习的springcloud时所创建的代码
02-21
在【atguigu-springcloud2020】项目中，你可以找到这些核心组件的具体应用和实现。 1. **Eureka服务注册与发现**： Eureka是Spring Cloud中的服务注册与发现组件，用于管理和维护服务实例的注册信息。开发者可以将...
atguigu-springcloud:观看尚硅谷springcloud视频拿到的原始码，实现的是部门的数据库内容查询
03-23
《尚硅谷SpringCloud实战：基于atguigu-springcloud实现部门数据库查询》 SpringCloud作为微服务架构的重要组件，被广泛应用于大型分布式系统的开发中。本项目“atguigu-springcloud”是根据尚硅谷的SpringCloud...
atguigu-store 项目教程
gitblog_00424的博客
09-14 655
atguigu-store 项目教程 atguigu-store 项目地址: https://gitcode.com/gh_mirrors/at/atguigu-store ...
大数据技术之 Flink-CDC
我从不打没有准备的仗！
03-13 7026
大数据技术之 Flink-CDC
atguigu----脚手架--02-使用脚手架（2）
weixin_44235759的博客
06-30 74
props配置项 功能：让组件接收外部传过来的数据传递数据：接收数据：第一种方式（只接收）：第二种方式（限制类型）：第三种方式（限制类型、限制必要性、指定默认值）： mixin(混入) 功能：可以把多个组件共用的配置提取成一个混入对象使用方式：第一步定义混合： 第二步使用混入：全局混入： 局部混入： 插件 功能：用于增强Vue本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。定义插件： 使用插件： main.js
Spring-Boot 学习笔记
Lxd_orcl
05-05 652
一、Spring Boot 入门 1、Spring Boot 简介 简化Spring应用开发的一个框架； 整个Spring技术栈的一个大整合； J2EE开发的一站式解决方案； 2、微服务 2014，martin fowler 微服务：架构风格（服务微化） 一个应用应该是一组小型服务；可以通过HTTP的方式进行互通； 单体应用：ALL IN ONE 微服务：每一个功能元素最终都是一个可独立替换和...
Mybatis-plus
qq_45233518的博客
06-05 2777
mybatis-plus的简单笔记，根据尚硅谷视频写的
Bean注解方式---组件扫描设置
赚钱养家
11-11 289
示例1 use-default-filters=' "false"表示现在不使用默认filter,自己配置filter context:include-filter，设置扫描哪些内容 <context : component scan base package=" com. atguigu" use- -default -filters=" false" > <context: include- filter type =”annotation" ...
spring-atguigu-声明式事务---36-38
qq_28764557的博客
03-08 91
代码： ---------------------------36--------------------- @Transactional 第一步： 第二步： 第三步：配置事务管理器 ---------------------------37--------------------- 第一步： 第二步： 第三步： 第三步： 。。。。。。。 ---...
Vue-组件自定义事件
2401_84153102的博客
05-06 899
解绑自定义事件组件上也可以绑定原生DOM事件，需要使用native修饰符通过this.refxxxref.xxx.refxxxon(‘atguigu’,回调)。绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题完整案例App.vue父组件。
Spring5-入门&IOC
weixin_50281545的博客
11-14 449
Spring51.课程内容介绍以及Spring框架的概述 1.课程内容介绍以及Spring框架的概述
【谷粒商城之订单服务-RabbitMQ延时队列】
蛋饼吧的博客
05-12 1676
RabbitMQ可以对队列和消息分别设置TTL：推荐给队列设置过期时间 对队列设置就是队列没有消费者连着的保留时间，也可以对每个单独的消息做单独的设置，超过了这个时间，我们认为这个消息就死了，称之为死信； 如果队列设置了，消息也设置了，那么会取小的。所以一个消息如果被路由到不同的队列，这个消息死亡的时间有可能不一样（不同队列设置的）
atguigu_ssm_crud：Atguigu-SSM-CRUD一个最基本的CRUD系统，采用IDEA + Maven构建，采用前交叉交互功能，前端采用BootStrap + Ajax逐步请求DOM渲染，采用SpringMVC + MyBatis + Mysql8.0 + Servlet + Jsp ，符合REST风格URL规范，并加入了Hibernate提供的数据校正功能，支持PageHelper的分页功能，很适合SSM阶段性练习。同时用到了很多前端操作以及BootStrap组件，也有利于学习JS和前
02-03
SSM-CRUD（） 一，开发工具 InteliJ IDEA 2019 Maven 3.6.1 二，。功能介绍 1.增删改查 2.分页查询 3.数据校验 前端验证（JS） 初步验证（JSR303） 4. ajax 5. Rest风格URI： 使用Http协议请求方式的...三，技术支持
c#实现俄罗斯方块，面向对象实现
09-15
俄罗斯方块（Tetris）是一款经典的益智游戏，由俄罗斯程序员阿列克谢·帕基特诺夫于1984年开发。游戏的主要目标是通过旋转和移动不同形状的方块（称为“砖块”或“Tetrominoes”），将它们填充到屏幕底部的水平行中。当一行被完全填满时，该行会消失，玩家将获得积分。 游戏特点： 砖块形状：游戏中有七种不同形状的砖块，每种砖块由四个方块组成。 下落机制：砖块从屏幕顶部逐渐下落，玩家需要快速做出决策。 得分系统：消除的行越多，得分越高，连续消除多行会获得额外分数。 难度递增：随着游戏进行，砖块下落的速度会逐渐加快，增加了游戏的挑战性。 文化影响： 俄罗斯方块不仅在游戏界取得了巨大的成功，还成为了流行文化的一部分，影响了许多后续的游戏设计。它的简单性和上瘾性使其成为了历史上最畅销的电子游戏之一。 版本与平台： 自发布以来，俄罗斯方块已经在多个平台上推出，包括家用游戏机、电脑、手机等，形成了众多不同的版本和变种。
5G网络优化案例：关于解决诺基亚5G 700M站点小区闪断问题解决.pdf
09-15
这份文件是关于解决诺基亚5G 700M站点小区闪断问题的详细案例报告，主要内容和关键要点如下： 问题背景与初步分析： 问题描述：随着5G 700M网络建设的推进，诺基亚700M现网出现较多误码告警和小区闪断问题，故障比例明显高于其他厂家站点。 初步定位：通过归类法分析，发现绝大部分误码问题发生在烽火单芯双向光模块小区，占比高达95.65%。 故障根因深入探究： 光模块适配问题：初步认为烽火单纤双向光模块存在问题，但更换后问题依旧，进一步分析为光模块与诺基亚设备的适配问题。 深入测试与定位：选取5个长期误码小区进行深入分析，与烽火厂家合作对光模块进行程序升级，问题得到初步解决。 AUTOBYPASS机制分析： 机制介绍：烽火光模块采用25G模块速率兼容10G，并开启AUTOBYPASS（CPR自动旁路模式）功能。 影响分析：AUTOBYPASS机制与诺基亚设备不适配，导致交互失败和误码产生。关闭AUTOBYPASS后，CDR时钟校验和恢复周期缩短，交互频繁，误码问题消失。 解决方案与实施： 解决方案：针对所有使用此类光模块的诺基亚站点，通过优化升级烽火光模块，关闭AUTOBYPASS功
在线请假管理系统.zip
09-15
这是一个基于Python Flask的Web应用程序，采用Bulma uI框架和Postgresql数据库，用于管理和处理员工的请假事宜。用户可以通过这个系统创建安全的用户账户并登录，员工可以提交请假申请等待上级审批，并查看历史请假记录。经理可以审批或拒绝员工的请假申请，并查看团队的请假记录。此外，管理员还可以查看所有员工信息，添加新员工并分配经理，编辑和删除员工信息。该项目在heroku上托管，提供在线服务。安装步骤包括克隆项目、创建虚拟环境、激活环境并安装依赖项等。还提供了数据库迁移和初始化、运行应用程序以及数据重置等实用工具命令。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.文md件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。
performance-timing.js利用HTML5的navigation_timing_API_performance
最新发布
09-15
performance-timing.js利用HTML5的navigation_timing_API_performance-timing
ssm+mysql的小说阅读网站书城（源码+lw+ppt）
09-15
内容概要： 基于SSM框架、Java语言和MySQL数据库的小说网站。系统旨在为用户提供一个在线阅读和搜索小说的平台，支持用户注册、小说列表查看、在线支付和排行榜等功能。系统采用B/S架构，前端使用JS语言进行界面设计，后端通过SSM框架进行开发。 适用人群： 本系统适用于广大网络小说读者、作者和出版社。 使用场景及目标： 1. 读者可以通过系统在线阅读小说，搜索自己喜欢的作品。 2. 作者可以上传自己的作品，与读者互动。 3. 出版社可以通过系统发布和管理小说资源。 其它说明： 系统设计考虑了用户友好性和操作便捷性，通过技术手段确保数据安全性。系统具备良好的扩展性，可适应未来功能升级需求。通过本系统，用户可以方便地获取所需小说资源，同时作者和出版社也能有效地管理自己的作品。 关键词：小说网站；MYSQL数据库；SSM框架；JS技术
8.zabbix构建企业级监控告警平台(1).学习笔记整理分享给需要的同学
09-15
8.zabbix构建企业级监控告警平台(1).学习笔记整理分享给需要的同学
import Vue from 'vue' import App from './App.vue' import { Button,Row,DatePicker } from 'element-ui'; Vue.config.productionTip = false Vue.component('atguigu-button', Button); Vue.component('atguigu-row', Row); Vue.component('atguigu-date-picker', DatePicker); new Vue({ el:'#app', render: h => h(App), }) <atguigu-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </atguigu-row> <atguigu-date-picker type="date" placeholder="选择日期"> </atguigu-date-picker> <atguigu-row> <el-button icon="el-icon-search" circle></el-button> <el-button type="primary" icon="el-icon-s-check" circle></el-button> <el-button type="success" icon="el-icon-check" circle></el-button> <el-button type="info" icon="el-icon-message" circle></el-button> <el-button type="warning" icon="el-icon-star-off" circle></el-button> <el-button type="danger" icon="el-icon-delete" circle></el-button> </atguigu-row> 页面没有样式效果,可能是什么原因
06-03
这段代码中引入了 Element UI 的 Button、Row 和 DatePicker 组件，但是没有引入相应的样式文件。Element UI 的组件需要对应的样式文件才能正常显示样式效果。你需要在代码中引入 Element UI 的样式文件，可以在 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

悠闲的线程池

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值