当前位置:   article > 正文

Vue2学习(尚硅谷张天禹老师)——Day04——组件化编程_尚硅谷vue张天禹配套文件

尚硅谷vue张天禹配套文件

二、Vue组件化编程

1、模块、组件、模块化、组件化

1.1、模块与模块化

①模块
(1)理解: 向外提供特定功能的 js 程序, 一般就是一个 js 文件
(2)为什么: js 文件很多很复杂
(3)作用: 复用 js, 简化 js 的编写, 提高 js 运行效率

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

1.2、组件与组件化

①组件
理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image……)
为什么: 一个界面的功能很复杂

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

组件化和传统的区别图解:
![ ](https://img-blog.csdnimg.cn/be82a11d21d94b57b9fc4b996a08d87a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lmf5pu-55y855y45pyJ5YWJ,size_20,color_FFFFFF,t_70,g_se,x_16)

在这里插入图片描述

2、非单文件组件

基本使用实例:

<!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>
			<hr>
			<!-- 第三步:编写组件标签 -->
			<school></school>
			<hr>
			<!-- 第三步:编写组件标签 -->
			<student></student>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		//第一步:创建school组件
		const school = Vue.extend({
            //组件定义时,一定不要写el配置项,因为最终所有的组件都要被一个vm管理,由vm决定服务于哪个容器。
			template:`
				<div class="demo">
					<h2>学校名称:{{schoolName}}</h2>
					<h2>学校地址:{{address}}</h2>	
				</div>
			`,
			data(){
				return {
					schoolName:'尚硅谷',
					address:'北京昌平'
				}
			}
		})

		//第一步:创建student组件
		const student = Vue.extend({
			template:`
				<div>
					<h2>学生姓名:{{studentName}}</h2>
					<h2>学生年龄:{{age}}</h2>
				</div>
			`,
			data(){
				return {
					studentName:'JOJO',
					age:20
				}
			}
		})
		
		//创建vm
		new Vue({
			el:'#root',
			data:{
				msg:'你好,JOJO!'
			},
			//第二步:注册组件(局部注册)
			components:{
				school,
				student
			}
		})
	</script>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69

使用组件的三大步骤:

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

细说三大步骤:

  • 如何定义一个组件:使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样,但也有点区别;

    • 区别如下:
      • el不要写,因为 最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。
      • data必须写成函数,因为 避免组件被复用时,数据存在引用关系。
    • 备注:使用template可以配置组件结构。
  • 如何注册组件

    • 局部注册:靠new Vue的时候传入components选项
    • 全局注册:靠Vue.component(‘组件名’,组件)
  • 编写组件标签:< school>< /school>

几个注意点

  • 关于组件名

    • 一个单词组成:第一种写法(首字母小写):school;第二种写法(首字母大写):School
    • 多个单词组成:第一种写法(kebab-case命名):my-school;第二种写法(CamelCase命名):MySchool (需要Vue脚手架支持)
  • 备注:

    • 组件名尽可能回避HTML中已有的元素名称,例如:h2、H2都不行。
    • 可以在组件中使用name配置项指定组件在开发者工具中呈现的名字。
  • 关于组件标签:

    • 第一种写法:
    • 第二种写法:
    • 备注:不用使用脚手架时,会导致后续组件不能渲染。
  • 创建组件的一个简写方式:

    • 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">
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		//定义student组件
		const student = Vue.extend({
			template:`
				<div>
					<h2>学生名称:{{name}}</h2>	
					<h2>学生年龄:{{age}}</h2>	
				</div>
			`,
			data(){
				return {
					name:'JOJO',
					age:20
				}
			}
		})

		//定义school组件
		const school = Vue.extend({
			template:`
				<div>
					<h2>学校名称:{{name}}</h2>	
					<h2>学校地址:{{address}}</h2>	
					<student></student>
				</div>
			`,
			components:{
				student
			},
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			}
		})

		//定义hello组件
		const hello = Vue.extend({
			template:`
				<h1>{{msg}}</h1>
			`,
			data(){
				return {
					msg:"欢迎学习尚硅谷Vue教程!"
				}
			}
		})

		//定义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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89

VueComponent

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

  • 我们只需要写或,Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的:new VueComponent(options)

  • 特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent!

  • 关于this指向:

    • 组件配置中:data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是VueComponent实例对象
    • new Vue(options)配置中:data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是Vue实例对象
  • VueComponent的实例对象,以后简称vc(也可称之为:组件实例对象),Vue的实例对象,以后简称vm.

只有在本笔记中VueComponent的实例对象才简称为vc

一个重要的内置关系

一个重要的内置关系:VueComponent.prototype.__proto__=== Vue.prototype

要想清楚了解这个内置关系就要先了解JavaScript高级部分的原型链相关的知识,下面先简单复习一下原型链的知识:
在这里插入图片描述

在这里插入图片描述
了解原型链后再分析Vue与VueComponent的关系
在这里插入图片描述
上图中的黄色的线本应该指向Object的原型对象的,Vue中将其改为指向Vue的原型对象。就有了VueComponent.prototype.__proto__=== Vue.prototype

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

3、单文件组件

了解了上面的非单文件组件后,单文件组件就容易理解了。单组件让每一个组件都自成一个文件,后缀为.vue,里面包含三部分:、、,分别在这三个标签里写结构、样式、逻辑。

这些多个组件文件需要组合起来这就涉及到js模块化的知识了,下面简单复习一下:

  • 模块功能主要由两个命令(暴露和引入)构成:export和import

    • export命令用于规定模块的对外接口
    • import命令用于输入其他模块提供的功能
  • 暴露数据语法汇总:

    • 统一暴露
      在这里插入图片描述

    • 分别暴露:
      在这里插入图片描述

    • 默认暴露(default)(vue中常用)

在这里插入图片描述

  • 引入模块数据语法汇总
    • 通用的导入方式
      在这里插入图片描述

    • 解构赋值形式
      在这里插入图片描述

    • 简便形式(只针对默认暴露)
      在这里插入图片描述

简单复习一下后,将上节的非单文件组件例子写成单文件组件,当然这就要写多个文件,如下:

首先是School组件和Student组件:

<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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
<template>
	<div>
		<h2>学生姓名:{{name}}</h2>
		<h2>学生年龄:{{age}}</h2>
	</div>
</template>

<script>
	 export default {
		name:'Student',
		data(){
			return {
				name:'张三',
				age:18
			}
		}
	}
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

再就是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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

接着写main.js,里面创建vue实例

import App from './App.vue'

new Vue({
	el:'#root',
	template:`<App></App>`,
	components:{App},
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

最后就是整个页面的结构,也就是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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/573550
推荐阅读
相关标签
  

闽ICP备14008679号