【Vue】学习笔记-组件化编程

news2024/12/23 12:41:08

学习笔记-组件化编程

  • 模块与组件、模块化与组件化
  • 非单文件组件
    • 基本使用
    • 组件注意事项
    • 组件的嵌套
    • VueComponent
    • 一个重要的内置关系
  • 单文件组件

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

在这里插入图片描述
在这里插入图片描述
模块
a.理解：向外提供特定功能的js程序，一般就是一个js文件
b.为什么：js文件很多很复杂
c.作用：复用、简化js的编写，提高js运行效率
组件
a.定义：用来实现局部功能的代码和资源的集合(html/css/js/image…)
b.为什么：一个界面的功能很复杂
c.作用:复用编码，简化项目编码，提高运行效率
模块化
当应用中的js都以模块来编写的，那这个应用就是一个模块化的应用
组件化
当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用

非单文件组件

非单文件组件：一个文件中包含有n个组件
单文件组件：一个文件中只包含有1个组件

基本使用

vue中使用组件的三大步骤
1. 定义组件
- 使用vue.extend(options) 创建，其中options和*new Vue(options)时传入的options几乎一样，但也有点区别
a.el 不要写，以为最终所有的组件都要经过一个vm的管理，由vm中的el才决定哪个容器
b.data 必须要写成函数，避免组件被复用时，数据存在引用关系
2. 注册组件
a. 局部注册： new Vue()的时候options传入components选项
b.全局注册： Vue.component(‘组件名’,组件)
3. 使用组件
编写组件标签如***

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>基本使用</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<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>

在这里插入图片描述

组件注意事项

关于组件名

  • 一个单词组成
    第一种写法(首字母小写):school
    第二种写法(首字母大写):school
  • 多个单词组成
    第一种写法(kebab-case 命名): my-school
    第二种写法(CamelCase 命名): MySchool(需要Vue脚手架支持)
  • 备注
    组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行
    可以使用name配置项指定组件在开发者工具中呈现的名字
    关于组件标签
  • 第一种写法：
  • 第二种写法：(需要vue脚手架支持)
  • 备注：不使用脚手架时，会导致后续组件不能渲染
    一个简单方式：const school= **Vue.extend(options)**可简写为const school=options,因为父组件components 引入的时候会自动创建
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>几个注意点</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<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

关于VueComponent

  1. school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

  2. 我们只需要写**或**，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。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>VueComponent</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<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>

在这里插入图片描述

一个重要的内置关系

在这里插入图片描述

  1. 一个重要的内置关系：VueComponent.prototype.proto === Vue.prototype
  2. 为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。
<!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">
			<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>

单文件组件

  • School.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>
  • student.vue
<template>
	<div>
		<h2>学生姓名：{{name}}</h2>
		<h2>学生年龄：{{age}}</h2>
	</div>
</template>

<script>
	 export default {
		name:'Student',
		data(){
			return {
				name:'张三',
				age:18
			}
		}
	}
</script>
  • 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>
  • 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>
	</head>
	<body>
		<!-- 准备一个容器 -->
		<div id="root"></div>
		<!-- <script type="text/javascript" src="../js/vue.js"></script> -->
		<!-- <script type="text/javascript" src="./main.js"></script> -->
	</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/454616.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

实验8---SpringMVC基础

实验8---SpringMVC基础

实验八 SpringMVC基础 一、实验目的及任务 通过该实验&#xff0c;掌握SpringMVC框架搭建步骤&#xff0c;掌握SpringMVC控制器的编写方法以及与spring依赖注入结合方法。 二、实验环境及条件 主机操作系统为Win10&#xff0c;Tomcat,j2sdk1.6或以上版本。 三、实验实施…
阅读更多...
使用Linux运维常识

使用Linux运维常识

一.基础操作 1.终端常用快捷键 快捷键描述ctrl键盘左键向左跳一个单词ctrl键盘右键向右跳一个单词Ctrl c停止当前正在运行的命令。Ctrl z将当前正在运行的命令放入后台并暂停它的进程。Ctrl d关闭当前终端会话。Ctrl l清屏&#xff0c;也可以用clear命令实现Tab自动补全当…
阅读更多...
倾斜摄影超大场景的三维模型转换3DTILES格式有哪些好处？

倾斜摄影超大场景的三维模型转换3DTILES格式有哪些好处？

倾斜摄影超大场景的三维模型转换3DTILES格式有哪些好处&#xff1f; 倾斜摄影超大场景的三维模型转换到3D Tiles格式有以下几个好处&#xff1a; 1、数据存储效率高&#xff1a;3D Tiles是一种高效的地理数据存储格式&#xff0c;能够将大规模的倾斜摄影三维模型数据分块存储…
阅读更多...
Hive312的计算引擎由MapReduce(默认)改为Spark（亲测有效）

Hive312的计算引擎由MapReduce(默认)改为Spark（亲测有效）

一、Hive引擎包括&#xff1a;默认MR、tez、spark 在低版本的hive中&#xff0c;只有两种计算引擎mr, tez 在高版本的hive中&#xff0c;有三种计算引擎mr, spark, tez 二、Hive on Spark和Spark on Hive的区别 Hive on Spark&#xff1a;Hive既存储元数据又负责SQL的解析&…
阅读更多...
【Linux】生产者消费者模型——环形队列RingQueue（信号量）

【Linux】生产者消费者模型——环形队列RingQueue（信号量）

文章目录 铺垫信号量信号量概念信号量PV操作信号量基本接口 环形队列的生产消费模型引入环形队列访问环形队列代码实现代码改造多生产者多消费者代码 总结 铺垫 之前写的代码是存在不足的地方的&#xff1a; 我们使用线程操作临界资源的时候要先去判断临界资源是否满足条件&am…
阅读更多...
QoS部署

QoS部署

1.总部和分部之间视频出现花屏，语音图像不同步的现象是有哪些原因导致的？ 如图所示总部和分部之间的流量有FTP数据流量、视频流量和语音流量。如果在总部和分部之间的这几类流量没有做QoS部分或者优先级的区分，那么这些流量基于默认的无差别的流量策略去竞争带宽，如果FTP数…
阅读更多...
暴躁兔分享：火爆圈子的XEN，我们如何吃到一波红利的

暴躁兔分享：火爆圈子的XEN，我们如何吃到一波红利的

这周沉闷的熊市突然冲出一个XEN项目。 在这个项目上我们经历了拿到消息&#xff0c;看不懂不做&#xff0c;获取新的信息&#xff0c;发现可以搞&#xff0c;冲的这么一个过程。虽然由于信息查和认知差没有吃到最早拿到信息那波的利润&#xff0c;但是通过分析也跟着喝了一点汤…
阅读更多...
网页源代码检查时隐藏 WebSocket 的后端地址

网页源代码检查时隐藏 WebSocket 的后端地址

背景 近期在自研如何通过 OpenAI 实现 与ChatGPT 官网一样的聊天对话效果。 用到了 html5websocketpython 三项技术 , 于是用一天时间自学了一下这方面技术。 当实现了功能之后&#xff0c;就得考虑安全问题&#xff1a; 在用 html5 实现与 websocket 通讯时&#xff0c;如何保…
阅读更多...
管理后台项目-05-SKU列表-上下架-详情抽屉效果-深度选择器

管理后台项目-05-SKU列表-上下架-详情抽屉效果-深度选择器

目录 1-SKU列表 2-SKU上下架 3-SKU详情 1-SKU列表 当用户点击Sku管理&#xff0c;组件挂载的时候&#xff0c;我们需要获取sku列表信息&#xff1b;但是获取列表方法在分页列表改变页码和每页显示大小的时候也需要触发&#xff0c;我们封装为一个方法。 //sku列表的接口 /adm…
阅读更多...
Elasticsearch聚合、自动补全 | 黑马旅游

Elasticsearch聚合、自动补全 | 黑马旅游

一、数据聚合 1、聚合的分类 聚合&#xff08;aggregations&#xff09;可以实现对文档数据的统计、分析、运算。 聚合常见有三类&#xff1a; 桶聚合 Bucket&#xff1a;对文档数据分组&#xff0c;并统计每组数量 TermAggregation&#xff1a;按照文档字段值分组&#xf…
阅读更多...
中国电子学会2023年03月青少年软件编程Scratch图形化等级考试试卷二级真题(含答案)

中国电子学会2023年03月青少年软件编程Scratch图形化等级考试试卷二级真题(含答案)

中国电子学会2023年03月青少年软件编程Scratch图形化等级考试试卷二级 1.小猫的程序如图所示&#xff0c;积木块的颜色与球的颜色一致。点击绿旗执行程序后&#xff0c;下列说法正确的是&#xff1f;&#xff08;C&#xff09;&#xff08;2分&#xff09; A.小猫一直在左右移…
阅读更多...
JDBC详解（二）：获取数据库连接（超详解）

JDBC详解（二）：获取数据库连接（超详解）

JDBC详解&#xff08;二&#xff09;&#xff1a;获取数据库连接 前言一、要素一&#xff1a;Driver接口实现类1、Driver接口介绍2、加载与注册JDBC驱动 二、要素二&#xff1a;URL三、要素三&#xff1a;用户名和密码四、数据库连接方式举例4.1 连接方式一4.2 连接方式二4.3 连…
阅读更多...
15天学习MySQL计划-数据库引擎（进阶篇）第六天

15天学习MySQL计划-数据库引擎（进阶篇）第六天

15天学习MySQL计划-数据库引擎&#xff08;进阶篇&#xff09;第六天 1.数据库引擎 1.MySQL体系结构 连接层服务层引擎层存储层 2.存储引擎 存储引擎简介 ​ 1.概述 ​ 存储引擎就是存储数据&#xff0c;建立索引&#xff0c;更新/查询数据等技术的实现方式。存储引擎是基…
阅读更多...
android ANativeWindow surface显示

android ANativeWindow surface显示

前言 最近做车机camera 倒车影像问题&#xff0c;需要通过c调用camera&#xff0c;并显示在android ui界面之上。 最终效果图 代码实现 Android.bp cc_binary {name: "stest",vendor: true,srcs: ["main.cpp"],shared_libs: ["libcutils",&q…
阅读更多...
Android入门基础教程

Android入门基础教程

第1章 Android Studio运行第一个程序 1.1 Android Studio下载&#xff1a; 1.1.1 Android开发者官网&#xff1a; https://developer.android.google.cn ​ 1.1.2 下载Android Studio开发者工具&#xff1a; 进入Android开发者官网&#xff1b;找到Android Studio工具下载页…
阅读更多...
【LeetCode刷题笔记】反转链表、移除链表元素、两两交换链表中的节点、删除链表的倒数第N个结点

【LeetCode刷题笔记】反转链表、移除链表元素、两两交换链表中的节点、删除链表的倒数第N个结点

&#x1f4dd;个人主页&#xff1a;爱吃炫迈 &#x1f48c;系列专栏&#xff1a;数据结构与算法 &#x1f9d1;‍&#x1f4bb;座右铭&#xff1a;道阻且长&#xff0c;行则将至&#x1f497; 文章目录 反转链表移除链表元素两两交换链表中的节点删除链表的倒数第 N 个结点&…
阅读更多...
脉搏波信号去噪方法

脉搏波信号去噪方法

一、引言 脉搏波信号是血管中血液流动产生的振动信号&#xff0c;反映了血管的弹性特性和血流动力学信息。由于其丰富的生理信息&#xff0c;脉搏波信号在诊断和监测心血管疾病、神经系统疾病等方面具有重要意义。然而&#xff0c;原始脉搏波信号往往受到生理干扰、环境噪声等…
阅读更多...
人工智能在心电信号的心律失常应用

人工智能在心电信号的心律失常应用

心律失常是一种常见的心脏疾病&#xff0c;它会导致心脏跳动不规律&#xff0c;严重的甚至会引发心脏骤停。传统的心律失常诊断方法是通过心电图对心律失常进行分析&#xff0c;但是这种方法需要医生具备专业的知识和经验&#xff0c;而且容易出现误诊。而人工智能技术可以对心…
阅读更多...
倾斜摄影三维模型OSGB格式转换3DTILES的关键技术浅析

倾斜摄影三维模型OSGB格式转换3DTILES的关键技术浅析

倾斜摄影三维模型OSGB格式转换3DTILES的关键技术浅析 将三维模型从OSGB格式转换为3DTILES格式需要掌握以下关键技术&#xff1a; 1、数据结构转换&#xff1a;OSGB格式和3DTILES格式采用了不同的数据结构&#xff0c;因此需要进行数据结构转换。OSGB格式采用了分层划分数据结构…
阅读更多...
D3.js(3) path/折线图

D3.js(3) path/折线图

一、概念 path 元素是用来绘制各种形状&#xff08;例如线条、曲线、弧形、圆弧等&#xff09;的元素。path 元素的 d 属性用来定义绘制的路径。具体来说&#xff0c;d 属性是一个字符串&#xff0c;包含一系列的命令和参数&#xff0c;用来描述路径的形状。 1.1 d属性 Mmov…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023