2.1. 模块与组件、模块化与组件化
模块：
- 理解：向外提供特定功能的 js 程序，一般就是一个 js 文件
- 为什么：js 文件很多很复杂
- 作用：复用、简化 js 的编写，提高 js 运行效率
组件：
- 定义：用来实现局部功能的代码和资源的集合（html/css/js/image…）
- 为什么：一个界面的功能很复杂
- 作用：复用编码，简化项目编码，提高运行效率
模块化：
- 当应用中的 js 都以模块来编写的，那这个应用就是一个模块化的应用
组件化：
- 当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用
2.1.非单文件组件
非单文件组件：一个文件中包含有 n 个组件
单文件组件：一个文件中只包含有 1 个组件
2.2.1. 基本使用
Vue中使用组件的三大步骤
- 定义组件
- 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别
- el不要写，因为最终所有的组件都要经过一个vm的管理，由vm中的el才决定服务哪个容器
- data必须写成函数，避免组件被复用时，数据存在引用关系
- 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别
- 注册组件
- 局部注册：new Vue()的时候options传入components选项
- 全局注册：Vue.component(‘组件名’,组件)
- 使用组件
- 编写组件标签如 <school></school>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>基本使用</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
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>
-->
<!-- 准备好一个容器 -->
<div id="root">
<h2>{{msg}}</h2><hr>
<!-- 第三步：编写组件标签 -->
<school></school><hr>
<school></school><hr>
<hello></hello><hr>
</div>
<div id="root2">
<hello></hello>
</div>
<script type="text/javascript">
// 阻止vue在启动时生成生产提示
Vue.config.productionTip = false
// 第一步：创建school组件
const school = Vue.extend({
// el: '#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器
template: `
<div class="demo">
<h3>学校名称：{{schoolName}}</h3>
<h3>学校地址：{{address}}</h3>
<button @click="showName">点我提示学校名</button>
</div>
`,
data() {
return {
schoolName: '莆田学院',
address: '福建莆田'
}
},
methods: {
showName() {
alert(this.schoolName);
}
}
});
// 第一步：创建student组件
const student = Vue.extend({
template: `
<div>
<h3>学生姓名：{{studentName}}</h3>
<h3>学生年龄：{{age}}</h3>
</div>
`,
data() {
return {
studentName: '张三',
age: 18
}
}
});
//第一步：创建hello组件
const hello = Vue.extend({
template: `
<div>
<h3>你好啊！{{name}}</h3>
</div>
`,
data() {
return {
name: 'liqb'
}
}
})
// 第二步：全局注册组件
Vue.component('hello', hello);
// 创建vm
new Vue({
el: '#root',
data: {
msg: '你好啊！'
},
//第二步：注册组件（局部注册）
components: {
school: school,
student
}
})
// 创建vm
new Vue({
el: '#root2'
})
</script>
</body>
</html>
2.2.2. 组件注意事项
关于组件名
- 一个单词组成
- 第一种写法（首字母小写）：school
- 第二种写法（首字母大写）：School
- 多个单词组成
- 第一种写法（kebab-case 命名）：my-school
- 第二种写法（CamelCase 命名）：MySchool（需要Vue脚手架支持）
- 备注
- 组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行
- 可以使用name配置项指定组件在开发者工具中呈现的名字
关于组件标签
- 第一种写法：<school></school>
- 第二种写法：<school/>（需要Vue脚手架支持）
- 备注：不使用脚手架时，会导致后续组件不能渲染
一个简写方式：const school = Vue.extend(options)可简写为const school = options，因为父组件components引入的时候会自动创建
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>几个注意点</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
几个注意点:
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
-->
<!-- 准备好一个容器 -->
<div id="root">
<h2>{{msg}}</h2>
<school></school>
</div>
<script type="text/javascript">
// 阻止vue在启动时生成生产提示
Vue.config.productionTip = false
// 定义组件
const school = Vue.extend({
name: 'liqb', // 组件给自己起个名字，用于在浏览器开发工具上显示
template: `
<div>
<h3>学校名称：{{name}}</h3>
<h3>学校地址：{{address}}</h3>
</div>
`,
data() {
return {
name: '莆田学院',
address: '福建莆田'
}
}
});
new Vue({
el: '#root',
data:{
msg: '欢迎学习Vue!'
},
components: {
school
}
});
</script>
</body>
</html>
2.2.3. 组件的嵌套
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>组件的嵌套</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
</div>
<script type="text/javascript">
// 阻止vue在启动时生成生产提示
Vue.config.productionTip = false
// 定义student组件
const student = Vue.extend({
name: 'student',
template: `
<div>
<h4>学生姓名：{{name}}</h4>
<h4>学生年龄：{{age}}</h4>
</div>
`,
data() {
return {
name: 'liqb',
age: 18
}
}
});
// 定义school组件
const school = Vue.extend({
name: 'school',
template: `
<div>
<h3>学校名称：{{name}}</h3>
<h3>学校地址：{{address}}</h3>
<student></student>
</div>
`,
data() {
return {
name: '莆田学院',
address: '福建莆田'
}
},
// 注册组件（局部）
components: {
student
}
});
// 定义hello组件
const hello = Vue.extend({
template: `<h3>{{msg}}</h3>`,
data() {
return {
msg: '欢迎来到莆田学院学习！'
}
}
});
// 定义app组件
const app = Vue.extend({
template: ` <div> <hello></hello> <school></school> </div> `,
components: {
school,
hello
}
});
new Vue({
el: '#root',
template: '<app></app>',
//注册组件（局部）
components: {
app
}
});
</script>
</body>
</html>
2.2.4. VueComponent
关于 VueComponent
- school 组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，而是** Vue.extend() **生成的
- 我们只需要写 <school/> 或 <school></school>，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
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>VueComponent</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
关于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()配置中:
data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】
5.VueComponent的实例对象，以后简称vc (也可称之为: 组件实例对象)。
Vue的实例对象，以后简称vm。
-->
<!-- 准备好一个容器 -->
<div id="root">
<school></school>
<hello></hello>
</div>
<script type="text/javascript">
// 阻止vue在启动时生成生产提示
Vue.config.productionTip = false
// 定义school组件
const school = Vue.extend({
name: 'school',
template: `
<div>
<h3>学校名称：{{name}}</h3>
<h3>学校地址：{{address}}</h3>
<button @click="showName">点我提示学校名</button>
</div>
`,
data() {
return {
name: '莆田学院',
address: '福建莆田'
}
},
methods: {
showName() {
console.log('showName', this)
}
}
});
const test = Vue.extend({
template: `<span>liqb</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);
new Vue({
el: '#root',
components: {
school,
hello
}
});
</script>
</body>
</html>
2.2.5. 一个重要的内置关系
- 一个重要的内置关系：VueComponent.prototype.proto === Vue.prototype
- 为什么要有这个关系：让组件实例对象vc可以访问到 Vue原型上的属性、方法
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>一个重要的内置关系</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
1.一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
2.为什么要有这个关系：让组件实例对象vc可以访问到 Vue原型上的属性、方法
-->
<!-- 准备好一个容器 -->
<div id="root">
<school></school>
</div>
<script type="text/javascript">
// 阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
Vue.prototype.x = 99;
// 定义school组件
const school = Vue.extend({
name: 'school',
template: `
<div>
<h3>学校名称：{{name}}</h3>
<h3>学校地址：{{address}}</h3>
<button @click="showX">点我显示x</button>
</div>
`,
data() {
return {
name: '莆田学院',
address: '福建莆田'
}
},
methods: {
showX() {
console.log(this.x);
}
}
});
// 创建一个vm
new Vue({
el: '#root',
data:{
msg: '你好'
},
components: {
school
}
});
console.log(school.prototype.__proto__ === Vue.prototype);
// 定义一个构造函数
// 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__); // true
//
// // 程序员通过显示原型属性操作原型对象，追加一个x属性，值为99
// Demo.prototype.x = 99;
//
// console.log('@', d.x);
</script>
</body>
</html>
2.3. 单文件组件
- School.vue
<template> <!-- 组件的结构 --> <div id='Demo'> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> <button @click="showName">点我提示学校名</button> </div> </template> <script> /* 组件交互相关的代码(数据、方法等等) */ export default { name:'School', data() { return { name:'UESTC', address:'成都' } }, methods: { showName() { alert(this.name); } }, } </script> <style> /* 组件的样式 */ #Demo{ background: orange; } </style> - Student.vue
<template> <div> <h2>学生姓名：{{name}}</h2> <h2>学生年龄：{{age}}</h2> </div> </template> <script> export default { name:'Student', data() { return { name:'cess', age:20 } }, } </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
import App from './App.vue'; new Vue({ template: ` <App></App> `, el: '#root', components: { App } }) - index.html
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>单文件组件练习</title> </head> <body> <!-- 准备一个容器 --> <div id="root"></div> <script src="../js/vue.js"></script> <script src="./main.js"></script> </body> </html>
![Prompt learning 教学[案例篇]：文生文案例设定汇总，你可以扮演任意角色进行专业分析](https://img-blog.csdnimg.cn/bcc3379feb1d4d50873b79dba118eb28.png#pic_center)
