Vue | （二）Vue组件化编程 | 尚硅谷Vue2.0+Vue3.0全套教程

news2025/1/13 7:41:28

文章目录

  • 📚模块与组件、模块化与组件化
  • 📚非单文件组件
    • 🐇基本使用
    • 🐇关于组件的几个注意点
    • 🐇组件的嵌套
  • 📚单文件组件
    • 🐇一个.vue 文件的组成
    • 🐇实例

学习链接：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通，本文对应p53-p60，博客参考尚硅谷公开笔记，补充记录实操。

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

  • ⭐️模块
    1. 理解: 向外提供特定功能的 js 程序, 一般就是一个 js 文件。
    2. 为什么: js 文件很多很复杂。
    3. 作用: 复用 js, 简化 js 的编写, 提高 js 运行效率。
  • ⭐️组件
    1. 理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image……)
    2. 为什么: 一个界面的功能很复杂
    3. 作用: 复用编码, 简化项目编码, 提高运行效率
  • ⭐️模块化、组件化
    1. 模块化：当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。
    2. 组件化：当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用。

在这里插入图片描述

在这里插入图片描述在这里插入图片描述

📚非单文件组件

  • 非单文件组件：一个文件中包含有n个组件。

🐇基本使用

  • Vue中使用组件的三大步骤：

    • 1.【定义】组件(创建组件)
    • 2.【注册】组件
    • 3.【使用】组件(写组件标签)

  • 如何定义一个组件？

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

  • 如何注册组件？

    • 局部注册：靠new Vue的时候传入components选项
    • 全局注册：靠Vue.component('组件名',组件)

  • 编写组件标签：<school></school>

    <!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>
			`,
			data(){
				return {
					schoolName:'哔哩哔哩',
					address:'bilibili'
				}
			},
			methods: {
				showName(){
					alert(this.schoolName)
				}
			},
		})

		//第一步：创建student组件
		const student = Vue.extend({
			template:`
				<div>
					<h2>学生姓名：{{studentName}}</h2>
					<h2>学生年龄：{{age}}</h2>
				</div>
			`,
			data(){
				return {
					studentName:'啦啦右一',
					age:20
				}
			}
		})
		
		//第一步：创建hello组件
		const hello = Vue.extend({
			template:`
				<div>	
					<h2>你好啊！{{name}}</h2>
				</div>
			`,
			data(){
				return {
					name:'youyi'
				}
			}
		})
		
		//第二步：全局注册组件
		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脚手架支持，不然会报错)
    • 备注：
      • (1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
      • (2).可以使用name配置项指定组件在开发者工具中呈现的名字。
  • 关于组件标签：
    • 第一种写法：<school></school>
    • 第二种写法：<school/>
    • 备注：不使用脚手架时，<school/>会导致后续组件不能渲染。
  • 一个简写方式：const school = Vue.extend(options)可简写为const school = options

🐇组件的嵌套

在这里插入图片描述

<!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 
		//定义student组件
		const student = Vue.extend({
			name:'student',
			template:`
				<div>
					<h2>学生姓名：{{name}}</h2>	
					<h2>学生年龄：{{age}}</h2>	
				</div>
			`,
			data(){
				return {
					name:'lalayouyi',
					age:20
				}
			}
		})
		
		//定义school组件
		const school = Vue.extend({
			name:'school',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<student></student>
				</div>
			`,
			data(){
				return {
					name:'哔哩哔哩',
					address:'bilibili'
				}
			},
			//注册组件（局部）
			components:{
				// 注册给谁就去哪里写
				student
			}
		})

		//定义hello组件
		const hello = Vue.extend({
			template:`<h1>{{msg}}</h1>`,
			data(){
				return {
					msg:'今天也在快乐学习————'
				}
			}
		})
		
		//定义app组件（管理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
    1. school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
    2. 我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。
    3. 特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！
    4. 关于this指向：
      • 组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是VueComponent实例对象。
      • new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是Vue实例对象。
    5. VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
    6. Vue的实例对象，以后简称vm。
  • 🔥一个重要的内置关系
    1. 一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
    2. 为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。
      在这里插入图片描述
  • 多文件组件缺点
    1. 模板编写没有提示。
    2. 没有构建过程, 无法将 ES6 转换成 ES5。
    3. 不支持组件的 CSS。
    4. 真正开发中几乎不用。

📚单文件组件

  • 单文件组件：一个文件中包含有1个组件。

🐇一个.vue 文件的组成

  1. 模板页面
    <template>
	页面模板
</template>
  2. JS 模块对象
    <script>
export default {
	data(){return {}}, 
	methods: {}, 
	computed: {}, 
	components: {}
}
</script>
  3. 样式
    <style>
	样式定义
</style>

🐇实例

  • 插件安装（Vue高亮显示）
    在这里插入图片描述
  • 快捷键：<v + 回车，快速创建框架
    在这里插入图片描述
  • School.vue
    <template>
	<div class="demo">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
		<button @click="showName">点我提示学校名</button>	
	</div>
</template>

<script>
	 export default {
	 	// 最好和文件名保持一致
		name:'School',
		data(){
			return {
				name:'哔哩哔哩',
				address:'bilibili'
			}
		},
		methods: {
			showName(){
				alert(this.name)
			}
		},
	}
</script>

<style>
	.demo{
		background-color: orange;
	}
</style>
  • Student.vue
    <template>
	<div>
		<h2>学生姓名：{{name}}</h2>
		<h2>学生年龄：{{age}}</h2>
	</div>
</template>

<script>
	 export default {
		name:'Student',
		data(){
			return {
				name:'lalayouyi',
				age:20
			}
		}
	}
</script>
  • App.vue（必须有）
    <template>
	<!-- 要加一个div包裹 -->
	<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>
    • 但是浏览器不能直接支持ES6的模块化语法——需要【脚手架】👀。
      在这里插入图片描述
    • 详见下文…

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

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

相关文章

多线程、分布式运行用例

多线程、分布式运行用例

python多线程 threading模块 多线程实例 # -*- coding: utf-8 -*- # Time : 2024/2/7 15:50 # Author : 居里夫人吃橘子 # File : class01.py # Software: PyCharm import threading from time import sleepdef run(name):print(name 该起床了)sleep(2)print(name …
阅读更多...
EXCEL使用VBA一键批量转换成PDF

EXCEL使用VBA一键批量转换成PDF

EXCEL使用VBA一键批量转换成PDF 上图是给定转换路径 Sub 按钮1_Click() Dim a(1 To 1000) As String Dim a2 As String Dim myfile As String Dim wb As Workbook a2 Trim(Range("a2"))myfile Dir(a2 & "\" & "*.xls")k 0Do While m…
阅读更多...
【LeetCode】树的BFS（层序遍历）精选6题

【LeetCode】树的BFS（层序遍历）精选6题

目录 1. N 叉树的层序遍历&#xff08;中等&#xff09; 2. 二叉树的锯齿形层序遍历&#xff08;中等&#xff09; 3. 二叉树的最大宽度&#xff08;中等&#xff09; 4. 在每个树行中找最大值&#xff08;中等&#xff09; 5. 找树左下角的值&#xff08;中等&#xff09…
阅读更多...
2024.2.20

2024.2.20

使用多进程完成两个文件的拷贝&#xff0c;父进程拷贝前一半&#xff0c;子进程拷贝后一半&#xff0c;父进程回收子进程的资源 #include<myhead.h> int main(int argc, const char *argv[]) {char str[100]"";puts("please input str:");//从终端读…
阅读更多...
手动实现new操作符

手动实现new操作符

<script>//前置知识// 每一个函数在创建之初就会有一个prototype属性&#xff0c;这个属性指向函数的原型对象// function abc(){// }// abc.prototype--> {constructor: f}// 在JS中任意的对象都有内置的属性叫做[[prototype]]这是一个私有属性&#xff0c;这个私有属…
阅读更多...
GEE数据集——美国两个主要石油和天然气（OG）产区内与石油和天然气（OG）相关的基础设施的位置

GEE数据集——美国两个主要石油和天然气（OG）产区内与石油和天然气（OG）相关的基础设施的位置

该数据集提供了美国两个主要石油和天然气&#xff08;O&G&#xff09;产区内与石油和天然气&#xff08;O&G&#xff09;相关的基础设施的位置&#xff1a;德克萨斯州西部和新墨西哥州南部二叠纪盆地的特拉华子盆地以及犹他州的乌因塔盆地。前言 – 人工智能教程 石油…
阅读更多...
deep learning 代码笔记

deep learning 代码笔记

1. pandas数据读取和预处理 # import pandas and load dataset import pandas as pd names [Sex, Length, Diameter, Height, Whole_weight, Shucked_weight, Viscera_weight, Shell_weight, Rings] data pd.read_csv(data_file, headerNone, namesnames) print(data) …
阅读更多...
【前沿】头戴式光场显示技术研究进展

【前沿】头戴式光场显示技术研究进展

摘要&#xff1a;光场显示器旨在通过重建三维场景在不同方向发出的几何光线来渲染三维场景的视觉感知&#xff0c;从而为人的视觉系统提供自然舒适的视觉体验&#xff0c;解决传统平面立体三维显示器中的聚散调节冲突问题。近年来&#xff0c;多种光场显示方法被尝试应用到头戴…
阅读更多...
沁恒CH32V30X学习笔记11---使用外部时钟模式2采集脉冲计数

沁恒CH32V30X学习笔记11---使用外部时钟模式2采集脉冲计数

使用外部时钟模式2采集脉冲计数 使用外部触发模式 2 能在外部时钟引脚输入的每一个上升沿或下降沿计数。将 ECE 位置位时，将使用外部时钟源模式 2。使用外部时钟源模式 2 时，ETRF 被选定为 CK_PSC。ETR 引脚经过可选的反相器（ETP），分频器（ETPS）后成为 ETRP，再经过滤波…
阅读更多...
Stable Diffusion——stable diffusion基础原理详解与安装秋叶整合包进行出图测试

Stable Diffusion——stable diffusion基础原理详解与安装秋叶整合包进行出图测试

前言 在2022年&#xff0c;人工智能创作内容&#xff08;AIGC&#xff09;成为了AI领域的热门话题之一。在ChatGPT问世之前&#xff0c;AI绘画以其独特的创意和便捷的创作工具迅速走红&#xff0c;引起了广泛关注。随着一系列以Stable Diffusion、Midjourney、NovelAI等为代表…
阅读更多...
【Linux权限】 Linux权限管理 | 粘滞位

【Linux权限】 Linux权限管理 | 粘滞位

文章目录 Linux权限管理什么是权限 ❓&#x1f4a6; 文件访问者的分类(人)&#x1f4a6; 文件类型和访问权限(事物属性) &#x1f4a6; 文件访问权限的相关设置方法目录的权限 粘滞位 Linux权限管理 什么是权限 ❓ 权限本质上是决定某件事情&#xff0c;某人能否做。 Linux下…
阅读更多...
【GameFramework框架内置模块】2、数据节点（Data Node）

【GameFramework框架内置模块】2、数据节点（Data Node）

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址 大家好&#xff0c;我是佛系工程师☆恬静的小魔龙☆&#xff0c;不定时更新Unity开发技巧&#xff0c;觉得有用记得一键三连哦。 一、前言 【GameFramework框架】系列教程目录&#xff1a; https://blog.csdn.net/q7…
阅读更多...
AMD FPGA设计优化宝典笔记（1）触发器

AMD FPGA设计优化宝典笔记（1）触发器

高亚军老师的这本书《AMD FPGA设计优化宝典》&#xff0c;他主要讲了两个东西&#xff1a; 第一个东西是代码的良好风格&#xff1b; 第二个是设计收敛等的本质。 这个书的结构是一个总论&#xff0c;加上另外的9个优化&#xff0c;包含的有&#xff1a;时钟网络、组合逻辑、触…
阅读更多...
从starrocks安装说起和Oracle的OLAP殊途同归

从starrocks安装说起和Oracle的OLAP殊途同归

StarRocks是一款分析型数据库&#xff08;他的定语也很多&#xff0c;分布式存算分离等等&#xff09;。作为数据库他的运行和维护迟早也是落在我这里的。对于做数据库的人都知道什么是交易型数据库&#xff0c;什么是分析型数据库。以及什么是事务分析混合型数据库。但是对于非…
阅读更多...
UE5 C++ 静态加载资源和类

UE5 C++ 静态加载资源和类

一.上篇文章创建组件并绑定之后 在Actor中加载初始化了组件&#xff0c;现在在组件中赋值。使用static ConstructorHelpers::FObjectFinder<T>TempName(TEXT("Copy Reference"))&#xff1b;再用TempName.Object //静态加载资源static ConstructorHelpers::FOb…
阅读更多...
2024.2.10 HCIA - Big Data笔记

2024.2.10 HCIA - Big Data笔记

1. 大数据发展趋势与鲲鹏大数据大数据时代大数据的应用领域企业所面临的挑战和机遇华为鲲鹏解决方案2. HDFS分布式文件系统和ZooKeeperHDFS分布式文件系统HDFS概述HDFS相关概念HDFS体系架构HDFS关键特性HDFS数据读写流程ZooKeeper分布式协调服务ZooKeeper概述ZooKeeper体系结构…
阅读更多...
拿捏c语言指针（下）

拿捏c语言指针（下）

前言 此篇讲解的主要是函数与指针的那些事~ 书接上回 拿捏c语言指针&#xff08;上&#xff09;和 拿捏c语言指针&#xff08;中&#xff09; ​​​​​​没有看的小伙伴要抓紧喽~ 欢迎关注​​个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗~ 如有错误&#x…
阅读更多...
GNU 图像处理程序 (GIMP) - 颜色拾取工具

GNU 图像处理程序 (GIMP) - 颜色拾取工具

GNU 图像处理程序 [GIMP] - 颜色拾取工具 References 选择 颜色拾取工具 在图片上选取要拾取位置的颜色&#xff0c;前景颜色会跟着改变 选择画笔工具&#xff0c;在图片上绘制的是选取的颜色 工具选项 -> 设置背景颜色&#xff0c;在图片上拾取为背景颜色 使用 橡皮工具&am…
阅读更多...
SQL Developer 小贴士：显示Trace文件

SQL Developer 小贴士：显示Trace文件

SQL Developer可以识别trace文件&#xff0c;而无需利用tkprof进行转换。 在数据库服务器上生产trace文件。例如&#xff1a; alter session set tracefile_identifierdemo01_02;alter session set sql_tracetrue;-- your SQL here, for example select * from hr.employees;a…
阅读更多...
汽车电子论文学习--电动汽车电机驱动系统动力学特性分析

汽车电子论文学习--电动汽车电机驱动系统动力学特性分析

关键重点&#xff1a; 1. 汽车的低速转矩存在最大限制&#xff0c;受附着力限制&#xff0c;因路面不同而变化。 2. 起步加速至规定转速的时间可以计算得到&#xff1a; 3. 电机额定功率的计算方式&#xff1a; 可以采取最高设计车速90%或120km/h匀速行驶的功率作为电机额定功…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023