学习 Vue组件化编程 这一篇就够了

已于 2022-08-15 23:17:59 修改
阅读量2.3k 收藏 7
点赞数 4
分类专栏： Vue 文章标签： vue 组件化
于 2022-04-23 12:40:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/apple_53947466/article/details/124356149
版权

目录

一、对组件的理解

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

1、模块

  • 理解：向外提供特定功能的 js程序，一般就是一个 js文件
  • 为什么使用：js文件 很多很复杂
  • 作用：复用 js，简化 js 的编写，提高 js 的运行效率

2、组件

  • 理解：用来实现局部(特定)功能效果的代码集合(html/css/js/image……)
  • 为什么使用：一个界面的功能很复杂
  • 作用：复用编码, 简化项目编码, 提高运行效率

3、模块化

当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。

4、组件化

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

1.2、传统方式编写应用

  • 依赖关系混乱，不好维护
  • 代码复用率不高

在这里插入图片描述

1.3、组件方式编写应用

实现 应用 中 局部功能代码 和 资源 的集合
在这里插入图片描述
通常一个应用会以一棵嵌套的组件树的形式来组织：

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。
在这里插入图片描述

二、非单文件组件

2.1、简介

一个文件包含多个n个组件

  • 模板编写没有提示
  • 没有构建过程, 无法将 ES6 转换成 ES5
  • 不支持组件的 CSS
  • 真正开发中几乎不用

2.2、基本使用

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

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

1、如何定义一个组件

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；

  • el不要写：最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
  • data必须写成函数：避免组件被复用时，数据存在引用关系
  • 使用template可以配置组件结构

2、如何注册组件？

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

3、编写组件标签：<xxxl></xxx>

代码展示

<body>
	<div id="root1">
		<hello></hello>
		<author></author>
	</div>
	
	<hr>
	
	<div id="root2">
		<hello></hello>
	</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script type="text/javascript">
	Vue.config.productionTip = false
	//第一步：创建author组件
	const author = Vue.extend({
		template:`
			<div>
				<h2>{{name}}</h2>
			</div>
		`,
		data(){
			return {
				name:'Laptoy',
			}
		},
	})
	//第一步：创建hello组件
	const hello = Vue.extend({
		template:`
			<div>	
				<h2>Hello World</h2>
			</div>
		`
	})
	
	//第二步：全局注册组件
	Vue.component('hello',hello)
	
	new Vue({
		el:'#root1',
		//第二步：注册组件（局部注册）
		components:{
			author
		}
	})
	new Vue({
		el:'#root2',
	})
</script>

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

2.3、注意点

1、关于组件名:

  • 一个单词组成：
    • 第一种写法(首字母小写)：school
    • 第二种写法(首字母大写)：School
  • 多个单词组成：
    • 第一种写法(kebab-case命名)：my-school
    • 第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
  • 备注：
    • 组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
    • 可以使用 name 配置项指定组件在开发者工具中呈现的名字。

2、关于组件标签:

  • 第一种写法：<school></school>
  • 第二种写法：<school/>
  • 备注：不用使用脚手架时，会导致后续组件不能渲染。

3、一个简写方式：

  • const school = Vue.extend(options) 可简写为：const school = options
<body>
	<div id="root">
		<hello></hello>
		<hello/>
	</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script type="text/javascript">
	Vue.config.productionTip = false
	
	//定义组件
	const hello = Vue.extend({
		// 指定组件在开发者工具中呈现的名字
		name:'Laptoy',
		template:`<div>Hello World</div>`,
	})
	new Vue({
		el:'#root',
		components:{
			hello
		}
	})
</script>

在这里插入图片描述

2.4、组件的嵌套

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		
	</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	//定义student组件
	const student = Vue.extend({
		template:`
			<div>
				<h2>学生姓名:Laptoy</h2>
			</div>
		`,
	})
	
	//定义school组件
	const school = Vue.extend({
		name:'school',
		template:`
			<div>
				<h2>学校名称:CSDN</h2>
				<student></student>
			</div>
		`,
		//注册组件（局部）
		components:{
			student
		}
	})
	//定义hello组件
	const hello = Vue.extend({
		template:`<h1>Hello World</h1>`,
	})
	
	//定义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>

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

三、VueComponent

1、介绍

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

  • 我们只需要写<xxx/>或<xxx></xxx>，Vue解析时会帮我们创建组件的实例对象，即Vue帮我们执行的：new VueComponent(options)

  • 特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！

2、关于this指向：

  • 组件 配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】（简称VC）
  • new Vue(options) 配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】（简称VM）

3、【Vue实例对象】管理一个或多个【VueComponent实例对象】
在这里插入图片描述
4、VM与VC的区别

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

<div id="app">
  <button-counter></button-counter>
</div>

new Vue({ el: '#app' })

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

vc：data可以是kv形式，可以传递 el 绑定 容器
vm：data必须是函数

总结：vc与vm几乎一致，但有部分不同（底层构造代码大部分都是复用的）

四、内置关系

function A(){
	this.x = 1
}
const a = new A()

console.log(A.prototype) // 显式原型属性
console.log(a.__proto__) // 隐式原型属性

console.log(A.prototype === a.__proto__) // true

A.prototype.y = 2 // 通过显式原型属性操作原型对象追加y属性

console.log(a) // 可以看到 a.__proto__ 中多了 y 属性

1、一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype

2、为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue 原型上的属性、方法
在这里插入图片描述

五、单文件组件

实现效果

  • App.vue 管理 School.vue+Student.vue
  • main.js 引入 App.vue
  • index.html 作为容器给 main.js 挂载

在浏览器无法直接运行，这里只是为了分析脚手架结构

1、创建子组件 School.vue 和 Student.vue

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: 'xxx',
      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>

2、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>

3、main.js

import App from './App.vue'

new Vue({
	el: '#root',
	// 为root容器渲染<App></App>，这样能保证root容器为干净的div
	template: `<App></App>`,
	components: { App },
})

4、index.html

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>练习一下单文件组件的语法</title>
</head>

<body>
	<!-- 准备一个容器 -->
	<div id="root">
		<!-- <App></App> -->
	</div>
	
	<script type="text/javascript" src="../js/vue.js"></script>

	<script type="text/javascript" src="./main.js"></script>
</body>

</html>
Laptoy
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
前端主流框架vue学习笔记第一篇
08-29
总的来说，Vue.js 以其简洁的语法和强大的功能深受开发者喜爱，它的响应式数据绑定、组件化和易学习性使其成为前端开发的热门选择。通过不断实践和学习，开发者可以逐步掌握 Vue 并应用于实际项目中。
Vue3+Typescript日历组件
07-29
通过这个组件，开发者不仅能掌握Vue3的组件化开发，还能深入了解TypeScript在实际项目中的应用，以及如何处理日期、星座和节假日等常见功能。同时，良好的代码组织和测试策略也是项目成功的关键。
Vue组件化编程
weixin_50429510的博客
08-16 78
Vue组件化编程 非单文件组件 Vue中使用组件的三大步骤 定义组件（创建组件） 注册组件 使用组件（写组件标签） 定义一个组件 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别 el不要写：最终所有的组件都要经过一个vm管理，由vm中的el决定服务哪个容器 data必须写成函数：避免组件被复用时，数据存在引用关系 备注：使用template可以配置组件结构 注册组件 局部注册：靠new Vu
【Vue】组件化编程
m0_48982503的博客
03-21 1127
组件的基本认识(非单文件组件): 使用组件的三大步骤： 一、定义组件(创建组件) 二、注册组件 1.局部注册： 2.全局注册： 三、使用组件(写组件标签) 关于组件名: 组件的嵌套： VueComponent构造函数 关于this指向： Vue与VueComponent的内置关系 ​ 单文件组件： 基本结构：
vue的组件化编程
最新发布
libingjiedd的博客
05-06 591
注意：此处的data使用的是函数式返回（不是对象式）：因为多次一使用同一个组件，当后使用组件部分改变data中数据，前面组件使用组件的数据也会改变。components：{'组件名','...'} :注册组件（在Vue实例中使用此配置项）：局部注册。只需要使用组件标签就会创建组件实例=vc实例（使用两次组件标签就会实例化两次vc）// 2. 全局注册组件(组件名字，组件在哪)：可以使用在任何vue绑定的模板中。组件标签：使用组件（将组件标签写在容器中，可以写多个组件标签=复用）
Vue的组件化编程
热门推荐
暗武逢天的博客
07-11 2万+
Vue组件化
通过npm引用的vue组件使用详解
08-31
在Vue.js中，组件是构建应用的核心，它们允许开发者将UI拆分成独立、可复用的部分，从而提高代码的组织性和可维护性。本篇文章主要介绍了如何通过npm引用的Vue...这对于学习Vue.js开发和理解组件化编程具有很大的帮助。
vue2与vue3的使用区别与组件通信
09-12
Vue3 引入了一个新特性Teleport，它允许我们将组件渲染到DOM树的其他位置，比如不在当前组件的父节点中，这在处理模态对话框、嵌入式内容等场景下非常有用。 #### 4.Suspense Vue3 提供了Suspense组件，用于在组件...
AboutCG UE4 引擎蓝图可视化编程
06-10
UE4不仅支持C++语言进行编程，还提供了一种独特的蓝图系统，允许开发者通过拖拽节点的方式实现可视化编程，极大地降低了游戏开发的技术门槛。 #### 二、蓝图可视化编程基础概念 **1. 蓝图的概念** 蓝图是UE4中的一...
Vue 组件化编程
程序三两行
07-20 315
vue组件化编程
vue组件化编程
yfy的博客
12-09 470
组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树： 1. 使用vue-cli创建模板项目 1.1 简介 1) vue-cli 是 vue 官方提供的脚手架工具 2) github: https://github.com/vuejs/vue-cli 3) 作用: 从 https://github.com/vuejs-tem.
（三）Vue组件化编程
在这个地方会介绍一些前端和后端的开发内容，暂时以JavaEE和Vue为主。
04-15 328
Vue,组件
Vue（三）——组件化编程
路过Coder
11-08 841
1. 理解: 向外提供特定功能的 js 程序, 一般就是一个 js 文件2. 为什么: js 文件很多很复杂3. 作用: 复用 js, 简化 js 的编写, 提高 js 运行效率。
vue组件化编程应用
smile radiantly
11-17 215
写几个小案例来理解vue的组件化编程思想,下面是一个demo. 效果图示: 功能: Add组件用于添加用户评论,提交后右边评论回复会立马显示数据.Item组件点击删除可以删除当前用户评论.当List组件中用户评论为空时,会提示"暂无评论，点击左侧添加评论". 项目目录: 代码: 1.index.html <!DOCTYPE html> <html> <head...
第二章--Vue组件化编程
qq_43527345的博客
12-21 445
Vue组件化编程 为什么要使用组件化编程？ 传统：顶部 导航 内容 底部。四个css，html中引入。依赖关系混乱、不好维护 1.1、模块与组件、模块化与组件化 1.1.1、模块 向外提供特定功能的js程序，一般就是一个js文件 js文件很多并且复杂 复用js，简化js的编写，提高js运行效率 1.1.2、组件 实现应用中局部功能代码和资源的集合 一个界面的功能很复杂 复用编码，简化项目编码，提高运行效率 1.1.3、模块化 当应用中的js是以模块来编写的，这个应用就是一个模块化的应用 1.1.4、组件化
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Laptoy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值