vu2 尚硅谷 组件化编程

已于 2022-08-31 18:22:13 修改
阅读量276 收藏
点赞数
分类专栏： # vue 文章标签： vue vue.js javascript 前端
于 2022-08-03 09:21:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangshengwei230612/article/details/126133884
版权

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

2.1.1. 模块

  1. 理解: 向外提供特定功能的 js 程序, 一般就是一个 js 文件
  2. 为什么: js 文件很多很复杂
  3. 作用:复用js,简化js的编写,提高js运行效率
    2.1.2. 组件
  4. 理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image…)
  5. 为什么: 一个界面的功能很复杂
  6. 作用: 复用编码, 简化项目编码, 提高运行效率
    2.1.3. 模块化
    当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。
    2.1.4. 组件化
    当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用,。
    2.2. 非单文件组件
  7. 模板编写没有提示
  8. 没有构建过程, 无法将 ES6 转换成 ES5
  9. 不支持组件的 CSS
  10. 真正开发中几乎不用
    2.3. 单文件组件
    2.3.1. 一个.vue 文件的组成(3 个部分) 1. 模板页面

组件

官网教程链接
https://cn.vuejs.org/guide/essentials/component-basics.html
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

非单文件组建

基本使用

<!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>

vm 和cv的关系

  1. VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
  2. Vue的实例对象，以后简称vm。

new Vue实例时 vm比vc多传el参数
vc的data必须是一个函数
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!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>

单文件组件

vscode 需要安装 插件才会识别 xxx.vue 文件

在这里插入图片描述

单文件主要三部分内容

安装了vetur 插件后，输入 " <v " 回车直接生成以下模版代码
在这里插入图片描述

js模块的暴露和引用

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

声明组件的简写方式

在这里插入图片描述
html中引入js
在这里插入图片描述
在这里插入图片描述

单文件结构

在这里插入图片描述
Schoole.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:'北京昌平'
			}
		},
		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:'张三',
				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>
紫金小飞侠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2基础知识点（5）组件化编程
浪头的博客
05-25 108
王元肉==>个人主页 大家一起加油，我喜欢分专栏将知识打碎成一份一份小知识点，一篇文章只说一个知识点，因此每篇文章篇幅较短，希望大家不要介意。如有需要可以查看专栏看看是否有该文章中涉及到的知识点进行讲解的文章，如果大家觉得有帮助，希望大家三连支持一下。 推荐阅读 文章结构非单文件组件单文件组件 非单文件组件 单文件组件 结束啦！ ...
vue2快速安装环境，创建vue2项目教程(windows)
热门推荐
爱吃雪糕的小布丁的博客
05-06 2万+
1、安装环境   首先首先进入node.js（v12.13.0.msi版本，最新版可能npm版本太高了，会报错，不过卸载重新装低版本也行）官网安装node.js，node.js自带npm，node.js相当于后端的tomcat,是一个运行前端的服务器，npm相当于maven,是一个前端的包管理工具。自动帮配置好了环境变量。   官网地址：https://nodejs.org/en/   直接下载第一个即可，第一个时最多用户使用的版本，第二个时最新版。   下载之后，安装即可。全部默认安装就行了。该软件自动
vu2搭建框架-封装axios-router
pythonwork的博客
12-07 448
vue框架基础搭建
【前端项目】时间不够？刚学完vue2应该练的项目--todoList项目
薇z的博客
07-26 1276
该项目是一个非常简易的vu2项目,适合刚学习完vue2,或者是刚接触vue2的新手使用，但是又不想花费大量时间练大型项目的小伙伴。项目虽然小，但是涉及了最常用的增删改查功能，以及各组件之间进行传数据的方式。父子组件，自定义事件。全局事件总线等，有一定的练手意义............
vu2和vue3的区别
m0_72759446的博客
10-10 131
【代码】vu2和vue3的区别。
DIY 2通道VU表LCD 16x2-电路方案
04-19
标题中的“DIY 2通道VU表LCD 16x2-电路方案”指的是一个自制的音频测量设备，它采用LCD显示屏（16x2字符显示）来呈现2通道的VU（Volume Unit，音量单位）表读数。VU表通常用于功率放大器系统中，用来实时监测音频...
河大中澳Vu虚拟计算资料
04-22
2. 选择题：测试学生对各种虚拟化技术特性和优势的理解。 3. 简答题：要求解释虚拟化技术如何提高资源利用率，或者比较不同虚拟化架构的优缺点。 4. 计算题：可能涉及计算虚拟化环境中的资源分配比例，或者评估性能...
KTAudio VU表-电路方案
04-20
简单，易于构建的2 x 14条立体声VU表用于表示音频电平。 该项目旨在让喜欢数字VU（音量单位）电表并想要构建自己的电表的人们娱乐。该项目易于构建，不需要深厚的技能。但是，要获得更好的声音效果和水平视觉效果，...
基于Vue2-Calendar改进的日历组件（含中文使用说明）
10-17
本文将详细介绍一个基于Vue2-Calendar组件进行改进的日历组件，该组件在原版基础上进行了多项优化，以满足更多样化的使用需求。首先，让我们了解一下Vue2-Calendar的基础知识。 Vue2-Calendar是一款适用于Vue.js...
KTAudio VU表-项目开发
03-30
硬件部分则是通过`wiring_diagram_FWNMPTxZc7.png`文件来描述的，这通常是一个电路接线图，展示了如何将VU表的各个组件（如模拟电路、LED灯条等）连接到Arduino控制器上。理解这个接线图对于正确组装和调试硬件至关...
Vu2安装脚手架、创建项目以及库
Dteamdoat的博客
03-02 405
vue2安装脚手架以及插件
vu2响应式原理 代码分析
lzfengquan的博客
06-13 302
vue2响应式原理 代码分析
从0开始创建vue2项目
LlanyW的专栏
11-06 1821
1.安装称手工具 webstorm官网下载安装，然后重启系统，买个学习账号开始。2.安装Node.js官网，node -v可以查看安装的node.js版,我这里安装是16.18.0。
Vue2之常用指令
qq_73339471的博客
02-17 663
若不阻止，点击子盒子时，弹窗会同时弹出“父盒子”。而我们想要的效果是：点击子盒子时，只弹出“子盒子”。：v-show = “表达式”      表达式值 true表示显示，false表示隐藏。：v-if = “表达式”      表达式值 true表示存在，false表示不存在。：动态设置html中的标签属性，如src，href，title…：不频繁进行切换的场景，即：要么存在，要么不存在。：多次渲染整个元素，可以是数组，对象，数字…：v-html=“表达式”：v-model=“变量”
Vu2任何组件之间的传递参数方法（父子，兄弟，甚至其他）
weixin_43343144的博客
01-10 365
方案之一：Vue空实例+vm.$emit 和 vm.$on   实现原理：组件之间可以通过vm.$emit发射数据，通过vm.$on接收数据，在处理brother01 和brother02的时候，创建一个空Vue对象来发射与接收数据，任何组件之间，都可以来处理！  当然，父子关系的 建议用系统标签来完成，更简单：参考文档：https://blog.csdn.net/weixin_433431...
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 467
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
Python Formulas模型以JSON格式文件导出导入
最新发布
Humbunklung的专栏
07-23 273
Python Formulas库，JSON格式导出导入。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 253
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 258
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
vu e2父子组件通信方式
05-15
Vue2中父子组件通信可以通过props和$emit方法来实现。 1. 父组件向子组件传递数据：使用props将数据传递给子组件。 父组件模板中： ``` <child-component :prop-name="propValue"></child-component> ``` 子...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值