第 2 章：Vue 组件化编程

最新推荐文章于 2023-08-19 19:24:11 发布
最新推荐文章于 2023-08-19 19:24:11 发布
阅读量245 收藏
点赞数
分类专栏： 学习之路 文章标签： vue.js javascript 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41720396/article/details/121519946
版权

学习资料来自尚硅谷VUE教学视频

csdn：课程代码、vue3笔记、课件

gitee：课件、代码、资料

其他：vscode插件推荐、第三方库网站、npmjs库

工具库推荐：
moment.js 时间处理工具，很强很大。还有个轻量的叫dayjs
生成全球唯一id工具：uuid，但是很大，有个精简版：nanoid

章节导航：

第 1 章：Vue 核心（上）

第 1 章：Vue 核心（下）

第 2 章：Vue 组件化编程

第 3 章：使用 Vue 脚手架

第 4 章：Vue 中的 ajax

第 5 章：vuex

第 6 章：vue-router（Vue路由）

第 7 章：Vue UI 组件库

第 2 章：Vue 组件化编程

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 都以模块来编写的, 那这个应用就是一个模块化的应用。

2.1.4. 组件化

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

2.2. 非单文件组件

2.2.1. 基本使用

		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>

<!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:school,
				student:student
			}
		})

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

2.2.2. 几个注意点

		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

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

2.2.3. 组件的嵌套

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

2.2.4. 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。

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

2.2.5. 一个重要的内置关系

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)
				}
			},
		})
		console.log(Vue.prototype.x);
		console.log(school.prototype.x);
		console.dir(Vue.prototype);
		console.dir(school.prototype.__proto__);
		//创建一个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>

2.3. 单文件组件

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

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

2.3.2. 基本使用

  1. 引入组件
  2. 映射成标签
  3. 使用组件标签
mildness丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue模块化开发
m0_51636525的博客
11-03 4368
1.
vue组件化编程-todoList案例.zip
07-14
在“vue组件化编程-todoList案例.zip”中，我们可以深入学习如何使用Vue进行组件化开发，构建一个基本的待办事项（Todo List）应用。这个案例将涵盖以下关键知识点： 1. **Vue组件基础**： - 组件是Vue的核心特性...
[前端学习]文件组件专题
Maynor的博客
08-26 436
Vue中使用组件的三大步骤： 一、定义组件(创建组件) 二、注册组件 三、使用组件(写组件标签) 一、如何定义一个组件？ 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别； 区别如下： 1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。 2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据
前端基础（Vue的模块化开发）
MRJJ_9的博客
08-19 944
Vue项目搭建、模块化开发
Vue-模块化
张锦的博客
04-23 4154
记录学习的点点滴滴
Vue基础知识+组件化开发+模块化开发总结
weixin_45802793的博客
01-24 1852
三、内容: 一、MVVM View层 视图层，我们前端开发时候的DOM层 主要就是给用户展示各种信息 Model层 数据层:可能是我们固定的思数据，更多的是来自我们的服务器，在网路上请求下来的数据 VueModel层 视图模型层 视图模型层是View和Model沟通的桥梁 一方面实现Data Binding(数据绑定), Model的改变反映到View 另一方面实现Dom Listener 二、Vue的生命周期 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
十四天学会Vue-Vue 组件化编程（理论+实战）（第四天）
最新发布
06-01
在“十四天学会Vue-Vue组件化编程”的学习过程中，第四天的主题可能是深入理解和实践单文件组件（Single File Component，简称SFC）。今天我们将详细探讨这一重要知识点。 1. **Vue组件基础** Vue组件是可重用的...
Vue组件化开发思考
08-28
Vue组件化开发是一种高效、可复用且易于维护的编程方式，它将应用程序的不同部分划分为独立的组件，每个组件负责特定的功能。组件可以像拼积木一样组合在一起，构建出复杂的用户界面。在深入讨论Vue组件化之前，我们...
vue - Vue组件化编程.doc
07-08
总结，Vue组件化编程让开发者能够以模块化的方式组织和管理代码，提高开发效率和代码质量。通过单文件组件，我们可以清晰地看到组件的全貌，同时利用组件的复用性和嵌套性构建出灵活多变的用户界面。理解和熟练运用...
Vue第二部分：相关组件的学习.pdf
08-17
在Vue的第二部分，主要关注的是组件化开发，这是Vue的核心特性之一。组件是Vue中可重用的代码块，它们能够封装HTML、CSS和JavaScript，从而提高代码的复用性和可维护性。以下是对组件基础的详细解释： 1. **组件...
vue实现文件下载的2种方式
weixin_52268321的博客
05-02 8412
iframe、a标签下载文件都是调用浏览器默认下载行为iframe闭合标签，会创建包含另个文档的内联框架，通过iframe实现文件（附件）的下载，隐藏iframe，当点击事件触发的时候，动态设置src就能实现文件下载功能。
Vue模块化开发
qq_57907966的博客
09-15 604
1、全局安装2、全局安装vue脚手架3、初始化vue项目创建vue-demo文件夹，在该文件夹下打开cmd窗口4、启动vue项目访问http://localhost:8080。
vue 中 文件下载方式总结
huanxin_94的博客
09-23 8768
文件下载方式 1. window.location.href 方式 注意： 文件名称为中文时要使用 encodeURI 转码； 下载文件格式为 图片 或 txt 时文件会直接打开； 根据文件名下载： window.location.href = "/zuul/dsms/SXMS/留置人员登记.xlsx"; 文件名有中文： window.location.href = `/zuul/dsms/SXMS/${encodeURI("留置人员登记.xlsx")}`; 根据接口及参数下载（文件名未知）：
Vue实战中的模块化开发
郭育培的博客
11-30 2834
最近从APP开发转向了Web后台管理平台的开发，在经受了半年多的APP开发的折磨之后终于迎来了春天，再也不用自己梳理业务、绘制原型、设置。 使用的技术：Vue 使用的UI库：若依 api: axios 虽然这种后台管理系统都比较简单，多数页面都是重复重复再重复，但是在开发过程中如果用心去写，去总结还是会有很多收获的。 ...
单文件组件
m0_59345890的博客
09-05 841
如果.vue的script注释了 在打包的时候 vue的打包环境 会帮我们把这个文件解析为一个对象 然后给这个对象添加一个template属性 值为解析的template页面模板字符串。前面我们在html文件中通过src外部导入Vue.js框架，今天我们不再这样，我们直接下载Vue的包导入到项目中，直接在vue的代码环境中写项目。这样做的好处：业务区分更加明显，能够更好的维护，不用在一个文件中写所有代码，在团队开发时可以很好的分工完成。单文件组件，即每个组件单独一个文件（后缀.vue），按需导入。
VUE 下载文件
计算机辅助工程
07-27 584
vue下载文件
vue单文件组件实例2：简单单文件组件
duansamve的博客
02-11 1009
Introduce.vue： &lt;template&gt; &lt;div class="intro"&gt; 单位介绍 &lt;/div&gt; &lt;/template&gt; &lt;script&gt; &lt;/script&gt; &lt;style scoped&gt; .intro{ font-size:20px; c
Vue学习Ⅳ（slot与v-slot、模块化开发、导入与导出、webpack）
胡图图不糊涂的博客
04-21 536
一、 二、
Vue2实战指南：组件化与前端工程化解析
书中通过具体实例深入浅出地解析Vue2，强调组件化编程思想和前端工程化方法的运用，同时包含组件的单元测试和E2E测试，旨在帮助读者全面掌握Vue2技术并保证项目质量。该书适合Vue2初学者和有一定经验的开发者阅读，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值