Vue2--Vue组件化编程

bug_killer
1,127 阅读4分钟

基本概念

传统方式编写应用与组件化方式编写应用的对比

image.png

image.png

对比：组件化编写应用更加高效方便，比如我们不同的网站用同一个顶部组件，我们只需要引入组件即可；而传统的编写方式需要重新编写或复制html、css、js文件；相比较而言组件更好。

模块

1、理解：向外提供特定功能的js程序，一般就是一个js文件（可以将模块理解为js）

2、为什么：js文件很多很复杂；

3、作用：复用js，简化js的编写，提高js运行效率；

组件

image.png

1、理解：用来实现局部（特定）功能效果的代码集合（html，css，js，image，……）

2、为什么：一个界面的功能很复杂

3、作用：复用编码，简化项目编码，提高运行效率；（复用是不同文件import引入已有的模块，而不是复制粘贴）

模块化

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

组件化

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

非单文件组件

1、什么是非单文件组件：一个文件中含有n个组件

2、Vue使用组件的三大步骤：

  • 定义组件（创建组件）
  • 注册组件
  • 使用组件（写组件标签）

2-1、如何定义一个组件？

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

（1）el不要写，为什么？ -- 最终所哟的组件都要经过一个vm的管理，由vm中的el决定服务那个容器；

（2）data必须写成函数，为什么？ -- 避免组件被复用时，数据存在引用关系。

备注：使用template可以配置组件结构

2-2、如何注册一个组件？

（1）局部注册：靠new Vue的时候传入components选项

（2）全局注册：靠Vue.component('组件名',组件)

2-3、如何编写组件标签？ <school></school>

3、案例：

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

		<div id="root2">
			<hello></hello>
		</div>
	</body>
	<script type="text/javascript">
			//第一步：创建组件
			//创建school组件
			const school = Vue.extend({
				//el :'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
				template:`
				  <div>
					<h2>学校名称：{{schoolName}}</h2>
					<h2>学校地址：{{address}}</h2>
					<button @click="showName">点我提示学校名</button>
				  </div>
				`,
				data(){
					return {
						schoolName:'尚硅谷',
						address:'北京昌平',
					}
				},
				methods:{
					showName(){
						alert(this.schoolName)
					}
				},
			})
			
			//创建student组件
			const student = Vue.extend({
				//el :'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
				template:`
				  <div>
					<h2>学生姓名：{{studentName}}</h2>
					<h2>学生年龄：{{age}}</h2>
				  </div>
				`,
				data(){
					return {
						studentName:'张三',
						age:18,
					}
				}
			})

			//第一步：创建hello组件
			const hello = Vue.extend({
				template:`
					<div>
						<h3>你好啊！{{name}}</h3>
					</div>
				`,
				data(){
					return {
						name:'bug_killer',
					}
				},
			})
			//第二步：全局注册组件
			Vue.component('hello',hello)
			
			//创建vm
			const vm = new Vue({
				el:'#root',
				data:{
					msg:'你好啊！'
				},
				//第二步：局部注册
				components:{
					xuexiao:school,//后面是组件原来的名称，前面是自己起的名字
					xuesheng:student,
				}
			})

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

效果：

image.png

组件注意事项

1、关于组件名：

（1）一个单词组成：

  • 第一种写法（首字母小写）：school
  • 第二种写法（首字母大写）：School

（2）多个单词组成

  • 第一种写法（kebab-case命名）：my-school
  • 第二种写法（CamelCase命名）：MySchool(需要Vue脚手架支持)

（3）备注：

  • 组件名尽可能回避HTML中已有的元素名称，例如：h2，H2都不行；
  • 可以使用name配置项指定组件再开发者工具中呈现的名字；

2、关于组件标签：

  • 第一种写法： <school></school>
  • 第二种写法：<school />（需要脚手架支持，不使用脚手架时会导致后续组件不能渲染）

3、一个简写方式：const school = Vue.extend(options)可简写为const school = options

组件嵌套

案例：（school组件中包含一个student组件）

	<body>
		<!--准备好一个容器-->
		<div id="root">
			<school></school>
		</div>
	</body>
	<script type="text/javascript">
			//Note：先创建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>学校名称：{{schoolName}}</h2>
						<h2>学校地址：{{schoolAddress}}</h2>
						<student></student> <!--注册给谁就在谁这里写-->
					</div>
				`,
				data(){
					return {
						schoolName:'尚硅谷',
						schoolAddress:'北京昌平',
					}
				},
				components:{
					//注册组件（局部）
					student
				}
			})
			
			
			new Vue({
				el:'#root',
				components:{
					school
				}
			})
	</script>

VueComponent构造函数

1、一个组件本质是一个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。

案例：

	<body>
		<!--准备好一个容器-->
		<div id="root">
			<school></school>
			<hello></hello>
		</div>
	</body>
	<script type="text/javascript">
			
			//创建school组件
			const school = Vue.extend({
				name:'school',
				template:`
					<div>
						<h2>学校名称：{{schoolName}}</h2>
						<h2>学校地址：{{schoolAddress}}</h2>
						<button @click = "showName">点我提示学校名</button>
					</div>
				`,
				data(){
					return {
						schoolName:'尚硅谷',
						schoolAddress:'北京昌平',
					}
				},
				methods:{
					showName(){
						alert('学校名称是：'+this.schoolName)
					}
				}
			})

			//创建test组件
			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
				}
			})
			new Vue({
				el:'#root',
				components:{
					school,
					hello
				}
			})
	</script>

一个重要的内置关系

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

2、为什么要有这个关系：让组件实例对象vc可以访问到Vue原型上的属性、方法

image.png

单文件组件

每个组件写成.vue文件

每个.vue文件的结构：

<template>
    <!-- 组件的结构 -->
</template>
    
<script>
    //组件交互相关的代码（数据、方法等等）
</script>

<style>
    /* 组件的样式 */
</style>

脚手架中页面显示流程（从外到内）：


index.html显示页面（通过调用main.js中的内容）
|
|
main.js创建Vue实例，显示App组件的内容
|
|
App.vue组件：是所有组件的总组件，由App组件调用其他组件
|
|
……
  • index.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习一下单文件组件的语法</title>
	</head>
	<body>
		<div id="root"></div>
		<script type="text/javascript" src="main.js"></script>
		<script type="text/javascript" src="./main.js"></script>
	</body>
</html>
  • main.js
import App from 'App.vue'

new Vue({
	el:'#root',
	template:`<App></App>`,
	components:{App},
})
  • App.vue
<template>
	<!-- 组件的结构 -->
	<div>
		<School></School>
		<Student></Student>
	</div>
</template>

<script>
	import School from './School'
	import Student from './Student'
	
	export default {
		name:'App',
		components:{
			School,
			Student
		}
	}
</script>
  • School.vue(这里推荐首字母大写的命名方式)
<template>
	<!-- 组件的结构 -->
	<div class="demo">
		<h2>学校名称：{{schoolName}}</h2>
		<h2>学校地址：{{address}}</h2>
		<button @click="showName">点我提示学校名</button>
	</div>
</template>

<script>
	//组件交互相关的代码（数据、方法等等）
	const school = Vue.extend({
		name:'School',
		data(){
			return {
				schoolName:'尚硅谷',
				address:'北京昌平'
			}
		},
		methods:{
			showName(){
				alert(this.schoolName)
			}
		},
	})
	export default school
</script>

<style>
	/* 组件的样式 */
	.demo{
		background-color: orange;
	}
</style>

Student.vue(这里推荐首字母大写的命名方式)

<template>
	<!-- 组件的结构 -->
	<div class="demo">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生年龄：{{age}}</h2>
	</div>
</template>

<script>
	//组件交互相关的代码（数据、方法等等）
	const school = Vue.extend({
		name:'Student',
		data(){
			return {
				name:'张三',
				age:18
			}
		}
	})
	export default student
</script>
avatar
文章
阅读
粉丝