二、Vue组件化编程
1、模块、组件、模块化、组件化
1.1、模块与模块化
①模块
（1）理解: 向外提供特定功能的 js 程序, 一般就是一个 js 文件
（2）为什么: js 文件很多很复杂
（3）作用: 复用 js, 简化 js 的编写, 提高 js 运行效率
②模块化
当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。
1.2、组件与组件化
①组件
理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image……)
为什么: 一个界面的功能很复杂
②组件化
当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用。
组件化和传统的区别图解：
](https://i-blog.csdnimg.cn/blog_migrate/a799b63aa83e425d885b4bddf4e6723c.png)
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）使用组件（写组件标签）
细说三大步骤：
-
如何定义一个组件：使用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>
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>
<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，里面创建vue实例
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>
扫一扫
470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
