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

文章目录

  • 📚模块与组件、模块化与组件化
  • 📚非单文件组件
    • 🐇基本使用
    • 🐇关于组件的几个注意点
    • 🐇组件的嵌套
  • 📚单文件组件
    • 🐇一个.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.mfbz.cn/a/405174.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Node.js的debug模块源码分析及在harmonyOS平台移植

Node.js的debug模块源码分析及在harmonyOS平台移植

Debug库 是一个小巧但功能强大的 JavaScript 调试工具库&#xff0c;可以帮助开发人员更轻松地进行调试&#xff0c;以便更快地发现和修复问题。它的主要特点是可以轻松地添加调试日志语句&#xff0c;同时在不需要调试时可以轻松地禁用它们&#xff0c;以避免在生产环境中对性…
阅读更多...
[linux]进程间通信（IPC）———共享内存（shm）（什么是共享内存，共享内存的原理图，共享内存的接口，使用演示）

[linux]进程间通信（IPC）———共享内存（shm）（什么是共享内存，共享内存的原理图，共享内存的接口，使用演示）

一、什么是共享内存 共享内存区是最快的&#xff08;进程间通信&#xff09;IPC形式。一旦这样的内存映射到共享它的进程的地址空间&#xff0c;这些进程间数据传递不再涉及到内核&#xff0c;换句话说是进程不再通过执行进入内核的系统调用来传递彼此的数据。注意&#xff1a;…
阅读更多...
如何进行高性能架构的设计

如何进行高性能架构的设计

一、前端优化 减少请求次数页面静态化边缘计算 增加缓存控制&#xff1a;请求头 减少图像请求次数&#xff1a;多张图片变成 一张。 减少脚本的请求次数&#xff1a;css和js压缩&#xff0c;将多个文件压缩成一个文件。 二、页面静态化 三、边缘计算 后端优化 从三个方面进…
阅读更多...
vue3中使用vuedraggable实现拖拽el-tree数据进分组

vue3中使用vuedraggable实现拖拽el-tree数据进分组

看效果&#xff1a; 可以实现单个拖拽、双击添加、按住ctrl键实现多个添加&#xff0c;或者按住shift键实现范围添加&#xff0c;添加到框中的数据&#xff0c;还能拖拽排序 先安装 vuedraggable 这是他的官网 vue.draggable中文文档 - itxst.com npm i vuedraggable -S 直接…
阅读更多...
Python-pdfplumber读取PDF内容

Python-pdfplumber读取PDF内容

文章目录 前言一、pdfplumber模块1.1 pdfplumber的特点1.2 pdfplumber.PDF类1.3pdfplumber.Page类 二 pdfplumber的使用2.1 加载PDF2.2 pdfplumber.PDF 类2.3 pdfplumber.Page 类2.4 读取PDF2.5 读取PDF文档信息2.6 查看总页数2.7 查看总页数读取第一页的宽度&#xff0c;页高等…
阅读更多...
chatGPT 使用随想

chatGPT 使用随想

一年前 chatGPT 刚出的时候&#xff0c;我就火速注册试用了。 因为自己就是 AI 行业的&#xff0c;所以想看看国际上最牛的 AI 到底发展到什么程度了. 自从一年前 chatGPT 火出圈之后&#xff0c;国际上的 AI 就一直被 OpenAI 这家公司引领潮流&#xff0c;一直到现在&#x…
阅读更多...
【安卓基础4】Activity（二）

【安卓基础4】Activity（二）

&#x1f3c6;作者简介&#xff1a;|康有为| &#xff0c;大四在读&#xff0c;目前在小米安卓实习&#xff0c;毕业入职 &#x1f3c6;安卓学习资料推荐&#xff1a; 视频&#xff1a;b站搜动脑学院 视频链接 &#xff08;他们的视频后面一部分没再更新&#xff0c;看看前面也…
阅读更多...
VSCode The preLaunchTask ‘C/C++: clang++ 生成活动文件‘ terminated with exit code -1

VSCode The preLaunchTask ‘C/C++: clang++ 生成活动文件‘ terminated with exit code -1

更改tasks.json文件里面的type为shell 选择g 选择g&#xff0c;然后点回到text.c&#xff0c;按下F5. 得到结果。 文中内容参考: 从零开始手把手教你配置属于你的VS Code_哔哩哔哩_bilibili https://blog.csdn.net/qq_63872647/article/details/128006861
阅读更多...
基于springboot+vue的桂林旅游景点导游平台(前后端分离)

基于springboot+vue的桂林旅游景点导游平台(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…
阅读更多...
从扩散模型基础到DIT

从扩散模型基础到DIT

Diffusion model 扩散模型如何工作&#xff1f; 输入随机噪声和文本内容&#xff0c;通过多次预测并去除图片中的噪声后&#xff0c;最终生成清晰的图像。 以上左边这张图&#xff0c;刚开始是随机噪声&#xff0c;999为时间序列。 为什么不直接预测下一张图片呢&#xff1f;…
阅读更多...
java 面向对象-上

java 面向对象-上

1.构造器&#xff08;或构造方法&#xff09;&#xff1a; Constructor 构造器的作用&#xff1a; 1.创建对象 2.初始化对象的信息 2.使用说明&#xff1a; * 1.如果没显式的定义类的构造器的话&#xff0c;则系统默认提供一个空参的构造器 * 2.定义构造器的格式&#xff1a…
阅读更多...
python OpenCV：seamlessClone泊松融合

python OpenCV：seamlessClone泊松融合

一、seamlessClone函数的用法 翻译 https://www.learnopencv.com/seamless-cloning-using-opencv-python-cpp/ def seamlessClone(src, dst, mask, p, flags, blendNone): # real signature unknown; restored from __doc__"""seamlessClone(src, dst, mask, …
阅读更多...
RM电控讲义【定时器篇】

RM电控讲义【定时器篇】

HAL库最显著的特点是基于结构体从而利用句柄进而简化代码。 定时器初始化&#xff1a; TIM6_DAC_IRQn是STM32G431单片机中定时器TIM6的中断请求名。TIM6是STM32G431的一个基本定时器&#xff0c;具有基本的定时功能。当累加的时钟脉冲数超过预定值时&#xff0c;TIM6能触发中断…
阅读更多...
C语言-指针初学速成

C语言-指针初学速成

1.指针是什么 C语言指针是一种特殊的变量&#xff0c;用于存储内存地址。它可以指向其他变量或者其他数据结构&#xff0c;通过指针可以直接访问或修改存储在指定地址的值。指针可以帮助我们在程序中动态地分配和释放内存&#xff0c;以及进行复杂的数据操作。在C语言中&#…
阅读更多...
如何快速卸载windows电脑的一些软件？

如何快速卸载windows电脑的一些软件？

本系列是一些电脑常规操作的普及&#xff0c;有需要借鉴即可 注&#xff1a;每个电脑都会有差异&#xff0c;参考即可。 其实大部分软件你删除桌面上的图标不等于删除&#xff0c;因为桌面上的那个图标就是一个简单的快捷方式而已。 在这里插入图片描述 那如何正确的卸载软件呢…
阅读更多...
数据安全：超越威胁搜寻，监控数据流和用户行为

数据安全：超越威胁搜寻，监控数据流和用户行为

网络安全曾经是建立在严格协议和反应措施之上的堡垒&#xff0c;现在正在经历变革。随着数字环境变得更加复杂和数据驱动&#xff0c;对保护数字资产采取细致入微的方法的需求比以往任何时候都更加明显。这种演变标志着与传统威胁检测的背离&#xff0c;转向强调上下文并抢占用…
阅读更多...
windows下快速安装nginx 并配置开机自启动

windows下快速安装nginx 并配置开机自启动

1、下载地址&#xff1a;http://nginx.org/en/download.html 2、启动nginx 注意⚠️ 不要直接双击nginx.exe&#xff0c;这样会导致修改配置后重启、停止nginx无效&#xff0c;需要手动关闭任务管理器内的所有nginx进程。 在nginx.exe目录&#xff0c;打开命令行工具&#xf…
阅读更多...
缓存篇—缓存击穿

缓存篇—缓存击穿

在很多场景下&#xff0c;我们的业务通常会有几个数据会被频繁地访问&#xff0c;比如秒杀活动&#xff0c;这类被频地访问的数据被称为热点数据。 如果缓存中的某个热点数据过期了&#xff0c;此时大量的请求访问了该热点数据&#xff0c;就无法从缓存中读取&#xff0c;直接…
阅读更多...
AD24-蛇形走线

AD24-蛇形走线

一、单端蛇形走线 1、公差参数 2、布线-网络等长调节 3、参数说明 ①手工输入绕线的长度 ②参照个网络的长度绕线 ③按照自身设置的规绕线&#xff08;一般选用) 4、调节 5、最后 二、差分蛇形走线 1、布线-差分对网络等长调节 2、如在选中的时候出现问题&#xff0c;按CtrlD…
阅读更多...
安卓游戏开发之音频技术优劣分析

安卓游戏开发之音频技术优劣分析

一、引言 在安卓游戏开发中&#xff0c;音频处理技术扮演着至关重要的角色&#xff0c;它不仅能够增强游戏的沉浸感和玩家体验&#xff0c;还能通过声音效果传达关键的游戏信息。以下将对几种常见的安卓游戏音频处理技术进行优劣分析&#xff0c;并结合应用场景来阐述其特点。 …
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站